jQuery学习笔记：DOM操作（一）——文档

查找节点

可以使用jQuery选择器来完成节点的查找。

$("div > p");

创建节点

创建元素节点

直接利用jQuery的工厂函数$()。
根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。

$("<div><p>Hello</p></div>")

注意：
动态创建的新元素节点不会被自动添加到文档中，而是需要再使用其他方法将其插入文档中。
创建单个元素时，可以使用$("<p>")或$("<p></p>")

插入节点

动态创建HTML元素并没有实际用处，还需要将新创建的元素插入到文档中。
将新创建的节点茶如文档最简单的办法就是，让它成为这个文档的某个节点的子节点。

内部插入

append（）

向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行js的appendChild方法，将它们添加到文档中的情况类似。

<p>I would like to say: </p>

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

<p>I would like to say: <b>Hello</b></p>

appendTo（）

把所有匹配的元素追加到另一个指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

<p>I would like to say: </p>
<div></div><div></div>

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

<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

prepend（）

向每个匹配的元素内部前置内容。

这是向所有匹配元素内部的开始处插入内容的最佳方式，与使用js的insertBefore（）操作类似。

<p>I would like to say: </p>

$("p").prepend("<b>Hello</b>");

<p><b>Hello</b>I would like to say: </p>

prependTo（）

把所有匹配的元素前置到另一个、指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。

<p>I would like to say: </p><div id="foo"></div>

$("p").prependTo("#foo");

<div id="foo"><p>I would like to say: </p></div>

外部插入

after（）

在每个匹配的元素之后插入内容。

<b>Hello</b><p>I would like to say: </p>

$("p").after( $("b") );

<p>I would like to say: </p><b>Hello</b>

before（）

在每个匹配的元素之前插入内容。

<p>I would like to say: </p>

$("p").before("<b>Hello</b>");

 <b>Hello</b><p>I would like to say: </p> 

insertAfter（）

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。

<p>I would like to say: </p><div id="foo">Hello</div>

$("p").insertAfter("#foo");

<div id="foo">Hello</div><p>I would like to say: </p>

insertBefore（）

把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。

<div id="foo">Hello</div><p>I would like to say: </p>

$("p").insertBefore("#foo");

<p>I would like to say: </p><div id="foo">Hello</div>

---

注意，这些插入节点的方法不仅能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动。

删除节点

remove（）

从DOM中删除所有匹配的元素。该元素所包含的所有后代节点也将同时被删除。
返回一个指向已被删除的节点的引用。因而可以在将来再使用这些匹配的元素。
但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

<p class="hello">Hello</p> how are <p>you?</p>

$("p").remove(".hello");

how are <p>you?</p>

detach（）

和remove一样，也会从DOM中去掉所有匹配的元素。
但是与remove不同的是，所有绑定的事件、附加的数据等都会保留下来。

empty（）

严格来讲，empty（）方法并不是删除节点，而是清空节点，即清空元素中的所有后代节点，包括文本节点。

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

$("p").empty();

<p></p>

复制节点

可以用clone（）方法进行节点的复制。
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

<b>Hello</b><p>, how are you?</p>

$("b").clone().prependTo("p");

<b>Hello</b><p><b>Hello</b>, how are you?</p>

复制节点后，被复制的新元素并不具有任何行为。如果需要复制元素的同时复制元素中所绑定的事件，需要指定一个布尔参数：

• 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。默认值是：false

创建一个按钮，他可以复制自己，并且他的副本也有同样功能。

<button>Clone Me!</button>

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

替换节点

replaceWith（）

将所有匹配的元素替换成指定的HTML或DOM元素。

用第一段替换第三段，你可以发现他是移动到目标位置来替换，而不是复制一份来替换。

<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>

$('.third').replaceWith($('.first'));

<div class="container">
  <div class="inner second">And</div>
  <div class="inner first">Hello</div>
</div>

replaceAll（）

也可以使用replaceAll（），该方法与replaceWIth（）方法的作用相同，只不过颠倒了它的操作。

<p>Hello</p><p>cruel</p><p>World</p>

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

<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

注意，如果在替换之前已经为旧元素绑定了事件，替换后原先绑定的事件将会与被替换元素一起消失，需要在新元素上重新绑定事件。

包裹节点

如果要将某个节点用其他标记包裹起来，则可以采用下面的方法：

wrap（）

把所有匹配的元素用其他元素的结构化标记包裹起来。

这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。

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

<div class='wrap'><p>aaa</p></div>

wrapAll（）

将所有匹配的元素用单个元素包裹起来。它不同于wrap（）方法，wrap（）方法是将所有元素进行单独的包裹。

<strong>1</strong>
<strong>2</strong>

如果使用wrap（）方法的话：

$("strong").wrap("b");

<b><strong>1</strong></b>
<b><strong>2</strong></b>

可以看到每个元素外面都包裹了b元素。

但如果使用wrapAll（）方法：

$("strong").wrapAll("b");

<b>
    <strong>1</strong>
    <strong>2</strong>
</b>

wrapInner（）

将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。

<strong>1</strong>

$("strong").wrapInner("b");

<strong><b>1</b></strong>

unwrap（）

这个方法将移除元素的父元素。这能快速取消 .wrap()方法的效果。

<div>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
</div>

 $("p").unwrap()

    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>