本文實例講述了jQuery使用之處理頁面元素用法。分享給大家供大家參考。具體分析如下：

對于頁面的元素，在DOM編程中可以通過各種查詢、修改手段進(jìn)行管理，非常麻煩。jQuery提供了一整套的方法來處理頁面的元素。包括元素的內(nèi)容、復(fù)制、移動和替換等。這里將介紹一些常用的內(nèi)容。

1.直接獲取、編輯內(nèi)容。

在jQuery中，主要是通過html()和text()兩個方法來獲取和編輯頁面的內(nèi)容。其中html()相當(dāng)于獲取節(jié)點的innerHTML屬性，添加參數(shù)html(text)，則為設(shè)置innerHtml;而text()則用來獲取元素的純文本，text(content)為設(shè)置純文本。

這兩種方法有時配合著使用，text()通過用來過濾頁面中的標(biāo)記，而html(text)用來設(shè)置節(jié)點中的innerHtml。例如：

text()和html()方法的巧用。

鼠標(biāo)一次點擊、二次點擊、三次點擊這些可以用在代碼獲取轉(zhuǎn)移上。

2.移動和復(fù)制元素

在普通的DOM中，如果希望在某個元素后面添加一個元素，通常是使用父元素的appendChild()或者inserBefore()方法，很多時候需要反復(fù)需找節(jié)點的位置。十分麻煩，jQuery中提供了append()方法，可以直接為某個元素添加新的子元素。

除了直接添加html代碼，append()方法還可以用來添加固定的節(jié)點，例如

以上代碼中設(shè)置了兩個超鏈接<a>用于append()調(diào)用。對于第1個超鏈接，添加目標(biāo)$("p")，一共有兩個<p>元素，對于第2個超鏈接，添加目標(biāo)是唯一的<p>元素。

可以看到第一個超鏈接是以復(fù)制的形式添加的，第二個超鏈接則是以移動的方式添加的。

另外從上述可以看出，append()后面的<a>標(biāo)記被運用了目標(biāo)<p>的樣式風(fēng)格，同時也是保持了自身的樣式風(fēng)格。這是因為append()是將<a>作為<p>的子標(biāo)記進(jìn)行添加的，將<a>放到了<p>的所有子標(biāo)記（文本）節(jié)點后面。

除了append()方法，jQuery還提供了appendTo(target)方法，用來將目標(biāo)元素添加到指定目標(biāo)的子元素。它的使用方法和運行結(jié)果與append()完全類似。

對于第一幅照片，同事將其添加到3個p標(biāo)記中，對于第二幅圖片則把單獨添加到1個P元素中，從執(zhí)行結(jié)果可以看出，第一幅圖片是以復(fù)制的形式添加到3個P元素中的，而第二幅圖片是以移動的方式添加的。

與append()和appendTo()方式對應(yīng)，JQ還提供了prepend()和prependTo()方法這兩種方法是將元素添加到目標(biāo)的所有子元素之前，也遵循：復(fù)制、移動的添加原則。

除了上述的4種方法之外Jq還提供了before()、insertBefore()、after()、和insertAfter()，用來將元素直接添加到某個節(jié)點之前或之后，而不是作為子元素插入。

其中before()與insertBefore()完全相同，after()和insertAfter()也是完全一樣的，這里以after()為例

以上代碼運行結(jié)果，可以看到after()方法同樣遵循單個目標(biāo)移動，多個目標(biāo)復(fù)制的原則，并且不再是作為子元素添加。而是緊貼在目標(biāo)元素之后的兄弟元素。

3.刪除元素。

在DOM編程中，要刪除某個元素往往借助父元素的removeChild()方法，而jQuery提供了remove()方法，可以直擊刪除元素。

例如$("p").remove();是刪除整個頁面中的所有p元素標(biāo)記。

remove()也接受參數(shù)。

以上代碼中remove()使用了過濾選擇器，文本內(nèi)容包含1的P元素被刪除掉了。

雖然remove()可以接受參數(shù)，但是通常還是建議在選擇器階段就將要刪除的對象確定，然后用remove()一次性刪除。("p:contains('1')").remove();其效果是完全一樣的，并且效果和其它代碼的風(fēng)格是統(tǒng)一的。

在DOM中，如果希望把某個元素的子元素全部刪除，往往for循環(huán)的配合hasChildNodes()來判斷，并用removeChildNode()逐一刪除，Jquery提供了empty()方法直接刪除所有的子元素。

4.克隆元素。

第二節(jié)提到元素的復(fù)制和移動，但這取決于目標(biāo)數(shù)的個數(shù)，很多時候開發(fā)者希望即使目標(biāo)對象只要一個，同樣能執(zhí)行復(fù)制操作。

jQuery提供了clone()方法來完成這項任務(wù)。

同樣完成了上上節(jié)中appendTo()方法達(dá)到的結(jié)果。

另外clone()函數(shù)還接受布爾值對象作為參數(shù)，的那個參數(shù)為true時，除了克隆本身，它所攜帶的時間方法將一塊被復(fù)制。

以上代碼在單擊按鈕時克隆按鈕本身，同時克隆單擊事件，克隆出來的按鈕同樣具備有克隆自己的功能。

希望本文所述對大家的jQuery程序設(shè)計有所幫助。