jQuery中對(duì)dom的操作方法有:

1,增加元素子節(jié)點(diǎn):append():$(選擇器).append(string,element,jquery),在匹配的每一個(gè)元素的內(nèi)部插入最后一個(gè)子元素.

如果要插入的內(nèi)容作為第一個(gè)子元素,用prepend()方法.appendTo()和prependTo()的功能是一樣的,只是選擇器放在方法的參數(shù)里面.都可以接受多個(gè)參數(shù),也就是一次性可以插入多個(gè)子節(jié)點(diǎn).

2,增加元素兄弟節(jié)點(diǎn):after(),insertAfter(),before,insertBefore()四個(gè)方法,用法和接受的參數(shù)都差不多,可以接受數(shù)組參數(shù).insertAfter()和insertBefore()的功能就類似于appendTo()和prependTo().

tips:1插入的是子元素而2插入的是兄弟元素.當(dāng)插入元素的參數(shù)是文檔中另一個(gè)節(jié)點(diǎn)元素的時(shí)候,1和2里面的方法都是移動(dòng)該節(jié)點(diǎn).

3,查和改:html()和text()獲取元素節(jié)點(diǎn)的內(nèi)容或者設(shè)置它們,類似于原生的innerHTML.

4,增加元素父節(jié)點(diǎn):wrap()和wrapInner()這兩個(gè)方法給選擇的每一個(gè)元素增加一層父元素.區(qū)別是:wrap()把要包裹的元素全部裝進(jìn)來(lái),包括標(biāo)簽.wrapInner只包裹內(nèi)部?jī)?nèi)容,有點(diǎn)類似于append,但是是完全不同的結(jié)構(gòu).而wrapAll()和wrap()的區(qū)別是前者給符合選擇器的元素整體包裹一層父元素,如果選擇的元素之間有其他元素甚至是空格,都會(huì)忽略.

5,刪除節(jié)點(diǎn):{選中的元素.detach()}-會(huì)刪除該元素,但是保留該元素的jquery數(shù)據(jù)結(jié)構(gòu)以便后續(xù)把元素弄回來(lái),和toggle搭配很好用.empty()會(huì)移除元素的所有子元素包括后代元素的結(jié)構(gòu),該元素變空.remove()就是徹底的刪除,所有的東西,比empty更進(jìn)一步.unwrap()刪除父元素,和4里面的wrap()正好相反.

6,替換元素:replaceAll()和replaceWith():功能類似,區(qū)別就是append和appendTo的區(qū)別.用一個(gè)節(jié)點(diǎn)替換另一個(gè)節(jié)點(diǎn),被替換的節(jié)點(diǎn)的數(shù)據(jù)結(jié)構(gòu)和事件會(huì)被刪除.

tips:append家族和after|before家族可以插入的內(nèi)容包括:dom元素,文本節(jié)點(diǎn),jQuery對(duì)象,HTML字符串以及dom元素和文本節(jié)點(diǎn)組成的數(shù)組,當(dāng)然也可以接收一個(gè)函數(shù),函數(shù)最終返回上面的前四種類型.

DOM元素: ? ? ? append(document.createElement('p'));

文本節(jié)點(diǎn): ? ? ? ?append(document.createTextNode("Hello"));

jQuery對(duì)象: ? append($('p'));

HTML字符串: append('

hello

當(dāng)傳入多個(gè)參數(shù)是,可以將dom元素組成數(shù)組一起傳過(guò)去,也可以一個(gè)一個(gè)傳過(guò)去.同時(shí)不知此文本節(jié)點(diǎn)作為多個(gè)參數(shù)之一.