有道云笔记无法复制图片到博客,可点击链接查看详细笔记:
第一章 认识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.4 jQuery对象和DOM对象
- DOM对象:(Document Object Model, 文档对象模型)
- jQuery对象:通过jQuery包装DOM对象后产生的对象
jQuery 对象和DOM对象的互相转换:
1.jQuery 对象转为 DOM对象:[index]和get(index)
2.DOM对象转为 jQuery对象:用$()把DOM对象包装起来即可
1.5 解决jQuery和其它库的冲突
- jQuery库在其它库之后导入:
- jQuery 库在其他库之前导入:
1.6 jQuery 开发工具和插件:
- Dreamweaver
2.Aptana
3.jQueryWTP 和 Spket 可以使eclipse支持自动提示代码功能。
4.Visual Studio 2008
1.7 小结:
第2章 jQuery 选择器
2.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.基本过滤选择器
- 内容过滤选择器
- 可见性过滤选择器:根据元素的可见喝不可见性状态来选择相应的元素
- 属性过滤选择器
- 子元素过滤选择器
- 表单对象属性过滤选择器:
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
- DOM Core
- HTML-DOM
- CSS_DOM
3.2 jQuery中的DOM操作
- 查找元素节点
- 查找属性节点:attr() 方法获取属性的值
3.2.2 创建节点
- 创建元素节点
- 创建文本节点
- 创建属性节点
3.2.3 插入节点
3.2.4 删除节点
- remove() 方法
- empty() 方法
3.2.5 复制节点:clone()方法
3.2.6 替换节点: replaceWith()和replaceAll()。
3.2.7 包裹节点
- wrapInner() 方法
3.2.8 属性操作 : attr(), removeAttr()方法删除属性
1.设置和获取属性
- 删除属性
3.2.9 样式操作
- 获取样式和设置样式
- 追加样式 addClass()方法
- 移除样式 removeClass()方法
- 切换样式 toggle()方法
- 判断是否含有某个样式 hasclass()方法
3.2.10 设置和获取HTML、文本和值
1.html()方法: 可以获取到HTML内容,包括节点结构等。
- text() 方法
- val()方法
3.2.11 遍历节点
- children() 方法 获取元素的子元素集合
- next() 方法 : 获取元素后面紧邻的同辈元素
- prev() 方法 : 获取前面紧邻的同辈元素
- siblings() 方法: 取得前后所有的同辈元素
- closest() 方法 : 获取最近的匹配元素
3.2.12 CSS-DOM操作: 读取和设置style对象的各种属性
- offset()方法
- position() 方法
- scrollTop()方法 和 scrollLeft()方法: 滚动条距离及设置位置
3.3 案例研究
3.4 小结
第4章 jQuery 中的事件和动画
4.1 jQuery中的事件
4.1.2事件绑定
- 基本效果
判断元素是否显示:“:visible”
- 改变绑定事件的类型
- 简写绑定事件
4.1.3 合成事件 : hover() 和 toggle()
togle()方法
4.1.4 事件冒泡
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 移除事件
- 移除按钮元素上注册的点击事件:
- 移除 元素的其中一个事件
one() 方法类似bind() 方法,为元素绑定事件,不过只执行一次,即会解除绑定:
4.1.7 模拟操作 trigger() 方法
传递数据: trigger(type [ , data ]) ,type 为事件类型, data为传递给事件处理函数的附加数据,数组形式传递。
4.1.8 其它用法
1.绑定多个事件类型
- 添加事件命名空间,便于管理
- 相同事件名称, 不同命名空间执行方法
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()
- 自定义简洁动画:
- 累加、累减动画
- 多重动画
- 综合动画
4.2.5 动画回调函数:
4.2.6 停止动画和判断是否处于动画状态
- 停止元素的动画:stop() 方法
- 判断元素是否处于动画状态: :animated
4.2.7 其它动画方法
toggle( speed, [callback])
slideToggle( speed, [callback] )
fadeTo( speed, opacity, [callback] )
4.2.8 动画方法概括
- 改变样式属性
- 动画队列
4.4 小结
第五章 jQuery 对表单、表格的操作及更多应用
5.1 表单应用:
5.1.1 单行文本框应用:
5.1.2 多行文本框应用
- 高度变化
:animated
- 滚动条高度变化 scrollTop
5.1.3 复选框应用
5.1.4 下拉框应用
5.2 表格应用