jQuery慢慢啃之文档处理（五）

时间：2021-06-25 03:35:28

1.append(content|fn)//向每个匹配的元素内部追加内容。

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

2.appendTo(content)//把所有匹配的元素追加到另一个指定的元素元素集合中。

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

appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法

3.prepend(content)//向每个匹配的元素内部前置内容。

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

4.prependTo(content)//把所有匹配的元素前置到另一个、指定的元素元素集合中

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

5.after(content|fn)//在每个匹配的元素之后插入内容。

$("p").after("<b>Hello</b>");
结果：<p>I would like to say: </p><b>Hello</b>

6.before(content|fn)//在每个匹配的元素之前插入内容

$("p").before("<b>Hello</b>");
结果：[ <b>Hello</b><p>I would like to say: </p> ]

8.insertAfter(content)//把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

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

<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>

9.insertBefore(content)//把所有匹配的元素插入到另一个、指定的元素元素集合的前面

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

10.wrap(html|element|fn)//把所有匹配的元素用其他元素的结构化标记包裹起来

$("p").wrap("<div class='wrap'></div>");
$("p").wrap(document.getElementById('content'));
<div class="container">

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

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

</div>
$('.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>

11.unwrap()//这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。

<div>

    <p>Hello</p>

    <p>cruel</p>

    <p>World</p>

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

 <p>cruel</p>

 <p>World</p>

12.wrapAll(html|ele)//将所有匹配的元素用单个元素包裹起来

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

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

13.wrapInner(htm|element|fnl)//将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

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

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

<div class="container">

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

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

</div>
$('.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>

14.replaceWith(content|fn)//将所有匹配的元素替换成指定的HTML或DOM元素

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

15.replaceAll(selector)//用匹配的元素替换掉所有 selector匹配到的元素。

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

16.empty()//删除匹配的元素集合中所有的子节点

<p>Hello, <span>Person</span> <a href="#">and person</a></p>
$("p").empty();
<p></p>

17.remove([expr])//从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

<p>Hello</p> how are <p>you?</p>
$("p").remove();
how are

18.detach([expr])//从DOM中删除所有匹配的元素

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

<p>Hello</p> how are <p>you?</p>
$("p").detach();
how are


19.clone([Even[,deepEven]])//克隆匹配的DOM元素并且选中这些克隆的副本。
Events Boolean一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false
deepEven:一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

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

<button>Clone Me!</button>
$("button").click(function(){

  $(this).clone(true).insertAfter(this);

});

 

相关文章