jQuery DOM操作

1.添加子元素

  • append()/prepend()：给当前元素添加子元素，子元素可以是jq对象，也可以是Dom对象，还可以是html代码，功能类似原生js的appendChild()
//添加子元素到当前元素的末尾
<script>
    $(function(){
        var $box = $('.box')
        //将jquery对象添加到div中
        var $p = $('<p>我是添加的p标签</p>');//创建节点
        $box.append($p);//将p节点添加到box元素的末尾

        //将创建的dom元素添加到div中
        var dom_p = document.createElement('p')
        dom_p.innerHTML = '我是创建的dom元素'
        $box.append(dom_p)

        //直接将html代码字符串添加到div中
        $box.append('<p>html代码字符串</p>')
    })
</script>

2.添加兄弟元素

  • before()/after()：为当前元素添加兄弟元素，参数可以是jQuery创建的节点，也可以是js创建的dom元素，还可以是html代码
<script>
    $(function(){
        var $box = $('.box')
        //将jquery对象添加到div后
        var $p = $('<p>我是添加的p标签</p>');//创建节点
        $box.after($p);//将p节点添加到box元素的末尾

        //将创建的dom元素添加到div后
        var dom_p = document.createElement('p')
        dom_p.innerHTML = '我是创建的dom元素'
        $box.after(dom_p)

        //直接将html代码字符串添加到div后
        $box.after('<p>html代码字符串</p>')
    })
</script>

3.移动元素

  • appendTo()：将当前元素移动到其他元素中（变成其他元素的子元素）
var $p = $('<p>我是添加的p标签</p>');
$p.appendTo($('.box'));

4.清空元素内容

  • empty()：这个方法可以用清空元素的一切内容，包括子元素和相关事件
$('.box').empty()
  • 不推荐使用html()来清除内容，有可能造成内存泄漏

5.移除当前元素

  • remove()：将自身从文档中移除
$('.box').remove()

5.批量操作

  • 相关方法：add(element,context)，相关参数和jquery获取元素一致
  • 作用：当你要同时操作多个元素，但是这些元素有没有办法一次性获取的时候，就可以使用这个方法来添加新的元素到列队中
<body>
    <div id="box">我是div</div>
    <div class="parent">
        <span>我是div中的span</span>
    </div>
    <span>我是外面的span</span>
    <p>我是p</p>
</body>
<script>
    $(function(){
        $("div").add("span",".parent").add("p").css("color","red")
    })
</script>

//等价于
$("div").css("color","red")
$(".parent span").css("color","red")
$("p").css("color","red")

5.克隆节点

  • 相关方法：clone()，参数为布尔值，默认false
  • false：默认，会克隆元素的本身和他的子节点，不包括js或者jquery代码添加的事件
  • true：深克隆，除了克隆元素的本身和他的子节点，还包括js或者jquery代码添加的事件
//基本用法
var $c = $('.box>p').clone();//克隆box下所有的p标签
$('.box').after($c);//将克隆的元素插入到box的后面
  • 通过js或者jquery代码添加的事件监听只有true才会被复制
<div class="box">
    <p>不关我的事</p>
    <p id="p2">我是被复制的p元素</p>
    <p>it has nothing to do with me</p>
</div>

$(function() {
    $('#btn').click(function() {
        $('#pp').click(sayHello);
        var $c1 = $('#p2').clone(true);//点击会触发sayHello()
        var $c2 = $('#p2').clone(false);//点击无法触发sayHello()
        $c1.appendTo($('.box'));
        $c2.appendTo($('.box'));
    })
}) 
function sayHello() {
    alert('hello');
}
  • 与原生cloneNode(布尔值)的方法对比
    false：默认，只复制元素本身，而不包含子元素
    true：深复制，包括元素本身和他的后代元素
posted @   ---空白---  阅读(513)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
点击右上角即可分享
微信分享提示