锋利的jquery学习

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_14994863/article/details/88306100

有道云笔记无法复制图片到博客,可点击链接查看详细笔记:

锋利的jquery学习

第一章 认识jQuery
1.1 JavaScript 和 JavaScript 库
js库:
Prototype
Dojo
Ext JS
MooTools
jQuery :强大的选择器,出色的DOM操作,可靠的事件处理、完善的兼容性和链式操作等功能。write less, do more!
1.2.2 jQuery 的优势:
1.轻量级
2.强大的选择器
3.出色的DOM操作的封装
4.可靠的事件处理机制
5.完善的Ajax
6.不污染顶级变量
7.出色的浏览器兼容性
8.链式操作方式
9.隐式迭代
10.行为层与结构层的分离
11.丰富的插件支持
12.完善的文档
13.开源
window.onload 与 $(document).ready()对比:

1.链式操作风格:调整代码风格

  1. 为代码添加注释:

1.4 jQuery对象和DOM对象

  1. DOM对象:(Document Object Model, 文档对象模型)

  2. jQuery对象:通过jQuery包装DOM对象后产生的对象

jQuery 对象和DOM对象的互相转换:

1.jQuery 对象转为 DOM对象:[index]和get(index)

2.DOM对象转为 jQuery对象:用$()把DOM对象包装起来即可

1.5 解决jQuery和其它库的冲突

  1. jQuery库在其它库之后导入:

  2. jQuery 库在其他库之前导入:

1.6 jQuery 开发工具和插件:

  1. Dreamweaver
    2.Aptana
    3.jQueryWTP 和 Spket 可以使eclipse支持自动提示代码功能。
    4.Visual Studio 2008
    1.7 小结:

第2章 jQuery 选择器
2.1 选择器是什么?

  1. jQuery 选择器:

2.2 jQuery 选择器的优势
1.写法简洁
2. 支持css1 到 css3 选择器
3.完善的处理机制

2.3 jQuery 选择器
2.3.1 基本选择器

2.3.2 层次选择器

$(“a b”) 选中a内部所有的b元素,包含子元素及孙子元素等所有下层元素。
$(“a > b”)选中a下所有的子元素b。

2.3.3 过滤选择器
分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
1.基本过滤选择器

  1. 内容过滤选择器

  2. 可见性过滤选择器:根据元素的可见喝不可见性状态来选择相应的元素

  3. 属性过滤选择器

  4. 子元素过滤选择器

  5. 表单对象属性过滤选择器:

2.3.4 表单选择器

2.4 应用jQuery改写示例

2.5 选择器中的一些注意事项
2.5.1 含有特殊符号

2.5.2 选择器中含有空格

带空格,选择class为“test”的元素里面的隐藏元素。
不带,选择隐藏的class为“test”的元素。
2.6 案例
2.7 其它选择器
2.8 小结

第3章 jQuery中的DOM操作

3.1 DOM 操作的分类:DOM Core(核心)、HTML-DOM、CSS-DOM

  1. DOM Core

  2. HTML-DOM

  3. CSS_DOM

3.2 jQuery中的DOM操作

  1. 查找元素节点

  2. 查找属性节点:attr() 方法获取属性的值

3.2.2 创建节点

  1. 创建元素节点

  2. 创建文本节点

  3. 创建属性节点

3.2.3 插入节点

3.2.4 删除节点

  1. remove() 方法

  2. empty() 方法

3.2.5 复制节点:clone()方法

3.2.6 替换节点: replaceWith()和replaceAll()。

3.2.7 包裹节点

  1. wrapInner() 方法

3.2.8 属性操作 : attr(), removeAttr()方法删除属性
1.设置和获取属性

  1. 删除属性

3.2.9 样式操作

  1. 获取样式和设置样式

  2. 追加样式 addClass()方法

  3. 移除样式 removeClass()方法

  4. 切换样式 toggle()方法

  5. 判断是否含有某个样式 hasclass()方法

3.2.10 设置和获取HTML、文本和值
1.html()方法: 可以获取到HTML内容,包括节点结构等。

  1. text() 方法

  2. val()方法

3.2.11 遍历节点

  1. children() 方法 获取元素的子元素集合

  2. next() 方法 : 获取元素后面紧邻的同辈元素

  3. prev() 方法 : 获取前面紧邻的同辈元素

  4. siblings() 方法: 取得前后所有的同辈元素

  5. closest() 方法 : 获取最近的匹配元素

3.2.12 CSS-DOM操作: 读取和设置style对象的各种属性

  1. offset()方法

  2. position() 方法

  3. scrollTop()方法 和 scrollLeft()方法: 滚动条距离及设置位置

3.3 案例研究
3.4 小结

第4章 jQuery 中的事件和动画
4.1 jQuery中的事件
4.1.2事件绑定

  1. 基本效果

判断元素是否显示:“:visible”

  1. 改变绑定事件的类型

  2. 简写绑定事件

4.1.3 合成事件 : hover() 和 toggle()

togle()方法

4.1.4 事件冒泡
1.什么是冒泡?
嵌套的元素,内部元素也会影响外部元素绑定的事件,称为事件冒泡。

  1. 事件冒泡引发的问题 :可能会触发我们本不想触发的事件
    需要限制事件的作用范围
    事件对象:

停止事件冒泡: stopPropagation() 方法

只会触发span绑定的事件,阻止触发了div和body的点击事件

阻止默认性为: perventDefault() 方法

return false; 可以同时阻止默认行为和事件冒泡。

事件捕获:

4.1.5 事件对象的属性

  1. event.type()方法 获取事件的类型

  2. event.preventDefault() 方法

  3. event.target()方法 : 获取到触发事件的元素

  4. event.relatedTarget() 方法

  5. event.pageX() 方法 / event.pageY() 方法 : 获取光标相对于页面的x坐标和y坐标

  6. event.which() 方法 : 获取鼠标和键盘按键

event.originalEvent() event.metaKey()方法:

4.1.6 移除事件

  1. 移除按钮元素上注册的点击事件:

  2. 移除 元素的其中一个事件

one() 方法类似bind() 方法,为元素绑定事件,不过只执行一次,即会解除绑定:

4.1.7 模拟操作 trigger() 方法

传递数据: trigger(type [ , data ]) ,type 为事件类型, data为传递给事件处理函数的附加数据,数组形式传递。

4.1.8 其它用法
1.绑定多个事件类型

  1. 添加事件命名空间,便于管理

  2. 相同事件名称, 不同命名空间执行方法

4.2 jQuery 中的动画
4.2.1 show() 方法 和 hide() 方法
hide() 方法会将元素的display样式改为none

jquery动画要求在标准模式下:

让元素动起来:

4.2.2 fadeIn() 方法 和 fadeOut() 方法:改变元素不透明度

4.2.3 slideUp() 方法 和 slideDown() 方法 延伸和缩短

4.2.4 自定义动画方法 animate()

  1. 自定义简洁动画:

  2. 累加、累减动画

  3. 多重动画

  4. 综合动画

4.2.5 动画回调函数:

4.2.6 停止动画和判断是否处于动画状态

  1. 停止元素的动画:stop() 方法

  2. 判断元素是否处于动画状态: :animated

4.2.7 其它动画方法
toggle( speed, [callback])
slideToggle( speed, [callback] )
fadeTo( speed, opacity, [callback] )

4.2.8 动画方法概括

  1. 改变样式属性

  2. 动画队列

4.4 小结

第五章 jQuery 对表单、表格的操作及更多应用
5.1 表单应用:

5.1.1 单行文本框应用:

5.1.2 多行文本框应用

  1. 高度变化

:animated

  1. 滚动条高度变化 scrollTop

5.1.3 复选框应用
5.1.4 下拉框应用
5.2 表格应用

猜你喜欢

转载自blog.csdn.net/qq_14994863/article/details/88306100