您的位置：首页 > Web前端 > JQuery

jQuery知识点总结（第五天）

2015-07-22 23:05 671 查看

节点的操作和数据库操作一样，无非是增、删、改、查。

今天总结删除节点、复制节点、替换节点、与包裹节点

[b]删除节点：[/b]

如果文档中一个元素多余，那么就需要删除掉。jQuery提供了三种删除节点的方法。分别是remove() 、 detach() 、 empty()；

　　 remove：

<body>
<ul class="bigul">
<li class="smchild">我这么可爱你不要我了。</li>
<li class="smchild">我的爸爸ul最宠爱我</li>
</ul>
<script>
$(".bigul :first-child").remove();
</script>
</body>

detach:

<body>
<ul class="bigul">
<li class="smchild">我这么可爱你不要我了。</li>
<li class="smchild">我的爸爸ul最宠爱我</li>
</ul>
<script>
$(".bigul :first-child").detach();
</script>
</body>

empty:

<body>
<ul class="bigul">
<li class="smchild">我这么可爱你不要我了。</li>
<li class="smchild">我的爸爸ul最宠爱我</li>
</ul>
<script>
$(".bigul :first-child").empty();
</script>
</body>

这里必须注意的是，empty()并不是删除节点，只是清除节点中的内容。下面是empty()执行后的页面效果。

remove() 、 detach() 、 empty() 辨析：

　

remove() 和 detach()的共同点都是可以删除节点。更更严谨更科学的说法就是【剪切】，并没有真正的删除掉元素，这些元素还可以重新插入到其他的地方。不同点在于，remove() 【剪切】节点后，该节点上绑定的事件同时也被销毁，但是detach() 所【剪切】的节点上所绑定的事件都能够保留。

empty() 并不是删除，只清楚元素的内容。相当于把contains中内容替换成了null。

删除节点之后，可以使用appendTo()插入到DOM树中。

$(".bigul :first-child").remove().appendTo('你的元素内');

当然如果你是要剪切元素。可以直接使用appendTo:

$(".bigul :first-child").appendTo('你的元素内');

上下这两种写法最终的效果都是一样的。

复制节点（克隆节点）：

看到克隆，就想起了那只多莉小绵羊，clone这个单词也是克隆的音译，比较好记忆。

clone()的用法比较简单，但是作用很大。

clone(boolean)

clone的boolean默认是false。克隆节点的时候，该元素的所绑定的事件对象将不克隆，只克隆节点本身。

clone的boolean可以设置为true，克隆的时候，该元素所绑定的事件对象，将会被带到克隆的副本上去，同等具有原节点的功能。

替换节点：

替换节点用的也比较多。对于后台的数据处理特别有用，利用的好，可以实现一个页面增删改查无跳转，当然仅仅一个clone是不够的，需要后面的知识辅助，例如Ajax。

replaceWith 与 replaceAll

这两者作用是一样的，还是为了方便jQuery的链式操作。

$('A').replaceWith('B') 把A替换成B；

$('A').replaceAll('B') 把B替换成A；

　　包裹节点：

包裹节点，简称为【穿内衣】、【穿外套】、【穿大衣】

穿内衣：wrapInner

执行代码之前的html结构：

<body>
<ul class="bigul">
<li class="smchild">我是一个小美女</li>
<li class="smchild">我是一个小美女</li>
<li class="smchild">我是一个小美女</li>
</ul>
<script>
$(".smchild").wrapInner("<b>对呀！</b>");
</script>
</body>

执行wrapInner()代码之后html结构：

<body>
<ul class="bigul">
<li class="smchild"><b>对呀！我是一个小美女</b></li>
<li class="smchild"><b>对呀！我是一个小美女</b></li>
<li class="smchild"><b>对呀！我是一个小美女</b></li>
</ul>
<script>
$(".smchild").wrapInner("<b>对呀！</b>");
</script>
</body>

　　穿外套：

执行wrap代码后的html结构：

<body>
<ul class="bigul">
<b>对呀！<li class="smchild">我是一个小美女</li></b>
<b>对呀！<li class="smchild">我是一个小美女</li></b>
<b>对呀！<li class="smchild">我是一个小美女</li></b>
</ul>
<script>
$(".smchild").wrap("<b>对呀！</b>");
</script>

</body>

　　

　　穿大衣：

　　执行wrapAll后的html结构：

<body>
<ul class="bigul">
<b>对呀！
<li class="smchild">我是一个小美女</li>
<li class="smchild">我是一个小美女</li>
<li class="smchild">我是一个小美女</li>
</b>
</ul>
<script>
$(".smchild").wrapAll("<b>对呀！</b>");
</script>
</body>

今天总结先进行到这里，有内容有错误或者有疑问，评论里提问。

　　

　

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航