《锋利的jQuery》第1-3章
第一章 认识JQuery
1、jQuery的优势
2、配置jQuery的环境
3、编写jQuery的代码
1）在jQuery库中，$就是jQuery的一个简写形式，例如$(document)和jQuery(document)是等价的。
2）window.onload与$(document).ready()的对比
4、jQuery的代码风格
1）链式操作风格：对于同一个对象不超过3个操作的，可以直接写成一行；对于同一个对象的较多操作，建议每行写一个操作；对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进。
2）为代码添加注释
5、jQuery对象和DOM对象
1）在JQuery对象中无法使用DOM对象的任何方法，反之亦然；用#id作为选择符取得的是jQuery对象而并非是document.getElementById(“id”)所取得的DOM对象。
2）jQuery对象和DOM对象的相互转换：首先约定，如果获取的对象是jQuery对象，那么在变量前面加上$。
jQuery对象转成DOM对象：jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象；另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。
DOM对象转成jQuery对象：对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。
6、解决jQuery和其他库的冲突
1）jQuery库在其他库之后导入：在其他库和jQuery库都被加载完毕后，可以再任何时候调用jQuery.noConflict()函数来讲变量$的控制权移交给其他JavaScript库。
2）jQuery库在其他库之前导入：那么可以直接使用“jQuery”来做一些jQuery的工作，同时可以使用$()方法作为其他库的快捷方式。
第二章 jQuery的选择器
1、jQuery选择器的优势
1）简洁的写法
2）支持CSS1、CSS2的全部和CSS3的部分选择器
3）完善的处理机制：使用jQuery获取网页中不存在的元素不会报错；当要用jQuery检查某个元素在网页上是否存在时，应该根据获取到元素的长度来判断，或者转化成DOM对象来判断。
2、基本选择器：通过元素id、class和标签名等来查找DOM元素
|
选择器 |
描述 |
返回 |
|
$(“#id”) |
根据给定的id匹配一个元素 |
单个元素 |
|
$(“.class”) |
根据给定的类名匹配元素 |
集合元素 |
|
$(“element”) |
根据给定的元素名匹配元素 |
集合元素 |
|
$(“*”) |
匹配所有元素 |
集合元素 |
|
$(“selector1,......,selectorN”) |
将每一个选择器匹配到的元素合并后一起返回 |
集合元素 |
3、层次选择器：
|
选择器 |
描述 |
返回 |
|
$(“ancestor descendant”) |
选取祖先元素里的所有后代元素 |
集合元素 |
|
$(“parent>child”) |
选取父元素下的所有子元素 |
集合元素 |
|
$(“prev+next”) |
选取下一个紧跟的同辈元素 |
集合元素 |
|
$(“prev~siblings”) |
选取后面所有的同辈元素 |
集合元素 |
4、过滤选择器：
1）基本过滤选择器
|
选择器 |
描述 |
返回 |
|
:first |
选取第一个元素 |
单个元素 |
|
:last |
选取最后一个元素 |
单个元素 |
|
:not(selector) |
去除所有与给定选择器匹配的元素 |
集合元素 |
|
:even |
选取索引是偶数的所有元素，索引从0开始 |
集合元素 |
|
:odd |
选取索引是奇数的所有元素，索引从0开始 |
集合元素 |
|
:eq(index) |
选取索引等于index的元素，index从0开始 |
单个元素 |
|
:gt(index) |
选取索引大于index的元素，index从0开始 |
集合元素 |
|
:lt(index) |
选取索引小于index的元素，index从0开始 |
集合元素 |
|
:header |
选取所有的标题元素，h1~h6 |
集合元素 |
|
:animated |
选取当前正在执行动画的所有元素 |
集合元素 |
|
:focus |
选取当前获取焦点的元素 |
集合元素 |
2）内容过滤选择器
|
选择器 |
描述 |
返回 |
|
:contains(text) |
选取含有文本内容为“text”的元素 |
集合元素 |
|
:empty |
选取不包含子元素或者文本的空元素 |
集合元素 |
|
:has(selector) |
选取含有选择器所匹配的元素的元素 |
集合元素 |
|
:parent |
选取含有子元素或者文本的元素 |
集合元素 |
3）可见性过滤选择器
|
选择器 |
描述 |
返回 |
|
:hidden |
选取所有不可见的元素 |
集合元素 |
|
:visible |
选取所有可见的元素 |
集合元素 |
4）属性过滤选择器
|
选择器 |
描述 |
返回 |
|
[attribute] |
选取拥有此属性的元素 |
集合元素 |
|
[attribute = value] |
选取属性的值为value的元素 |
集合元素 |
|
[attribute != value] |
选取属性的值不为value的元素 |
集合元素 |
|
[attribute ^= value] |
选取属性的值为以value开始的元素 |
集合元素 |
|
[attribute $= value] |
选取属性的值为以value结束的元素 |
集合元素 |
|
[attribute *= value] |
选取属性的值含有value的元素 |
集合元素 |
|
[attribute |= value] |
选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-”）的元素 |
集合元素 |
|
[attribute ~= value] |
选取属性用空格分隔的值中包含一个给定值的元素 |
集合元素 |
|
[attribute 1][attribute 2][attribute 3] |
用属性选择器合并成一个复合选择器，满足多个条件。每选择一次，缩小一次范围 |
集合元素 |
5）子元素过滤选择器
|
选择器 |
描述 |
返回 |
|
:nth-child(even) |
选取每个父元素下的索引值是偶数的所有元素 |
集合元素 |
|
:nth-child(odd) |
选取每个父元素下的索引值是奇数的所有元素 |
集合元素 |
|
:nth-child(2) |
选取每个父元素下的索引值等于2的所有元素 |
集合元素 |
|
:nth-child(3n) |
选取每个父元素下的索引值是3的倍数的元素，n从1开始 |
集合元素 |
|
:nth-child(3n+1) |
选取每个父元素下的索引值是（3n+1）的元素，n从1开始 |
集合元素 |
|
:first-child |
选取每个父元素的第一个子元素 |
集合元素 |
|
:last-child |
选取每个父元素的最后一个子元素 |
集合元素 |
|
:only-child |
选取每个父元素的唯一一个子元素（如果父元素含有多个子元素，则不匹配） |
集合元素 |
6）表单对象属性过滤选择器
|
选择器 |
描述 |
返回 |
|
:enabled |
选取所有可用元素 |
集合元素 |
|
:disabled |
选取所有不可用元素 |
集合元素 |
|
:checked |
选取所有被选中的元素（单选框，复选框） |
集合元素 |
|
:disabled |
选取所有被选中的选项元素（下拉列表） |
集合元素 |
5、表单选择器
|
选择器 |
描述 |
返回 |
|
:input |
选取所有的<input>、<textarea>、<select>和<button>元素 |
集合元素 |
|
:text |
选取所有的单行文本框 |
集合元素 |
|
:password |
选取所有的密码框 |
集合元素 |
|
:radio |
选取所有的单选框 |
集合元素 |
|
:checkbox |
选取所有的多选框 |
集合元素 |
|
:submit |
选取所有的提交按钮 |
集合元素 |
|
:image |
选取所有的图像按钮 |
集合元素 |
|
:reset |
选取所有的重置按钮 |
集合元素 |
|
:button |
选取所有的按钮 |
集合元素 |
|
:file |
选取所有的上传域 |
集合元素 |
|
:hidden |
选取所有不可见元素 |
集合元素 |
6、选择器中的一些注意事项
1）选择器中如果含有“.”、“#”、“(”、“]”等特殊字符，就需要使用转移字符（\\）转义
2）属性选择器中不需要在属性前添加@符号
3）选择器中包含空格为后代选择器，不包含空格为过滤选择器
第三章 jQuery中的DOM操作
1、DOM操作的分类
1）DOM Core
2）HTML-DOM
3）CSS-DOM：用于获取和设置style对象的各种属性
2、jQuery中的DOM操作
1）查找节点
查找元素节点：
查找属性节点：使用attr()方法获取元素的属性
2）创建节点
创建元素节点：当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。
创建文本节点：在创建元素节点时直接将文本内容写进去。
创建属性节点：在创建元素节点时直接将属性内容写进去。
3）插入节点
|
方法 |
描述 |
|
append() |
向每个匹配的元素内部追加内容 |
|
appendTo() |
将所有匹配的内容追加到指定的元素中，颠倒了append()；也可以用于移动元素，首先从文档中删除匹配的元素，然后将该元素插入到指定的元素中 |
|
prepend() |
向每个匹配的元素内部前置内容 |
|
prependTo() |
将所有匹配的内容前置到指定的元素中，颠倒了prepend() |
|
after() |
在每个匹配的元素之后插入内容 |
|
insertAfter() |
将所有匹配的内容插入到指定元素的后面，颠倒了after() |
|
before() |
在每个匹配的元素之前插入内容 |
|
insertBefore() |
将所有匹配的内容插入到指定元素的前面，颠倒了before() |
4）删除节点
|
方法 |
描述 |
|
remove() |
从DOM中删除所有匹配元素及其所有后代节点，返回一个指向已被删除的节点的引用；可以通过传递参数选择性地删除元素 |
|
detach() |
与remove()不同的是，所有绑定的事件、附加的数据都会保留下来 |
|
empty() |
清空元素中的所有后代节点（包括文本节点） |
5）复制节点：clone()方法如果没有传递参数则被复制的新元素不具有任何行为，如果参数为true则复制元素的同时复制元素中所绑定的事件。
6）替换节点：replaceWith()方法将所有匹配的元素都替换成指定的HTML或者DOM元素；replaceAll()方法颠倒了replaceWith()方法。
7）包裹元素：
|
方法 |
描述 |
|
wrap() |
将所有匹配的元素进行单独的包裹 |
|
wrapAll() |
将所有匹配的元素用一个元素来包裹 |
|
wrapInner() |
将每一个匹配的元素的子内容 （包括文本节点）用其他结构化的标记包裹起来 |
8）属性操作
获取属性：attr()方法传递一个参数——属性名。
设置属性：attr()方法传递两个参数——属性名和属性值；如果需要同时为同一个元素设置多个属性，则将一个“名/值”形式的对象设置为匹配元素的属性。
删除属性：removeAttr()方法传递一个参数——属性名。
9）样式操作
获取样式：attr()方法传递一个参数——”class”。
设置样式：attr()方法传递两个参数——”class”和类名。
追加样式：addClass()方法传递一个参数——类名；如果给一个元素添加多个class值，则会合并它们的样式；如果有不同的class设定了同一样式属性，则后者覆盖前者。
移除样式：removeClass()方法传递一个参数——类名，则删除这个类名；如果将一个元素的多个类名以空格分隔作为参数，则同时删除这多个类名；如果没有参数，则删除所有的类名。
切换样式：toggleClass()方法控制样式上的重复切换，如果类名存在则删除它，如果类名不存在则添加它
判断是否含有某个样式：hasClass()方法等价于is()方法，传递一个参数——类名。
10）设置和获取HTML、文本和值
html()方法：没有传递参数用于读取某个元素中的HTML内容；传递一个参数用于设置某个元素中的HTML内容；该方法可以用于XHTML文档，但不能用于XML文档。
text()方法：没有传递参数用于读取某个元素中的文本内容；传递一个参数用于设置某个元素中的文本内容；该方法对XHTML文档和XML文档都有效。
val()方法：用于设置和获取元素的值，无论元素是文本框、单选框、多选框还是下拉列表都可以返回元素的值，如果元素为多选，则可以返回一个包含所有选项的值的数组
11）遍历节点
children()方法：用于取得匹配元素的子元素集合，只考虑子元素而不考虑其他后代元素。
next()方法：用于取得匹配元素后面紧邻的同辈元素。
prev()方法：用于取得匹配元素前面紧邻的同辈元素。
siblings()方法；用于取得匹配元素前后所有的同辈元素。
parent()方法：用于取得匹配元素的父元素。
parents()方法：用于取得匹配元素的祖先元素，不同于parent()方法，当它找到第一个父节点时并没有停止查找，而是继续查找，最后返回多个父节点。
closest()方法：用于取得最近的匹配元素，接收一个参数——需要匹配的元素。首先检查当前元素是否匹配，如果匹配直接返回；如果不匹配则向上查找父元素，逐级向上直到找到匹配元素；如果什么都没找到，则返回一个空的jQuery对象。
12）CSS-DOM操作
css()方法用于获取或设置元素的样式
offset()方法用于获取元素在当前视窗的相对偏移，返回一个对象包含两个属性——top和left。
position()方法：获取元素相对于最近一个position属性设置为relative或absolute的祖先节点的相对偏移，返回一个对象包含两个属性——top和left。
scrollTop()方法和scrollLeft()方法分别用于获取元素的滚动条距顶端的距离和距左侧的距离
