jq: dom-删除、包裹

2024-08-20 16:48

文章标签 删除 dom 包裹 jq

本文主要是介绍jq: dom-删除、包裹，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

replaceAll() 使用元素把什么元素替换

        <!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>Page Title</title>
</head>
<body><ul><li class="one">one</li><li class="two">two</li></ul><li class="three">three</li><script src="../jquery-3.4.1.js"></script><script>$('.three').replaceAll($('.two'));</script>
</body>
</html>

replaceWith() 希望元素被什么元素替换

        $('.one').replaceWith($('.three'));

empty() 把元素的子元素都清空

        $('ul').empty();

        $('ul').html('');
$('ul').text('');

使用这两个方法也可以达到empty清空的方法。

删除方法: remove() 和 detach()

他们都是一模一样的删除方法，唯一的区别在于remove删除元素后，返回删除的元素不包含了事件函数；而detach删除之后返回的元素，还保留着事件函数。如:

        var one = $('.one').click(function() {$(this).remove();
});
var two = $('.two').click(function() {$(this).detach();
})$('.add').click(function() {
$('ul').append(function() {return one.add(two)})
})

clone 克隆元素

默认普通克隆，不会克隆事件函数

        var clone1 = $('.one').clone();  // 克隆元素后赋值
$('.clone').click(function() {   // 点击按钮添增
    $('ul').append(clone1);
})

如果传参true，那么也可以克隆事件函数

        var clone1 = $('.one').clone(true);

wrap() 在元素上包裹一层什么元素

如:

        $('li').wrap('<div></div>')

wrapAll() 把相同的元素合集包裹

先选中谁，就把其他的拿过来一起包裹。

        <ul><li class="one">one</li><li class="two">two</li>
</ul>
<li>我不在ul中</li>
<script src="../jquery-3.4.1.js"></script>
<script>$('li').wrapAll('<div></div>')
</script>