标签：
jQuery有以下优势：
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()函数。
jQuery选择器的优势
使用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元素。
如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素。
（1）基本过滤选择器
（2）内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本上。
（3）可见性过滤选择器
在可见性选择器中，需要注意选择器:hidden，它不仅包括样式属性display为“none”的元素，也包括文本隐藏（<input> type=” hidden”/>和visibility:hidden之类的元素。
（4）属性过滤选择器
（5）子元素过滤选择器
（6）表单对象属性过滤选择器
选择器中的一些注意事项
根据W3C的标准，属性值中是不能含有这些特殊字符的，但在实际项目中偶尔会遇到表达式中含有“#”和“.”等特殊字符，如果按照普通的方式去处理就会出错。解决此类错误的方法是使用转义符转义。
DOM操作的分类
一般来说，DOM操作分为3个方面，即DOM Core（核心）、HTML-DOM和CSS-DOM。
DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。
JavaScript中的getElementById()、getElementsByTagName()、getAttribute()和setAttribute()等方法，这些都是DOM Core的组成部分。
获取某些对象、属性既可以用DOM Core来实现，也可以使用HTML-DOM实现。相比较而言HTML-DOM的代码通常比较简短，不过它只能用来处理Web文档。
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()方法类似于JavaScript中的innerHTML属性，可以用来读取或者设置某个而元素中的HTML内容。
html()方法可以用于XHTML文档，但不能用于XML文档。
text()方法类似于JavaScript中的innerText属性，可以用来读取或者设置牧歌元素的文本内容。
val()方法类似于JavaScript中的value属性，可以用来设置和获取元素的值。
无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值。
如果元素为多选，则返回一个包含所欲选择的值的数组。
children()方法用于取得匹配元素的子元素集合。注意，该方法只考虑子元素而不考虑其他后代元素。
next()方法用于取得匹配元素后面紧邻的同辈元素；
prev()方法用于取得匹配元素前面紧邻的同辈元素；
siblings()方法用于取得匹配元素前后所有的同辈元素；
closest()方法用于取得最近的匹配元素。
首先检查当前元素是否匹配，如果匹配则直接返回元素本身。
如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。
如果什么都没找到则返回一个空的jQuery对象。
parent()方法用于获取集合中每个匹配的父级元素
parents()方法用于获取集合中每个匹配的祖先元素
closest()方法是从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。
可以直接利用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()方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。
另外，可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置。
jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1
标签：
原文地址：http://www.cnblogs.com/ww03/p/5344683.html
