当前位置:首页 » jQuery » jQuery学习笔记之jQuery文档处理 » 正文


jQuery学习笔记之jQuery文档处理

发布日期:2015-05-04 08:17   来源:谭海波   本文永久链接
摘要:大家好,今天我就跟大家分享下jQuery的文档处理。大家还记得在JS的DOM中要如何添加节点吗?首先要创建节点,然后为节点赋予内容,然后在追加节点到某个节点,那是相当的繁琐,然而在jQuery中就是一行代码可以解决的事情。 jQuery的文档操作包括内部插入……

大家好,今天我就跟大家分享下jQuery的文档处理。大家还记得在JS的DOM中要如何添加节点吗?首先要创建节点,然后为节点赋予内容,然后在追加节点到某个节点,那是相当的繁琐,然而在jQuery中就是一行代码可以解决的事情。

jQuery的文档操作包括内部插入、外部插入、包裹、替换、删除和克隆。

jQuery的内容插入有四个方法,分别是:append()、appendTo()、prepend()和prependTo()。append()和prepend()分别是用于在匹配元素的前面和后面追加元素,appendTo()和prependTo()分别是用于将匹配元素的内容追加到指定的元素之中。

既然有了内部插入,肯定就有外部插入了。jQuery的外部插入提供了四个方法,分别是:after()、before()、insertAfter()和insertBefore()。其实它的原理和内部插入是一样的,不同的是一个是插入到元素内部前后,一个是插入到元素的外部前后。

jQuery提供了四个关于元素包裹的方法,分别是wrap()、unwrap、wrapAll()和wrapInner()。第一个是用于将匹配的每个元素都用一个元素包裹起来,第二个顾名思义就是移除包裹了,第三个是是用于将所有匹配的元素集中包裹在一个元素之中,最后一个是用于将匹配的元素添加一个HTML标签的包裹,比如HTML中的strong标签,em标签,i标签等等。

jQuery提供了两个关于内容替换的方法,分别是:replaceWith()和replaceAll()。

jQuery还提供了三个关于删除内容的方法,分别是:empty()、remove()和detach()。虽然基本用处都是删除,但还是有区别的,比如第一个只是清空元素的内容,但不会删除节点,比如我删除了一个段落中的文本内容,但是那个段落节点还在,只是没有文本内容。而关于detach()方法,jQuery官方给出了这样的解释:从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

最后一个:克隆方法(clone()),jQuery方法很类似于系统剪切板的功能,将匹配的元素复制起来,然后添加到指定的地方去,关于克隆的具体用法,大家可以参考谭海波博客版的jQuery Online。

好了,今天就跟大家分享到这里吧,下次就跟大家分享jQuery的事件操作。



关注谭海波博客官方微信公众平台
文章分类jQuery
文章标签:
本文永久链接:http://tanhaibo.net/2015/05/jquery-dom.html
转载提示:除非注明,谭海波博客的文章均为原创,转载请以链接形式注明作者和出处。谢谢合作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注