您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“jQuery中DOM節(jié)點(diǎn)操作方法有哪些”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“jQuery中DOM節(jié)點(diǎn)操作方法有哪些”這篇文章吧。
append(content | fn):
向每個匹配的元素內(nèi)部追加內(nèi)容。
例如:向所有段落中追加一些HTML標(biāo)記。
<p>I would like to say: </p> $("p").append("<b>Hello</b>"); [ <p>I would like to say: <b>Hello</b></p> ]
appendTo():這個方法是顛倒了常規(guī)的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中
例如:把所有段落追加到ID值為foo的元素中。
<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():向每個匹配的元素內(nèi)部前置內(nèi)容
例如:向所有段落中前置一些HTML標(biāo)記代碼。
<p>I would like to say: </p> $("p").prepend("<b>Hello</b>"); [ <p><b>Hello</b>I would like to say: </p> ]
prependTo(content):
把所有匹配的元素前置到另一個、指定的元素元素集合中。實(shí)際上,使用這個方法是顛倒了常規(guī)的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。
例如:把所有段落追加到ID值為foo的元素中。
<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():在每個匹配的元素之后插入內(nèi)容。插入的元素和被插入的元素屬于同一級,非父子級關(guān)系
例如:在所有段落之后插入一些HTML標(biāo)記代碼。
<p>I would like to say: </p> $("p").after("<b>Hello</b>"); <p>I would like to say: </p><b>Hello</b>
before():在每個匹配的元素之前插入內(nèi)容。
例如:在所有段落之前插入一些HTML標(biāo)記代碼
<p>I would like to say: </p> $("p").before("<b>Hello</b>"); [ <b>Hello</b><p>I would like to say: </p> ]
insertAfter():把所有匹配的元素插入到另一個、指定的元素元素集合的后面。實(shí)際上,使用這個方法是顛倒了常規(guī)的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面
例如:把所有段落插入到一個元素之后。與 $("#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>
insertBefore():把所有匹配的元素插入到另一個、指定的元素元素集合的前面。實(shí)際上,使用這個方法是顛倒了常規(guī)的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。
例如:把所有段落插入到一個元素之前。與 $("#foo").before("p")相同。
<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>
wrap():把所有匹配的元素用其他元素的結(jié)構(gòu)化標(biāo)記包裹起來。
這種包裝對于在文檔中插入額外的結(jié)構(gòu)化標(biāo)記最有用,而且它不會破壞原始文檔的語義品質(zhì)。這個函數(shù)的原理是檢查提供的第一個元素(它是由所提供的HTML標(biāo)記代碼動態(tài)生成的),并在它的代碼結(jié)構(gòu)中找到最上層的祖先元素--這個祖先元素就是包裹元素。當(dāng)HTML標(biāo)記代碼中的元素包含文本時無法使用這個函數(shù)。因此,如果要添加文本應(yīng)該在包裹完成之后再行添加。
例如:用于包裝目標(biāo)元素的DOM元素
<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>
unwrap():這個方法將移出元素的父元素。這能快速取消 .wrap()方法的效果。匹配的元素(以及他們的同輩元素)會在DOM結(jié)構(gòu)上替換他們的父元素。
例如:用ID是"content"的div將每一個段落包裹起來
<div> <p>Hello</p> <p>cruel</p> <p>World</p> </div> $("p").unwrap() <p>Hello</p> <p>cruel</p> <p>World</p>
wrapAll():將所有匹配的元素用單個元素包裹起來
這于 '.wrap()'<a href="http://docs.jquery.com/Manipulation/wrap" title="Manipulation/wrap"></a> 是不同的,'.wrap()'為每一個匹配的元素都包裹一次。這種包裝對于在文檔中插入額外的結(jié)構(gòu)化標(biāo)記最有用,而且它不會破壞原始文檔的語義品質(zhì)。這個函數(shù)的原理是檢查提供的第一個元素并在它的代碼結(jié)構(gòu)中找到最上層的祖先元素--這個祖先元素就是包裝元素。
例如:用一個生成的div將所有段落包裹起來
$("p").wrapAll("<div></div>");
或者
$("p").wrapAll(document.createElement("div"));
以上是“jQuery中DOM節(jié)點(diǎn)操作方法有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。