本文主要是介绍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>
wrapInner() 在元素的里层包裹
$('li').wrapInner('<a></a>')
unwrap() 解除元素的上层包裹(body不可以接触),不需要传参。
$('li').unwrap()
这篇关于jq: dom-删除、包裹的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!