首頁 > 文章 > web前端 > jQuery中DOM節點操作方法總結

jQuery中DOM節點操作方法總結

小云云原創: 2018-01-24 15:40:031577瀏覽

本文主要介紹了jQuery中 DOM節點操作方法大全，有興趣的朋友一起看看吧，希望能幫助大家更好的學習jQuery中DOM節點操作方法。

append(content | fn)：向每個符合的元素內部追加內容。

例如：在所有段落中追加一些HTML標記。

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

例如：把所有段落追加到ID值為foo的元素中。

<p>I would like to say: </p>
<p></p><p></p>
$("p").appendTo("p");
<p><p>I would like to say: </p></p>
<p><p>I would like to say: </p></p>

prepend()：向每個符合的元素內部前置內容

例如：向所有段落中前置一些HTML標記程式碼。

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

prependTo(content)：

把所有符合的元素前置到另一個、指定的元素元素集合中。實際上，使用這個方法是顛倒了常規的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。

例如：把所有段落追加到ID值為foo的元素中。

<p>I would like to say: </p><p id="foo"></p>
$("p").prependTo("#foo");
<p id="foo"><p>I would like to say: </p></p>

after()：在每個符合的元素之後插入內容。插入的元素和被插入的元素屬於同一級，非父子級關係

例如：在所有段落之後插入一些HTML標記代碼。

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

before()：在每個符合的元素之前插入內容。

例如：在所有段落之前插入一些HTML標記程式碼

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

例如：把所有段落插入到一個元素之後。與 $("#foo").after("p")相同

<p>I would like to say: </p><p id="foo">Hello</p>
$("p").insertAfter("#foo");
<p id="foo">Hello</p><p>I would like to say: </p>

insertBefore()：把所有符合的元素插入到另一個、指定的元素元素集合的前面。實際上，使用這個方法是顛倒了常規的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。

例如：把所有段落插入到一個元素之前。與 $("#foo").before("p")相同。

<p id="foo">Hello</p><p>I would like to say: </p>
$("p").insertBefore("#foo");
<p>I would like to say: </p><p id="foo">Hello</p>

wrap()：把所有符合的元素用其他元素的結構化標記包起來。

這種包裝對於在文件中插入額外的結構化標記最有用，而且它不會破壞原始文件的語義品質。這個函數的原理是檢查提供的第一個元素（它是由所提供的HTML標記程式碼動態產生的），並在它的程式碼結構中找到最上層的祖先元素——這個祖先元素就是包裹元素。當HTML標記程式碼中的元素包含文字時無法使用這個函數。因此，如果要添加文字應該在包裹完成之後再行添加。

例如：用於包裝目標元素的DOM元素

<p class="container">
 <p class="inner">Hello</p>
 <p class="inner">Goodbye</p>
</p>
$('.inner').wrap(function() {
 return '<p class="&#39; + $(this).text() + &#39;" />';
});
<p class="container">
 <p class="Hello">
  <p class="inner">Hello</p>
 </p>
 <p class="Goodbye">
  <p class="inner">Goodbye</p>
 </p>
</p>

unwrap()：這個方法將移出元素的父元素。這能快速取消 .wrap()方法的效果。配對的元素（以及他們的同儕元素）會在DOM結構上取代他們的父元素。

例如：用ID是"content"的p將每個段落包裹起來

<p>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</p>
$("p").unwrap()
<p>Hello</p>
<p>cruel</p>
<p>World</p>

wrapAll()：將所有匹配的元素用單個元素包裹起來

這於'.wrap()' 是不同的，'.wrap() '為每一個匹配的元素都包裹一次。這種包裝對於在文件中插入額外的結構化標記最有用，而且它不會破壞原始文件的語義品質。這個函數的原理是檢查提供的第一個元素並在它的程式碼結構中找到最上層的祖先元素——這個祖先元素就是包裝元素。

例如：用一個產生的p將所有段落包裹起來

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

或

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

jQuery中DOM節點操作方法總結

相關文章