jQuery 元素节点操作及遍历元素

最新推荐文章于 2025-06-27 10:44:03 发布

易安sparkle

最新推荐文章于 2025-06-27 10:44:03 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/weixin_43675447/article/details/87908360

jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文深入讲解了使用jQuery进行节点操作的方法，包括创建、插入、复制、替换、包裹节点及遍历元素等核心功能，提供了丰富的代码示例，帮助读者掌握jQuery的DOM操作技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、创建节点
$ ()用于动态创建页面元素
语法格式：$(html);
其中，html表示用于动态创建DOM元素的HTML标记字符串，即如果要在页面中动态创建一个div标记，可加入如下代码：

var str=$("<div title='jQuery理念'>Write Less Do More</div>");
/*创建完成的对象，追加给父级元素*/
$("body").append(str);

执行上述代码后，将在页面文档body中创建一个div标记，其内容为“Write Less Do More”，属性title的值为“jQuery理念”。

二、插入节点
以下例子中需要用到的：

<div class="block">
        <p>1</p>
</div>
<div class="block">
    <p>2</p>
</div>
<div class="block">
    <p>3</p>
</div>
<button id="btn">按钮</button>
<div class="info"></div>

1.内部插入节点
在这里插入图片描述
（1）append()
注：

把append()方法后部分的内容插入到前部分的内容中；
追加到当前元素的内容之后

var str = $("<span></span>");
$(".block").append(str);

（2）appendTo()
注：

把appendTo()方法前部分的内容插入其后部分的内容中；
追加到当前元素的内容之后

var str = $("<span></span>");
str.appendTo($(".block"));

（3）prepend()
注：

把prepend()方法后部分的内容插入其前部分的内容中；
追加到当前元素的内容之前

var str = $("<span></span>");
 $(".block").prepend(str);

（4）prependTo()
注：

把appendTo()方法前部分的内容插入其后部分的内容中；
追加到当前元素的内容之前

var str = $("<span></span>");
str.prependTo($(".block"));

（5）append(function(index,html))
index：可选，接收选择器的索引位置；
html：可选，接收选择器的当前HTML内容，字符串类型
例：将div里面的p标签用span包起来

$(".block").append(function (index, html) {
        /* $(".block").eq(index)  相当于当前对象；等同于$(this)，但此时为集合型*/
        console.log($(this));  //输出为div的集合对象
        console.log($(this).html());  //输出为p标签
        //创建dom对象
        var st = html;  //获取html内容
        $(this).html("");  //将获取到的内容清空
        var s = $("<span>" + st + "</span>");  //获取span里包个p
        return s;
    });

注：当前对象追加，但与上面不同的是可追加索引值
2.外部插入节点
在这里插入图片描述
（1）before()
注：把before()方法后部分的内容插入其前部分的内容之前

 var msg=$("<p>lalala</p>");
     $("#btn").before(msg);

（2）after()
注：把after()方法后部分的内容插入其前部分的内容之后

 var msg=$("<p>lalala</p>");
     $("#btn").after(msg);

（3）insertBefore()
注：把insertBefore()方法前部分的内容插入其后部分的内容之前

var msg = $("<p>lalala</p>");
    msg.insertBefore($("#btn"));

（4）insertAfter()
注：把insertAfter()方法前部分的内容插入其后部分的内容之后

var msg = $("<p>lalala</p>");
    msg.insertAfter($("#btn"));

（5）before(function(index,html))
index：可选，接收选择器的索引位置；
html：可选，接收选择器的当前HTML内容，字符串类型

三、复制节点
语法格式：clone();
功能：复制匹配的DOM元素并且选中复制成功的元素，但该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。
注：clone(true)：复制时将元素的全部行为也进行复制
例：给body后复制一个button，并进行深度复制（元素的行为）

<button id="btn">按钮</button>

$("#btn").click(function () {
        console.log("1");
    });
    var clonebtn = $("#btn").clone(true);
    $("body").append(clonebtn);

四、替换节点
1.replaceWith()
语法格式：replaceWith(content);
功能：将所有选择的元素替换成指定的HTML或DOM元素，其中参数content为被所选择元素替换的内容。
2.replaceAll()
语法格式：replaceAll(selector);
功能：将所有选择的元素替换成指定selector的元素，其中参数selector为被需要被替换的元素。

例：点击按钮，修改内容
CSS样式：

.block {
            width: 720px;
            border: 1px solid silver;
            margin: 0 auto;
        }
        .list {
            border-bottom: 1px dashed silver;
            line-height: 40px;
            overflow: hidden;
        }
        .list > span {
            display: block;
            float: left;
            width: 120px;
            text-align: center;
        }
        .ipt {
            float: left;
            margin: 10px 0;
            width: 120px;
            text-align: center;
            outline: none;
            box-sizing: border-box;
        }
        button {
            width: 120px;
            border-style: none;
            outline: none;
            color: blue;
            background-color: transparent;
        }

内容：

<div class="block">
    <div class="list">
        <span>张三</span>
        <span>20</span>
        <span>男</span>
        <span>110</span>
        <span>西安</span>
        <button>修改</button>
    </div>
    <div class="list">
        <span>张三</span>
        <span>20</span>
        <span>男</span>
        <span>110</span>
        <span>西安</span>
        <button>修改</button>
    </div>
    <div class="list">
        <span>张三</span>
        <span>20</span>
        <span>男</span>
        <span>110</span>
        <span>西安</span>
        <button>修改</button>
    </div>
    <div class="list">
        <span>张三</span>
        <span>20</span>
        <span>男</span>
        <span>110</span>
        <span>西安</span>
        <button>修改</button>
    </div>
    <div class="list">
        <span>张三</span>
        <span>20</span>
        <span>男</span>
        <span>110</span>
        <span>西安</span>
        <button>修改</button>
    </div>
    <div class="list">
        <span>张三</span>
        <span>20</span>
        <span>男</span>
        <span>110</span>
        <span>西安</span>
        <button>修改</button>
    </div>
    <div class="list">
        <span>张三</span>
        <span>20</span>
        <span>男</span>
        <span>110</span>
        <span>西安</span>
        <button>修改</button>
    </div>
    <div class="list">
        <span>张三</span>
        <span>20</span>
        <span>男</span>
        <span>110</span>
        <span>西安</span>
        <button>修改</button>
    </div>
    <div class="list">
        <span>张三</span>
        <span>20</span>
        <span>男</span>
        <span>110</span>
        <span>西安</span>
        <button>修改</button>
    </div>
</div>

jQuery代码：

$("button").each(function (index) {
        $(this).prop("data-user", true);  //给按钮自定义一个属性
        $(this).click(function () {
            if ($(this).prop("data-user")) {
                $(this).html("确定");
                /*根据索引对索引的原则，去寻找按钮所对应那行的span，并且遍历每个span，将span替换为input文本框，修改文本框的内容*/
                $(".list").eq(index)
                        .find("span")
                        .each(function () {
                            var ipt = $("<input class='ipt' value='" + $(this).html() + "'>");
                            $(this).replaceWith(ipt);
                        });
                $(this).prop("data-user", false);
            }
            else {
                $(this).html("修改");
                $(".list").eq(index)
                        .find("input")
                        .each(function () {
                            var ipt = $("<span>" + $(this).val() + "</span>");
                            $(this).replaceWith(ipt);
                        });
                $(this).prop("data-user", true);
            }

        });
    });

五、包裹节点
在这里插入图片描述

<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>

（1）wrap()
用元素（对象或字符串）包裹被选择元素，包的是一个元素
例1：给每个button外包一个span

var s=$("<span></span>");
$(".btn").wrap(s);

（2）wrapAll()
用元素（对象或字符串）包裹被选择元素，包的是一个元素或者多个元素
例2：给全部button外包一个span

var s=$("<span></span>");
$(".btn").wrapAll(s);

（3）unwrap()
移除被包裹元素的父级元素或者包裹标记
例3：移除如上例1和例2中报包的span

var s=$("<span></span>");
$(".btn").unwrap(s);

（4）wrapInner()
用包裹元素包裹被选择元素的子元素
例4：把button里的子元素，即“按钮”这个文本用span包起来

var s=$("<span></span>");
$(".btn").wrapInner(s);

六、遍历元素
each()
语法格式：each(callback);
注：

callback是一个function函数，该函数可接受一个形参index，此形参为遍历元素的序号（从0开始）；若需访问元素中的属性，可借助index，配合this关键字来实现元素属性的设置或获取；
return false 提前终止遍历
例：遍历的应用

<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>

$(".btn").each(function (index) {
        $(this).click(function () {
            console.log(index);
            if (index == 1) {
                return false;
            }
            console.log("hello");
        });
    });