創(chuàng)建節(jié)點(diǎn)
- 無(wú)論$(html)中的HTML代碼多么復(fù)雜,都可以通過(guò)相同的方式來(lái)創(chuàng)建唧喉。
var $html = $("<li><em>這是</em><b>一個(gè)</b><a href="#">復(fù)雜的組合</a></li>");
$("ul").append($html);
方法 | 示例 | 說(shuō)明 |
---|---|---|
append() | 向匹配的元素內(nèi)追加內(nèi)容 | |
appendTo() | append()的反向?qū)崿F(xiàn) | |
prepand() | 向匹配的元素內(nèi)部前置內(nèi)容 | |
prependTo() | prepand()的反向?qū)崿F(xiàn) | |
after() | 在匹配的元素之后插入內(nèi)容 | |
insertAfter() | after()的反向操作 | |
before() | 在匹配的元素之前插入內(nèi)容 | |
insertBefore() | before()的反向操作 |
刪除節(jié)點(diǎn)
- remove()
var $li = $("ul li:eq(1)").remove();
$li.appendTo("ul");
當(dāng)某個(gè)節(jié)點(diǎn)用remove()方法刪除后美旧,該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將同時(shí)被刪除
被remove()之后還能正常使用
- detach()
只是從原來(lái)的位置刪除了铺峭,并不從jQuery對(duì)象中刪除肤粱,所有綁定的事件、附加的數(shù)據(jù)都會(huì)被保留下來(lái)谁榜。 - empty()
$("ul li:eq(1)").empty();
清空節(jié)點(diǎn)元素中的所有后代節(jié)點(diǎn)幅聘。
復(fù)制節(jié)點(diǎn)
$(this).clone(true).appendTo("body");
clone()方法中傳遞一個(gè)參數(shù)true凡纳,復(fù)制元素的同時(shí)窃植,復(fù)制元素中所綁定的事件。
替換節(jié)點(diǎn)
<p title="請(qǐng)選擇你最喜歡的水果">你最喜歡的水果是荐糜?</p>
//1巷怜、
$("p").replaceWith("<strong>你最不喜歡的水果是?</strong>");
//2暴氏、
$("<strong>你最不喜歡的水果是延塑?</strong>").replaceAll("p");
包裹節(jié)點(diǎn)
- wrap()
用<b>標(biāo)簽把<strong>的元素包裹起來(lái)
$("strong").wrap("<b></b>");
- wrapAll()
當(dāng)通過(guò)選擇器選擇到的strong有多個(gè)時(shí),wrap()為他們分別加<b>標(biāo)簽
使用wrapAll()后是一同打標(biāo)簽
<b>
<strong>1</strong>
<strong>2</strong>
</b>
- wrapInner()
通過(guò)選擇器選中的標(biāo)簽的內(nèi)部?jī)?nèi)容被打上了一層標(biāo)簽
$("strong").wrapInner("<b></b>");
<strong><b>1</b></strong>