zepto中的DOM操作
程序员文章站
2022-03-02 20:35:26
...
插入操作：append/appendTo、prepend/prependTo、after/insertAfter、before/insertBefore
<body>
<div id="a">
<div class="a_one"></div>
</div>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script>
$(document).ready(function(){
var $cr = $("<div class='cr'>插入的div</div>");
//插入操作
$("#a").append($cr);//在id为a的div里面插入div标签
$cr.appendTo($('#a'));
$("#a").prepend($cr);//在id为a的div里面插入div标签,被插入的标签位于第一个
$cr.prependTo($('#a'));
$('#a').after($cr);//在id为a的div下面插入一个兄弟div
$cr.insertAfter($('#a'));
$('#a').before($cr);//在id为a的div前面插入一个兄弟div
$cr.insertBefore($('#a'));
})
</script>
</body>
删除操作：remove/empty
<body>
<ul>
<li>
<a href="#">删除</a>
</li>
</ul>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script>
$('ul li').remove(); // 会把li标签删除
$('ul li').empty(); // 只会把li里面的东西删除，即删除a标签
</script>
</body>
复制节点：clone
<body>
<ul>
<li>
<span>复制</span>
</li>
</ul>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script>
$('ul li').click(function(){
$(this).clone().appendTo($('ul'));
//会将li标签复制一份添加到ul里面，但是克隆的Li没有点击事件的效果
})
</script>
</body>
替换节点：replaceWith
<body>
<div>hello world</div>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script>
$('div').replaceWith("<span>我要替换他</sapn>");
//将div标签完全替换成了span标签
</script>
</body>
包裹节点： wrap wrapAll
<body>
<p>hello world</p>
<p>hello vue</p>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script>
$('p').wrap('<div></div>');
//两个p标签分别被两个div进行包裹
$('p').wrapAll('<div></div>');
//两个P标签被同一个div所包裹
</script>
</body>