jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作

jQuery创建元素节点或文本节点或属性节点、jQuery插入节点、jQuery删除节点、jQuery复制节点、jQuery替换节点、jQuery包裹节点、jQuery属性操作、jQuery样式操作、jQuery设置和获取HTML、文本和值、jQuery遍历节点

　　jQuery操作DOM的总结分享，个人学习笔记!分享的总结不一定很详细，不会每个方法的用法及详细描述及说明，只是一个概述!

　　说说我的个人想法：

　　很多时候，我们在开发JS特效的时候，脑子里没有想法，看到问题，第一想到的是思考怎么用那些常用的jQuery方法来解决问题，一些好用的方法及超简单的方法往往被忽略或者以前系统的学习过jQuery但一时忘记了!所以要牢牢知道jQuery到底有哪些方法，至于此方法怎么用我们可以不知道!大不了多花些时间百度下!多用几次就记住了!

　　注：从全局出发，吃透jQuery都能干什么，都有什么方法!至于方法怎么使用，我们可以查询!

　　1、创建元素节点或文本节点或属性节点

　　方法：$(html);

　　描述：创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

　　代码：$("ul").append($("<li title="属性节点" >文本节点</li>"));

　　2、插入节点

方法	描 述
append()	向每个匹配的元素内部追加内容。注：在内部元素的最后面追加
appendTo()	将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中。
prepend()	向每个匹配的元素内部前置内容。注：在内部元素的最前面追加
prependTo()	将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中。
after()	在每个匹配的元索之后插入内容。
insertAfler()	将所有匹配的元素插入到指定元素的后面。实际上，使用该方法是颠倒了常规的$(A).after(B)的操作，即不是将B插入到A后面，而是将A插入到B后面。
before()	在每个匹配的元素之前插入内容。
insertBefore()	将所有匹配的元素捅入到指定的元素的前面。实际上，使用该方法是颠倒了常规的$(A).before(B)的操作，即不是将B插入到A前面，而是将A插入到B前面。

　　3、删除节点

方法	描 述
remove()	当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。 演示下删除后如何取回： 代码： var $li = $("ul li:eq(0)").remove();//获取UL的第一个LI,并将其从网页中删除。 $li.appendTo("ul");//把刚删除的li重新添加到ul中。
detach()	detach()和remove()一样，也是从DOM中去掉所有匹配的元素。但需要注意的是，这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据都会保留下来。
empty()	严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。

　　4、复制节点

　　方法：clone()

　　语法格式：clone(true)

　　描述：其中参数设置为true就可以复制元素的所有事件的处理。

　　代码：

　　var kelong = $("ul").clone();//克隆好的对象

　　kelong.addClass("yangshi");//添加个css样式，还可以使用jQuery其他方法进一步操作,很方便

　　$("p").append(kelong);

　　5、替换节点

　　方法：replaceWith()和replaceAll()

　　描述：将所有选择的元素替换成指定的html和dom元素。其中参数被选择替换的内容。replaceWith() 与replaceAll() 方法都可以实现元素节点的替换，二者最大的区别在于替换字符的顺序。

　　$("p")replaceWith("元素")和$("元素").replaceAll("p")只是顺序相反，效果是一样的。

　　注：一旦完成替换，被替换元素中的全部事件都将消失，需要在新元素上重新绑定事件。

　　6、包裹节点

方法	描 述
wrap()	代码： $("#li_one").wrap("<strong></strong>"); 效果： <strong>     <li id="li_one" title="jQuery DOM 包裹节点">包裹节点</li> </strong>
wrapAll()	该方法会将所有匹配的元素用一个元素来包裹。它不同于wrap()方法，wrap()方法是将所有的元素进行单独的包裹。 代码： $(".li_two").wrapAll("<strong></strong>"); 效果： <strong>     <li class="li_two" title="包裹节点">包裹节点</li>     <li class="li_two" title="jQuery DOM 包裹节点">jQuery DOM 包裹节点</li> </strong>
wrapInner()	该方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。 代码： $("#li_one").wrapInner("<strong></strong>"); 效果： <li id="li_one" title="jQuery DOM 包裹节点">     <strong>包裹节点</strong> </li>

　　7、属性操作

方法	描 述
attr()、prop()	设置或返回匹配元素的属性和值。
removeAttr()、removeProp()	从所有匹配的元素中移除指定的属性。

　　8、样式操作

方法	描 述
attr()	获取样式和设置样式。$("img").attr("width","180");
addClass()	追加样式，向匹配的元素添加指定的类名。
removeClass()	移除样式，从所有匹配的元素中删除全部或者指定的类。$("div").addClass("yangshi")
toggleClass()	切换样式。
hasClass()	判断是否含有某个样式。

　　9、设置和获取HTML、文本和值

方法	描述
html()	返回或设置被选元素的内容。$("p").html("Hello <b>world</b>!");
text()	读取或者设置某个元素中的文本内容。
val()	设置和获取元素的值。

　　10、遍历节点

方法	描述
children()	获取匹配元素的子元素集合。
next()	获取匹配元素后面紧邻的同辈元素。
prev()	获取匹配元素前面紧邻的同辈元素。
siblings()	获取匹配元素前后所有的同辈元素。
closest()	获取最近的匹配元素,首先检查当前元素是否匹配，如果匹配则直接返回元素本身，如果不匹配则向上查找元素，逐级向上直到找到匹配选择器元素。
parent()	获取集合中每个匹配元素的父级元素。
parents()	获取集合中每个匹配元素的祖先元素。
其他	find()filter()nextAll()prevAll()

　　11、CSS-DOM操作

方法	描述
css()	获取和设置style对象的各种属性。$("p").css("color","red");$("p").css({"color":"red","font-size":"30px"});
height()	获取和设置元素高度。
width()	获取和设置元素宽度。
offset()	获取元素在当前视窗的相对偏移，返回的对象包括两个属性，即top和left。
position()	获取元素相对于最近的一个(position样式属性设置为relative或者absolute的)祖父节点的相对偏移，返回的对象包括两个属性，即top和left。
scrollTop()	获取元素的滚动条距顶端的距离。
scrollLef()	获取元素的滚动条距左侧的距离。