jquery dom操作方法,jquery中常见的操作dom节点的方法有哪些
本文总结和分享了用jQuery实现的一些DOM操作，包括节点创建、节点插入、节点删除、节点复制和替换、遍历和过滤等。希望对你有帮助！
第01回：节点创建
1、创建元素节点
有几种方法可以做到，后面会接触到。常见的是直接用HTML标签字符串描述这个节点的结构，用$()函数，$(html结构)[相关推荐：jQuery视频教程]
$(div/div)2、创建文本节点
类似于创建元素节点，可以直接把文本内容描述在一起。
$(div我是文本节点/div)3、创建属性节点
与创建元素节点的方式相同
$( div id= test class= box I a text node/div )
第02回：节点插入
1、.append() 、.appendTo() *
选择器append()向每个匹配的元素追加内容。appendTo()将所有匹配的元素追加到加到另一个$(A)中。在指定的元素集中追加(B );//将B添加到A中(作为A的最后一个子元素)
$(一)。附录(B)；//将A添加到B(作为B的最后一个子元素)2、.after()、.before() *
选择器after()指定元素before()之后添加的内容，指定元素$(A)之前添加的内容。(B)之后；//在a后面加B。
$(一)。(B)之前；//在a前面加B3、.prepend()、.prependTo() *。
Selector prepend()指定在元素前添加内容。prependTo()指定将一个元素添加到另一个元素$(A)的内部。前置(B)；//将B添加到A中(作为A的第一个子元素)
$(一)。在(B)之前；//将A添加到B(作为B的第一个子元素)4、.insertAfter()、.insertBefore()
选择器insertAfter()在指定元素insertBefore()之前插入内容。insert after(B)；//在b后面插入A。
$(一)。在(B)之前插入；//在B前面插入A
第03回：节点删除
1、.empty()
该方法主要用于清空指定元素的所有子节点，例如：
div class=box
p耀哥/p
/div如果我们通过empty方法移除div内部的所有元素，它只是清除了内部的html代码，但是标记仍然保留在DOM中。
//由空处理
$(.你好)。empty()；
//Result:div class= box /div2、.remove() *
移除元素本身，包括子节点和事件等信息。
//由移除处理
$(.BTN’)。移除()；//结果：节点不存在，事件同时销毁3、.detach()
如果我们想暂时删除页面上的节点，但又不希望节点上的数据和事件丢失，并且可以在下一个时间段在页面上显示被删除的节点，那么我们可以使用detach方法来处理。
脱离从字面上很好理解。让web元素成为宿主。也就是说，从当前页面中移除元素，但保留该元素的内存模型对象。
当然，需要注意的是，detach方法是JQuery特有的，所以它只能处理被JQuery的方法绑定的事件或数据。
var li=$(。列表李：等式(2)’)。detach()；
setTimeout(()={
$(.列表)。追加(李)；
}, 3000);
第04回：节点复制与替换
1、.clone()
克隆节点是dom的常见操作，jQuery提供了一个克隆方法，专门用来处理DOM的克隆。
clone()方法深度复制所有匹配的元素集，包括所有匹配的元素、匹配元素的从属元素和文本节点。
克隆方法很简单，就是克隆节点。但需要注意的是，如果一个节点有事件或数据等其他处理，我们需要通过clone(ture)传递一个布尔值ture来指定它。这不仅会克隆简单的节点结构，还会克隆附加的事件和数据。
$ (div )。on (click ，function(){//执行操作})
//克隆处理一
$(div )。clone() //只克隆结构，事件丢失。
//克隆处理2
$(div )。clone(true) //结构、事件和数据全部克隆2、.replaceWith()、.replaceAll() *
$(一)。replace with(B)；//用b代替A。
$(一)。replace all(B)；//将B替换为3、.wrap()
如果您想用其他元素包装一个元素，也就是说，向它添加一个父元素，JQuery为这种处理提供了一个包装方法。
费洛，世界！/p$(p )。wrap(div/div )
//结果是：
/*
差异
费洛，世界！/p
/div
*/4、.unwrap()
此方法与unwrap方法相反，后者删除匹配元素集的父元素，并将自身(及其兄弟元素，如果有的话)保留在其原始位置。
5、.wrapAll()
Wrap用于单个dom元素。如果要将集合中的元素与其他元素包装在一起，也就是说，向它们添加一个父元素。对于这样的处理，JQuery提供了一个wrapAll方法。例如，页面上有两个P元素。如果要为两个P元素添加一个公共父div，将通过以下代码实现：
$(p )。wrap all( div/div )；6、.wrapInner()
如果您希望将集合中元素内的所有子元素与其他元素包装在一起，并将其视为指定元素的子元素，JQuery提供了一个wrapInner方法来处理这一点。让我们看一个例子：
divHello，世界！/div
divHello，世界！/div$(div )。wrap inner( p/p )；
//结果是：
/*
差异
费洛，世界！/p
/div
差异
费洛，世界！/p
/div
*/
第05回：节点遍历
1、.children() *
JQuery是一个集合对象。如果希望快速找到集合中的第一级子元素，可以使用children()方法。这里应该注意的是。children(selector)方法返回匹配元素集中每个元素的所有子元素(只返回子元素，这里可以理解为父子关系)。
div class=div
儿子
李的孙子1/李
/ul
如果/div代码是$(。div’)。children()，表示只能找到ul，因为Div和ul是父子，李和Div是祖辈，所以找不到。
此方法可以接受用于筛选子元素的参数，如“$(”。父)。孩子(。active)，以匹配类名为active的那个。
2、.find() *
类似于find children，不同的是children是亲子关系搜索，find是后代关系搜索(包括亲子关系)。
div class=div
儿子
李的孙子1/李
/ul
如果/div代码是$(div )。find(li )，在这一点上，li和div是祖先，所以可以通过find方法快速找到。
3、.parent() *
如果想快速找到集合中每个元素的父元素(这里可以理解为父子关系)，此时可以使用parent()方法。因为它是父元素，所以该方法将只查找一个级别。
div class=div
儿子
李的孙子1/李
/ul
/div查找ul，$ (UL)的父元素div。Parent()，这是一个非常简单的表达式
4、.parents()
JQuery是一个集合对象。如果希望快速找到集合中每个元素的所有祖先元素，可以使用parents()方法。其实类似于find和children的区别。父母只会找一级，父母往上找祖先节点。
div class=div
儿子
李的孙子1/李
/ul
/div在li节点上查找祖先元素div。您可以使用$(li )。parents()方法。
5、.closest()
以所选元素为中心，可以通过find和children方法向内搜索。如果是查找，也就是查找当前元素的parent-grande元素，jQuery提供了最接近的()方法，与parents类似但略有区别，属于使用频率较高的方法。
closest()方法接受匹配元素的选择器字符串。从元素本身开始，在DOM树上一步一步匹配父元素，返回第一个匹配的祖先元素。比如在元素A中，查找所有的li元素，可以这样表示：$ (a )。闭(李)。
粗略地说，父母()和。closest()有些类似，都是向上遍历祖先元素，但还是有区别的，否则没有存在的意义。
不同的起始位置：最近的从当前元素开始。parents从父元素遍历的目标开始。找到指定目标的最近距离。父元素遍历文档的根元素，最接近的搜索直到找到匹配，然后停止搜索。父母总是找到根元素。和将匹配的元素添加到集合结果中是不同的：closest返回包含零个或一个元素的jquery对象，parents返回包含零个或一个或多个元素的jquery对象6、.next()、.nextAll() *。next():该方法用于匹配当前元素的下一个元素。nextAll():查找当前元素之后的所有对等元素。7、.prev()、.prevAll() *。prev():该方法用于匹配当前元素的前一个元素。prevAll():查找当前元素之前的所有对等元素8、.siblings() *。
此方法用于匹配当前元素的所有兄弟元素。
第 06 回：筛选
1、.eq(index) *
获取当前链操作中的第n个jQuery对象，返回jQuery对象。当参数大于或等于0时，它被肯定地选中。例如，0表示第一个，1表示第二个。当参数为负时，反向选择。比如-1是最后一个。有关详细信息，请参见以下示例。
2、.first()、.last() *。first():获取匹配元素集中的第一个元素。last():获取匹配元素集中的最后一个元素。3、.filter()
筛选出与指定表达式匹配的元素集。该方法用于缩小匹配范围。用逗号分隔多个表达式。
4、.is()
根据选择器、DOM元素或jQuery对象检测匹配的元素集，如果其中至少有一个符合这个给定的表达式，则返回true。如果没有匹配的元素，或者表达式无效，则返回“false”。
注意：所有表达式仅在jQuery 1.3中受支持。在以前的版本中，如果提供了复杂的表达式，比如层次选择器(例如~和)，它总是返回true。
5、.not()
从匹配元素集中删除与指定表达式匹配的元素。
6、.map(callback)
通过函数匹配当前集合中的每个元素，产生一个新的jQuery对象。
7、.has()
过滤匹配元素集中匹配选择器或DOM元素的后代。
(学习视频分享：web前端教程)以上是总结和分享jQuery实现的一些DOM操作(集合)的细节。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。