jq: dom-删除、包裹

最新推荐文章于 2024-03-31 03:12:10 发布

星辰大海_enoch

最新推荐文章于 2024-03-31 03:12:10 发布

阅读量187

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u012872771/article/details/103666531

本文深入讲解了jQuery中元素操作的方法，包括替换、清空、删除、克隆、包裹等核心功能，通过具体示例展示了如何使用replaceAll、replaceWith、empty、remove、detach、clone、wrap、wrapAll、wrapInner及unwrap等API。

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

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>