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()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。 |
| 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() | 代码： |
| wrapAll() | 该方法会将所有匹配的元素用一个元素来包裹。它不同于wrap()方法，wrap()方法是将所有的元素进行单独的包裹。 |
| wrapInner() | 该方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。 |
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() | 获取元素的滚动条距左侧的距离。 |
扫一扫
101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
