zeptoch节点操作
程序员文章站
2022-05-03 16:00:16
...
插入节点
结果
引入zepto
<script src="https://cdn.bootcss.com/zepto/1.1.7/zepto.min.js"></script>
html
<body>
<div id="dv" style="color: red">
<p>我是p</p>
</div>
</body>
script
<script>
$('#dv').append($('<div>append</div>'));
// $('<div>appendTo</div>').appendTo($('#dv'));
$('#dv').prepend($('<div>prepend</div>'));
// $('<div>prependTo</div>').prependTo($('#dv'));
$('#dv').after($('<div>after</div>'));
// $('<div>insertAfter</div>').insertAfter($('#dv'));
$('#dv').before($('<div>before</div>'));
// $('<div>insertBefore</div>').insertBefore($('#dv'));
</script>
删除节点
$el.remove()
dom结构：
<li>我是li<a href="###">我是a</a></li>
操作
$('li').remove();
结果
li整个节点被删除
$el.empty()
dom结构：
<li>我是li<a href="###">我是a</a></li>
操作
$('li').empty();
结果
<li></li>
复制节点
$el.clone()
注意：无法复制元素上的事件，复制之后如果需要添加到dom中需要调用插入节点的方法；
替换节点
$el.replaceWidth()
包裹节点
<ul>
<li></li>
<li></li>
</ul>
$el.wrap()
//wrap
<ul>
<div>wrap<li></li></div>
<div>wrap<li></li></div>
</ul>
$el.wrapAll()
<ul>
<div>wrapAll
<li></li>
<li></li>
</div>
</ul>
获取节点
next()紧邻的prev()紧邻的sblings前后所有的parent()父节点parents()直系亲属