zeptoch节点操作

插入节点

结果
zeptoch节点操作_第1张图片
引入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($('
append
'
)); // $('
appendTo
').appendTo($('#dv'));
$('#dv').prepend($('
prepend
'
)); // $('
prependTo
').prependTo($('#dv'));
$('#dv').after($('
after
'
)); // $('
insertAfter
').insertAfter($('#dv'));
$('#dv').before($('
before
'
)); // $('
insertBefore
').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()

包裹节点

$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()直系亲属

你可能感兴趣的:(zepto)