本文實例講述了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()方法，可以直接為某個元素增加新的子元素。
1122...
3344...
除了直接加入html程式碼，append()方法還可以用來加入固定的節點，例如
是唯一的一個元素，那麼$("a")就會被移動到該元素的所有子元素的後面，而如果目標
，是多個元素，那麼$("a")將會以複製的形式，在每個P中都添加一個子元素，而自身保持不變。例：使用append()方法複製和移動元素。
以上程式碼中設定了兩個超連結用於append()呼叫。對於第1個超鏈接，新增目標$("p")，一共有兩個 元素，對於第2個超鏈接，新增目標是唯一的 元素。 可以看到第一個超連結是以複製的形式添加的，第二個超連結則是以移動的方式添加的。 另外從上述可以看出，append()後面的標記被運用了目標 的樣式風格，同時也是保持了自身的樣式風格。這是因為append()是將作為 的子標記進行添加的，將放到了 的所有子標記（文本）節點後面。 除了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()方法直接刪除所有的子元素。
$("img:eq(0)").appendTo($("p")); //新增目標為多個
$("img:eq(1)").appendTo($("p:eq(0)")); //新增目標是唯一的
});
4.克隆元素。
第二節提到元素的複製和移動，但這取決於目標數的個數，很多時候開發者希望即使目標物件只要一個，同樣能執行複製操作。
jQuery提供了clone()方法來完成這項任務。
同樣完成了上上節中appendTo()方法所達到的結果。
另外clone()函數也接受布林值物件作為參數，的那個參數為true時，除了複製本身，它所攜帶的時間方法將一塊被複製。
以上程式碼在點擊按鈕時複製按鈕本身，同時複製點擊事件，複製出來的按鈕同樣具備有複製自己的功能。
希望本文所述對大家的jQuery程式設計有所幫助。
