jquery中DOM节点操作(二)

三、删除节点

jquery中DOM节点操作(二)_第1张图片

这里我们先写一个简单的布局

1.remove():删除所有匹配的元素

jquery中DOM节点操作(二)_第2张图片

当某个节点用remove()删除后,该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。

empty():清空所有元素

jquery中DOM节点操作(二)_第3张图片

empty()并不是删除节点,而是清空节点,它能清空元素中的所有后代节点。

detach():删除所有匹配的元素

jquery中DOM节点操作(二)_第4张图片

detach与remove方法一样,删除后的元素仍然可以使用,除此之外还会保留所有绑定的事件、附加的数据

jquery中DOM节点操作(二)_第5张图片

删除之后下标为1的li点击后字体仍然为红色。

四、替换节点

repalcewith():将所有匹配的元素用指定的HTML或者是DOM元素进行替换

repalceAll():用指定的HTML或者是DOM元素对所有匹配的元素进行替换.该方法与replaceWith()的作用相同,只不过是颠倒了replaceWith()的操作

jquery中DOM节点操作(二)_第6张图片

点击替换节点按钮,用新创建的li替换第一个li。

jquery中DOM节点操作(二)_第7张图片

五、克隆节点

clone():复制节点元素

jquery中DOM节点操作(二)_第8张图片

克隆第一个li,并追加的ul后面

jquery中DOM节点操作(二)_第9张图片

六、包裹节点

wrap():将某一个元素用其他的元素给包裹起来

wrapAll():将所有匹配的元素用一个元素来包裹

wrapInner():将每一个元素的子内容(包括文本节点),用其他元素包裹起来

unwrap():移除被选元素的父元素

jquery中DOM节点操作(二)_第10张图片

将p标签用背景颜色为红色(background-color: red;)的div包裹起来、

jquery中DOM节点操作(二)_第11张图片

jquery中DOM节点操作(二)_第12张图片

你可能感兴趣的:(jquery中DOM节点操作(二))