jQuery零基础学习笔记（五）一些文档处理的方法

1.append()和appendTo()

$("p").append("<b>123</b>");

是指将"<b>123</b>"追加到所有的<p>中。

$("p").appendTo("div");

是指将所有匹配到的<p>元素追加到<div>元素中。

2.prepend和prependTo()

与append()类似只是加到匹配元素的前端。

3.after()和before()

前者是追加到匹配元素的后面，即匹配元素外。后者是添加到匹配元素的前面。

4.insetAfter()和insertBefore()

将匹配的所有元素插入到另一个匹配元素的后面或前面，也属于外部插入。

$("p").insertAfter("div");

将所有的<p>都移到<div>的后面。

5.wrap()

将每一个匹配的元素用其他标签包裹起来。

wrap中传递的参数可以是

(1)自己写的标签

$("p").wrap("<div></div>");

(2)页面中的dom元素

$("p").wrap(document.getElementById("test"));

(3)function

6.unwrap()

移除所选元素的父元素。

7.wrapAll()

将所有匹配的元素用一个标签包含起来。

不同于wrap()将每个匹配的元素都包含。

8.wrapInner()

将每一个匹配元素的子元素用标签包含起来。

$("p").wrapInner("<b></b>");

将所有<p>下的内容都加粗。

9.replaceWith() 和replaceAll()

前者是将所有匹配的元素替换成指定的html或dom元素。

后者是用匹配的元素替换掉所有()内的元素。

$("p").replaceWith("<b>123</b>");

$("<b>123</b>").replaceAll("p");

二者功能相同。

10.empty()

将所有匹配元素的子元素全部删除。

11.remove()和detach()

前者将删除所有匹配的元素，但这些元素仍在jquery对象中。但除了这个元素本身在对象中外，其他的比如绑定事件都会被删除。

后者同前者唯一的不同是所有绑定的事件会被保留。

12.clone()

复制匹配的dom元素并且选中这些复制的副本。

当传入“true”这个参数后，会同时将这个元素所有的事件处理添加到副本中。

<button>clone!</button>

$("button").click(function(){
  $(this).clone(true).insertAfter(this);
});

此按钮可以复制自己，并且复制后的自己也有自己拥有的功能。