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

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

1.直接獲取、編輯內容。

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

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

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

鼠標一次點擊、二次點擊、三次點擊這些可以用在代碼獲取轉移上。

2.移動和復制元素

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

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

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

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

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

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

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

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

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

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

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

3.刪除元素。

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

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

remove()也接受參數。

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

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

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

4.克隆元素。

第二節提到元素的復制和移動，但這取決于目標數的個數，很多時候開發者希望即使目標對象只要一個，同樣能執行復制操作。

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

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

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

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

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