jQuery操作DOM节点

最新推荐文章于 2024-04-11 08:10:37 发布

abcdhulei

最新推荐文章于 2024-04-11 08:10:37 发布

阅读量398

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/abcdhulei/article/details/93524292

这篇博客详细介绍了jQuery操作DOM节点的各种方法，包括如何创建、追加、删除、替换和复制节点。讲解了append、prepend、after、before、remove、empty、replaceWith、replaceAll以及clone等函数的使用，帮助理解jQuery对DOM的操作技巧。

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

创建节点

dom 节点创建的过程（创建节点<元素、属性、文本等>、添加节点的属性、加入到文档中）

jQuery创建节点的方法：

创建元素节点:

$("<div></div>")；

创建文本节点：

$("<div>直接将文本的内容添加进去</div>")；

创建节点并给节点添加属性：

var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")

节点创建完成。需要将节点添加到文档中，添加新内容的时候需要用到接下来的：

追加节点


append	向每个匹配的元素（内部）的后面追加内容
appendTo	把所有匹配的元素追加到另一个，指定的元素后面中
prepend	在被选元素的开头（在内部）插入指定内容
prependTo	把所有匹配的元素前置到另一个指定的元素集合中
after	在被选元素的后面（在外部）插入指定的内容
insertAfter	在目标元素前面插入集合中每个匹配的元素
before	在被选元素的前面（在内部）插入指定内容
insertBefore	在目标元素后面插入集合中每个匹配的元素

append()与appendTo()：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../6月24/js/jquery-1.12.4.js"></script>
</head>
<style>
ul{
    list-style:none;
}
</style>
<script>
$(function () {
    $("#btn").click(function () {
        var node=$("<li>橙子</li>");
        // node.appendTo($(".uu"));
        $(".uu").append(node);
    })
})
</script>

<body>
<ul class="uu">
    <li>苹果</li>
</ul>
<input type="button" value="节点" id="btn">


</body>


</html>

append（）前面是被插入的对象，后面是要在对象内插入的元素内容
appendTo（）前面是要插入的元素内容，而后面是被插入的对象

prepend() 与 prependTo()方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../6月24/js/jquery-1.12.4.js"></script>
</head>
<style>
ul{
    list-style:none;
}
</style>
<script>
$(function () {
    $("#btn").click(function () {
        var node=$("<li>橙子</li>");
        // node.prependTo($(".uu"));
        $(".uu").prepend(node);
    })
})
</script>

<body>
<ul class="uu">
    <li>苹果</li>
</ul>
<input type="button" value="节点" id="btn">


</body>


</html>

prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prepend() 方法能够使用函数来插入内容。

after与insertAfter方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../6月24/js/jquery-1.12.4.js"></script>
</head>
<style>
ul{
    list-style:none;
}
</style>
<script>
$(function () {
    $("#btn").click(function () {
        var node=$("<li>橙子</li>");
        // node.insertAfter($(".uu"));
        $(".uu").after(node);
    })
})
</script>

<body>
<ul class="uu">
    <li>苹果</li>
</ul>
<input type="button" value="节点" id="btn">


</body>


</html>

after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。对于after()选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面

before()与insertBefore()方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../6月24/js/jquery-1.12.4.js"></script>
</head>
<style>
ul{
    list-style:none;
}
</style>
<script>
$(function () {
    $("#btn").click(function () {
        var node=$("<li>橙子</li>");
        // node.insertBefore($(".uu"));
        $(".uu").before(node);
    })
})
</script>

<body>
<ul class="uu">
    <li>苹果</li>
</ul>
<input type="button" value="节点" id="btn">


</body>


</html>

before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面

删除节点

remove	删除
empry	清空

remove() ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../6月24/js/jquery-1.12.4.js"></script>
</head>
<style>
ul{
    list-style:none;
}
</style>
<script>
$(function () {
    $("#btn").click(function () {
        // var node=$("<li>橙子</li>");
        // node.insertBefore($(".uu"));
        $(".uu li:eq(1)").remove()
    })
})

</script>

<body>
<p>你最喜欢的水果是？</p>
<ul class="uu">
    <li>苹果</li>
    <li>香蕉</li>
    <li>栗子</li>
</ul>
<input type="button" value="节点" id="btn">


</body>


</html>

empty() ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../6月24/js/jquery-1.12.4.js"></script>
</head>
<style>
ul{
    list-style:none;
}
</style>
<script>
$(function () {
    $("#btn").click(function () {
        // var node=$("<li>橙子</li>");
        // node.insertBefore($(".uu"));
        $(".uu li:eq(1)").empty()
    })
})

</script>

<body>
<p>你最喜欢的水果是？</p>
<ul class="uu">
    <li>苹果</li>
    <li>香蕉</li>
    <li>栗子</li>
</ul>
<input type="button" value="节点" id="btn">


</body>


</html>

remove()与empty()方法的区别：
remove()方法删除会把标签也一起删除而 empty()方法只会把标签里面的内容清空标签还在

替换节点

replaceWith	用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
replaceAll	用集合的匹配元素替换每个目标元素

replaceWith() ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../6月24/js/jquery-1.12.4.js"></script>
</head>
<style>
ul{
    list-style:none;
}
    .one{
        color: red;
    }
</style>
<script>
$(function () {
    $("#btn").click(function () {
        // var node=$("<li>橙子</li>");
        // node.insertBefore($(".uu"));
        $(".uu li:eq(1)").replaceWith("<li class='one'>菠萝</li>")
    })
})

</script>

<body>
<p>你最喜欢的水果是？</p>
<ul class="uu">
    <li>苹果</li>
    <li>香蕉</li>
    <li>栗子</li>
</ul>
<input type="button" value="节点" id="btn">


</body>


</html>

replaceAll () ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../6月24/js/jquery-1.12.4.js"></script>
</head>
<style>
ul{
    list-style:none;
}
    .one{
        color: red;
    }
</style>
<script>
$(function () {
    $("#btn").click(function () {
        // var node=$("<li>橙子</li>");
        // node.insertBefore($(".uu"));
        $("<li class='one'>菠萝</li>").replaceAll(".uu li:eq(1)")
    })
})

</script>

<body>
<p>你最喜欢的水果是？</p>
<ul class="uu">
    <li>苹果</li>
    <li>香蕉</li>
    <li>栗子</li>
</ul>
<input type="button" value="节点" id="btn">


</body>


</html>

replaceAll()和.replaceWith()功能类似，主要是目标与内容替换的位置区别

复制节点

clone(参数)	克隆匹配的DOM元素并且选中克隆的副本

clone(参数) ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../6月24/js/jquery-1.12.4.js"></script>
</head>
<style>
ul{
    list-style:none;
    cursor: pointer;
}
</style>
<script>
$(function () {
    $(".uu li").click(function () {
        $(this).clone(true).appendTo("ul")
    })
})

</script>

<body>
<p>你最喜欢的水果是？</p>
<ul class="uu">
    <li>苹果</li>
    <li>香蕉</li>
    <li>栗子</li>
</ul>



</body>


</html>

clone() 方法是复制一个元素，不包含其所有事件
clone(true) 方法是复制一个元素及其所有事件，