jQuery文档处理

内部插入

append(content|fn)

描述: 向所有段落中追加一些HTML标记

HTML代码

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

jQuery代码

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

结果

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

appendTo(content)

描述: 把所有段落追加到div元素中

HTML代码

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

jQuery代码

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

结果

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

描述: 新建段落追加div中并加上一个class

HTML代码

<div></div><div></div>

jQuery代码

 $("<p/>")
   .appendTo("div")
   .addClass("test")
   .end()
   .addClass("test2");

结果

<div><p class="test"></p></div>
<div><p class="test test2"></p></div>

prepend(content|fn)

描述: 向所有段落中前置一些HTML标记代码

HTML代码

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

jQuery代码

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

结果

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

描述: 将一个DOM元素前置入所有段落

HTML代码

<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>

jQuery代码

$("p").prepend( $(".foo")[0] );

结果

<p><b class="foo">Hello</b>I would like to say: </p>
<p><b class="foo">Hello</b>I would like to say: </p>
<b class="foo">Good Bye</b>

描述: 向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)

HTML代码

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

jQuery代码

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

结果

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

prependTo(content)

描述: 把所有段落追加到ID值为foo的元素中

HTML代码

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

jQuery代码

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

结果

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

外部插入

after(content|fn)

描述: 在所有段落之后插入一些HTML标记代码

HTML代码

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

jQuery代码

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

结果

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

描述: 在所有段落之后插入一个DOM元素

HTML代码

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

jQuery代码

$("p").after( $("#foo")[0] );

结果

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

描述: 在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)

HTML代码

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

jQuery代码

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

结果

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

before(content|fn)

描述: 在所有段落之前插入一些HTML标记代码

HTML代码

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

jQuery代码

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

结果

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

描述: 在所有段落之前插入一个元素

HTML代码

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

jQuery代码

$("p").before( $("#foo")[0] );

结果

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

描述: 在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)

HTML代码

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

jQuery代码

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

结果

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

insertAfter(content)

描述: 把所有段落插入到一个元素之后。与 $("#foo").after("p")相同

HTML代码

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

jQuery代码

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

结果

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

insertBefore(content)

描述: 把所有段落插入到一个元素之前。与 $("#foo").before("p")相同

HTML代码

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

jQuery代码

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

结果

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

包裹

wrap(html|ele|fn)

html参数描述: 把所有的段落用一个新创建的div包裹起来

jQuery代码

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

elem参数描述: 用ID是"content"的div将每一个段落包裹起来

jQuery代码

$("p").wrap(document.getElementById('content'));

回调函数描述: 用原先div的内容作为新div的class，并将每一个元素包裹起来

HTML代码

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

jQuery代码

$('.inner').wrap(function() {
  return '<div class="' + $(this).text() + '" />';
});

结果

<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

unwrap()

描述: 所有的段落都去除父元素的包裹

HTML代码

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

jQuery代码

$("p").unwrap()

结果

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

wrapAll(html|ele)

概述: 将所有匹配的元素用单个元素包裹起来

这于 '.wrap()'<a href="http://docs.jquery.com/Manipulation/wrap" title="Manipulation/wrap"></a> 是不同的，'.wrap()'为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。

html描述: 用一个生成的div将所有段落包裹起来

jQuery代码

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

elem描述: 用一个生成的div将所有段落包裹起来

jQuery代码

$("p").wrapAll(document.createElement("div"));

wrapInner(html|ele|fn)

html描述: 把所有段落内的每个子内容加粗

jQuery代码

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

elem描述: 把所有段落内的每个子内容加粗

jQuery代码

$("p").wrapInner(document.createElement("b"));

回调函数描述: 用原先div的内容作为新div的class，并将每一个元素包裹起来

HTML代码

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

jQuery代码

$('.inner').wrapInner(function() {
  return '<div class="' + $(this).text() + '" />';
});

结果

<div class="container">
  <div class="inner">
    <div class="Hello">Hello</div>
  </div>
  <div class="inner">
    <div class="Goodbye">Goodbye</div>
  </div>
</div>

替换

replaceWith(content|fn)

描述: 把所有的段落标记替换成加粗的标记

HTML代码

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

jQuery代码

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

结果

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

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

HTML代码

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

jQuery代码

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

结果

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

replaceAll(selector)

描述: 把所有的段落标记替换成加粗标记

HTML代码

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

jQuery代码

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

结果

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

删除

empty()

描述: 把所有段落的子元素（包括文本节点）删除

HTML代码

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

jQuery代码

$("p").empty();

结果

<p></p>

remove([expr])

描述: 从DOM中把所有段落删除

HTML代码

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

jQuery代码

$("p").remove();

结果

how are

描述: 从DOM中把带有hello类的段落删除

HTML代码

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

jQuery代码

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

结果

how are <p>you?</p>

detach([expr])

概述: 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

描述: 从DOM中把所有段落删除

HTML代码

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

jQuery代码

$("p").detach();

结果

how are

描述: 从DOM中把带有hello类的段落删除

HTML代码

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

jQuery代码

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

结果

how are <p>you?</p>

复制

clone([Even[,deepEven]])

描述: 克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中

HTML代码

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

jQuery代码

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

结果

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

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

HTML代码

<button>Clone Me!</button>

jQuery代码

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

摘自 jQuery API 文档