jQuery中的DOM操作(三)

最新推荐文章于 2025-12-25 09:07:35 发布

转载最新推荐文章于 2025-12-25 09:07:35 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/nzcblogs/p/11266846.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何使用jQuery进行节点的查找、创建、插入和删除操作。包括如何通过选择器查找节点，创建HTML文本字符串节点，以及如何将节点作为孩子、兄弟元素插入到目标位置，最后还介绍了不同方式的节点删除方法。

一、查找节点【返回jQuery对象】
$(选择器字符串);
使用jQuery函数，里面参数为选择器字符串，查询符合条件的BOM对象并返回jQuery对象
eg：

    $('div.one span:first');    //查询所有类名为one的div里面的所有后代span里面的第一个span元素

二、创建节点
$(HTML文本字符串);
使用jQuery函数，里面参数为要创建的节点字符串，返回jQuery对象
eg:

    var $newNode = $("<span>hello<span>");    //创建一个span节点，里面内容为hello

三、插入节点
对于下面这些方法的一些相关说明：
a、参数：一个或多个DOM 元素，DOM元素数组，HTML字符串，或者jQuery对象
b、如果将页面上的元素插入到某元素内，则该插入的元素会从页面上移动过去，原来页面上的元素则会不存在【同一元素节点在页面上是唯一的】

1、插入节点作为最后孩子
append() 【在自身内部插入其它节点作为最后孩子】
向调用该函数的jQuery对象中所有DOM节点内容最后面插入该节点，即将该节点作为他们的最后孩子插入
eg：

    var $node = $("<span>hello</span>");
    $('div').append($node);        //将$node插入到所选取的div内容最后，作为div的最后一个孩子

appendTo() 【将自身插入到其它节点内容中作为最后孩子】
调用方法者与需要插入的节点和append()恰好相反
eg：

    $("<span>hello</span>").appendTo($('div'));    //将span节点插入到所有匹配的div中并作为div的最后孩子

2、插入节点作为开始孩子
prepend() 【在自身内部插入其它节点作为开始孩子】
向调用该函数的jQuery对象中所有DOM节点内容最前面插入该节点，即将该节点作为他们的最开始的孩子插入
eg：

    $('div').appendTo($("<span>hello</span>"));    //将span节点插入到所有匹配的div中并作为div的开始孩子

prependTo() 【将自身插入到其它节点内容中作为开始孩子】
调用方法者与需要插入的节点和prependTo()恰好相反
eg:

    $("<span>hello</span>").prependTo($('div'));    //将span节点插入到所有匹配的div中并作为div的开始孩子

3、插入节点作为兄弟元素
after()   【将节点插入到自身后面作为自己后面的兄弟元素】
在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点插在每个匹配元素的后面。

insertAfter()   【将自身插入到节点后面作为节点后面的兄弟元素】
调用方法者与需要插入的节点和after()恰好相反

before()   【将节点插入到自身前面作为自己前面的兄弟元素】
在匹配元素的前面插入内容（外部插入）作为其兄弟节点插在集合中每个匹配元   素前面。

insertBefore() 【将自身插入到节点前面作为节点前面的兄弟元素】
调用方法者与需要插入的节点和before()恰好相反

四、删除节点
remove([selector]) 【返回被删除的节点对象】
删除指定元素并删除其绑定的事件及与该元素相关的jQuery数据(即其返回的删除节点对象中不包含有原来的事件及相关的jQuery数据)
eg：

    $('div').remove('.one');    //删除类名为one的div
    $('div.one').remove();    //删除类名为one的div

detach([selector]) 【返回被删除的节点对象】
删除指定元素但会保留其绑定的事件及与该元素相关的jQuery数据(即其返回的删除节点对象中包含有原来的事件及相关的jQuery数据)
eg：

    $('div:not(".one")').remove(':first');    //删除类名不为one的div中的第一个div
    $('div.one').remove();    //删除类名为one的div

empty() 【清空元素内容】
无参数，移除匹配元素的所有子节点
eg：

    $('div:contains("one")').empty();    //清空的div内容中包含文本one的div元素内容

转载于:https://www.cnblogs.com/nzcblogs/p/11266846.html