第1章 认识jQuery
jQuery有以下优势：
- 轻量级；
- 强大的选择器；
- 出色的DOM操作的封装；
- 可靠的事件处理机制；
- 完善的Ajax；
- 不污染顶级变量；
- 出色的浏览器兼容性；
- 链式操作方式；
- 隐式迭代；
- 行为层与结构层的分离；
- 丰富的插件支持；
- 完善的文档；
- 开源。
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
在jQuery对象中无法使用DOM对象的任何方法。同样，DOM对象也不能使用jQuery里的方法。
jQuery对象和DOM对象的相互转换
如果获取的对象是jQuery对象，那么在变量前面加上$，例如:
var $variable = jQuery对象;
如果获取的是DOM对象，则定义如下：
var variable = DOM对象;
（1）jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get(index)。
（2）对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为$(DOM对象)。
通过以上的方法，可以任意地相互转换jQuery对象和DOM对象。
解决jQuery和其他库的冲突
（1）jQuery库在其他库之后导入
在其他库和jQuery库都被加载完毕后，可以在任何时候调用jQuery.noConflict()函数类将变量$的控制权移交给其他JavaScript库。
（2）jQuery库在其他库之前导入
如果jQuery库在其他库之前就导入了，那么可以直接使用“jQuery”来做一些jQuery的工作。同时，可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。
第2章 jQuery选择器
jQuery选择器的优势
- 简洁的写法
- 支持CSS1到CSS3选择器
- 完善的处理机制
使用jQuery获取网页中不存在的元素也不会报错，这能避免某些错误。
需要注意的是，例如，$(‘#tt’)获取的永远是对象，即使网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否处在时，不能使用以下代码：
if( $(‘#tt’) ) {
//do something
}
而应该根据获取到元素的长度来判断，代码如下：
if( $(‘#tt’).length > 0 ) {
//do something
}
或者转化成DOM对象来判断，代码如下：
if( $(‘#tt’)[0] ) {
//do something
}
jQuery选择器
jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。
- 基本选择器
基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。
- #id 根据给定的id匹配一个元素；
- .class 根据给定的类名匹配元素；
- element 根据给定的元素名称匹配元素；
- * 匹配所有元素；
- selector1,selector2,···,selectorN 将每一选择器匹配到的元素集合并后一起返回。
- 层级选择器
如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。
- ancestor descendant 选取ancestor元素里的所有descendant（后代）元素；
- parent > child 选取parent元素下child（子）元素；
- prev + next 选择紧接在prev元素后的next元素；
- prev ~ siblings 选取prev元素之后的所有siblings元素。
- 过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素。
（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，h2，h3等等；
- :animated 选取当前正在执行动画的所有元素；
- :focus 选取当前获取焦点的元素。
（2）内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本上。
- :contains(text) 选取含有文本内容“text”的元素；
- :empty 选取不包含子元素或者文本的空元素；
- :has(selector) 选取含有选择器所匹配的元素的元素；
- :parent 选取含有子元素或者文本的元素。
（3）可见性过滤选择器
- :hidden 选取所有不可见的元素；
- :visible 选取所有可见的元素。
在可见性选择器中，需要注意选择器:hidden，它不仅包括样式属性display为“none”的元素，也包括文本隐藏（<input> type=” hidden”/>和visibility:hidden之类的元素。
（4）属性过滤选择器
- [attribute] 选取拥有此属性的元素；
- [attribute=value] 选取属性的值为value的元素；
- [attribute!=value] 选取属性的值不等于value的元素；
- [attribute^=value] 选取属性的值以value开始的元素；
- [attribute$=value] 选取属性的值以value结束的元素；
- [attribute*=value] 选取属性的值含有value的元素；
- [attribute|=value] 选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-”）的元素；
- [attribute~=value] 选取属性用空格分隔的值中包含一个给定值的元素；
- [attrSel1][attrSel2][attrSelN] 用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围。
（5）子元素过滤选择器
- :nth-child(index/even/odd/equation) 选取每个父元素下的第index个元素或者奇偶元素（index从1开始）；
- :first-child 选取每个父元素的第1个子元素；
- :last-child 选取每个父元素的最后一个子元素；
- :only-child 如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中包含其他元素，则不会被匹配。
（6）表单对象属性过滤选择器
- :enabled 选取所有可用元素；
- :disabled 选取所有不可用元素；
- :checked 选取所有被选中的元素（单选框，复选框）；
- :selected 选取所有被选中的选项元素（下拉列表）。
- :input 选取所有的<input>、<textarea>、<select>和<button>元素；
- :text 选取所有的单行文本框；
- :password 选取所有的密码框；
- :radio 选取所有的单选框；
- :checkbox 选取所有的多选框；
- :submit 选取所有的提交按钮框；
- :image 选取所有的图像按钮；
- :reset 选取所有的重置按钮；
- :button 选取所有的按钮；
- :file 选取所有的上传域；
- :hidden 选取所有不可见元素。
- 表单选择器
选择器中的一些注意事项
- 选择器中含有“.”、“#”、“(”或“]”等特殊字符
根据W3C的标准，属性值中是不能含有这些特殊字符的，但在实际项目中偶尔会遇到表达式中含有“#”和“.”等特殊字符，如果按照普通的方式去处理就会出错。解决此类错误的方法是使用转义符转义。
- 选择器中的空格也是不容忽视的，多一个空格或少一个空格也许会得到截然不同的结果。
第3章 jQuery中的DOM操作
DOM操作的分类
一般来说，DOM操作分为3个方面，即DOM Core（核心）、HTML-DOM和CSS-DOM。
- DOM Core
DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。
JavaScript中的getElementById()、getElementsByTagName()、getAttribute()和setAttribute()等方法，这些都是DOM Core的组成部分。
- HTML-DOM
获取某些对象、属性既可以用DOM Core来实现，也可以使用HTML-DOM实现。相比较而言HTML-DOM的代码通常比较简短，不过它只能用来处理Web文档。
- CSS-DOM
CSS-DOM是针对CSS的操作。在JavaScript中，CSS-DOM技术主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。
jQuery中的DOM操作
- 查找节点
可以使用jQuery选择器在文档树上查找节点。
利用jQuery选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性的值。
- 创建节点
用jQuery来动态创建HTML元素是非常简单、方便和灵活的。例：
var $li_1 = $(“<li title=”香蕉”>香蕉</li>”);
注意：（1）动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中。
（2）当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。
例如创建一个<p>元素，可以用$(“<p/>”)或者$(“<p></p>”)，但不要使用$(“<p>”)或者大写的$(“<P/>”)。
- 插入节点
append() 向每个匹配的元素内部追加内容；
appendTo() 将所有匹配的元素追加到指定的元素中
实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中。
prepend() 向每个匹配的元素内部前置内容；
prependTo() 将所有匹配的元素前置到指定的元素中；
after() 在每个匹配的元素之后插入内容；
insertAfter() 将所有匹配的元素插入到指定元素的后面。
实际上，使用该方法是颠倒了常规的$(A). after (B)的操作，即不是将B插入到A后面，而是将A插入到B后面。
before() 在每个匹配的元素之前插入内容；
insertBefore() 将所有匹配的元素插入到指定的元素的前面。
- 删除节点
remove()方法
当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。
另外remove()方法也可以通过传递参数来选择性地删除元素。
detach()方法
detach()和remove()一样，也是从DOM中去掉所有匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
empty()方法
严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。
- 复制节点
可以使用clone()方法来复制节点。
复制节点后，被复制的新元素并不具有任何行为。如果在clone()方法中传递一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件。因此该元素的副本也同样具有复制功能。
- 替换节点
replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。
另一个方法是replaceAll()，该方法与replaceWith()方法的作用相同，只是颠倒了replaceWith()操作。
- 包裹节点
如果要将某个节点用其他标记包裹起来，可以使用wrap()。该方法对于需要在文档中插入额外的结构化标记非常有用，而且它不会破坏原始文档的语义。
wrap()方法是将所有的元素进行单独的包裹。
wrapAll()方法会将所有匹配的元素用一个元素来包裹。如果被包裹的多个元素之间有其他元素，其他元素会被放到包裹元素之后。
wrapInner()方法将每个元素的子内容（包括文本节点）用其他结构化的标记包裹起来。
- 属性操作
在jQuery中，用attr()方法来获取和设置元素的属性，removeAttr()方法来删除元素的属性。
- 样式操作
获取样式和设置样式
获取class和设置class都可以使用attr()方法来完成。使用attr()方法设置class，如果原本就存在了class，将会把原来的class替换为新的class。
追加样式
jQuery提供了专门的addClass()方法来追加样式。
移除样式
要删除class的某个值，可以使用removeClass()方法来完成，它的作用是从匹配的元素中删除全部或者指定的class。
删除多个class名，可以用空格隔开。
当它不带参数的时候，就会将class的值全部删除。
切换样式
toggle()方法主要是控制行为上的重复切换。如：
$toggleBtn.toggle (function() {
//显示元素
},function(){
//隐藏元素
})
另外jQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。例：
$(“p”). toggleClass(“another”);
判断是否含有某个样式
hasClass()可以用来判断元素中是否含有某个class。如果有，则返回true，否则返回false。
- 设置和获取HTML、文本和值
html()方法类似于JavaScript中的innerHTML属性，可以用来读取或者设置某个而元素中的HTML内容。
html()方法可以用于XHTML文档，但不能用于XML文档。
text()方法类似于JavaScript中的innerText属性，可以用来读取或者设置牧歌元素的文本内容。
val()方法类似于JavaScript中的value属性，可以用来设置和获取元素的值。
无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值。
如果元素为多选，则返回一个包含所欲选择的值的数组。
- 遍历节点
children()方法用于取得匹配元素的子元素集合。注意，该方法只考虑子元素而不考虑其他后代元素。
next()方法用于取得匹配元素后面紧邻的同辈元素；
prev()方法用于取得匹配元素前面紧邻的同辈元素；
siblings()方法用于取得匹配元素前后所有的同辈元素；
closest()方法用于取得最近的匹配元素。
首先检查当前元素是否匹配，如果匹配则直接返回元素本身。
如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。
如果什么都没找到则返回一个空的jQuery对象。
parent()方法用于获取集合中每个匹配的父级元素
parents()方法用于获取集合中每个匹配的祖先元素
closest()方法是从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。
- CSS-DOM操作
可以直接利用css()方法来获取元素的样式属性，而不管这些属性是外部CSS导入，还是直接拼接在HTML元素里（内联）的。
也可以直接利用css()方法来设置某个元素的单个样式或者多个样式属性。
注意：（1）如果值是数字，将会被自动转化为像素值。
（2）在css()方法中，如果属性值中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法。
如果带上了引号，既可以写成 ”fint-size”，也可以写成 ”fontSize”。
建议带上引号，养成良好的习惯。
在jQuery中还有另外一种方法也可以获取元素的高度，即height()。它的作用是取得匹配元素当前计算的高度值（px）。
height()方法也能用来设置元素的高度，如果传递的值是一个数字，则默认单位为px。如果要用其他单位（例如em），则必须传递一个字符串。
两者的区别：css()方法获取的高度值与样式的设置有关，可能会得到“auto”，也可能得到“10px”之类的字符串；而height()方法获取的高度值则是元素在页面中实际高度，与样式的设置无关，并且不带单位。
与height()方法对应的还有一个width()方法，它可以取得匹配元素的宽度值(px)。
此外，在CSS-DOM中，关于元素定位有以下几个经常使用的方法。
offset()方法的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。
position()方法的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，其中返回的对象也包括两个属性，即top和left。
scrollTop()方法和scrollLeft()方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。
另外，可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置。