节点的操作和数据库操作一样,无非是增、删、改、查。
今天总结删除节点、复制节点、替换节点、与包裹节点
删除节点:
如果文档中一个元素多余,那么就需要删除掉。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>
今天总结先进行到这里,有内容有错误或者有疑问,评论里提问。