jQuery使用之處理頁面元素用法實例_jquery

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

對於頁面的元素，在DOM程式設計中可以透過各種查詢、修改手段來管理，非常麻煩。 jQuery提供了一整套的方法來處理頁面的元素。包括元素的內容、複製、移動和替換等。這裡將介紹一些常用的內容。

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

在jQuery中，主要是透過html()和text()兩個方法來取得和編輯頁面的內容。其中html()相當於取得節點的innerHTML屬性，新增參數html(text)，則為設定innerHtml;而text()則用來取得元素的純文本，text(content)為設定純文字。

這兩種方法有時會搭配使用，text()透過用來過濾頁面中的標記，而html(text)則用來設定節點中的innerHtml。例如：

複製程式碼 程式碼如下:

$(function() {
 var sString = $("p:first").text(); //取得純文字
 $("p:last").html(sString);
});

利用text()的方法取得第一個P的文本，然後用html()方法賦給最後一個

。

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

複製程式碼 程式碼如下:

文本段 落示例

滑鼠一次點擊、二次點擊、三次點擊這些可以用在程式碼取得轉移上。

2.移動與複製元素

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

複製程式碼 程式碼如下:

1122...

3344...

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

複製程式碼 程式碼如下:

$("p").append($("a"));

這個情況會有一些不同，倘若添加的

是唯一的一個元素，那麼$("a")就會被移動到該元素的所有子元素的後面，而如果目標

，是多個元素，那麼$("a")將會以複製的形式，在每個P中都添加一個子元素，而自身保持不變。例：使用append()方法複製和移動元素。

複製程式碼 程式碼如下:

連結1
連結2

文字1

文字2

以上程式碼中設定了兩個超連結用於append()呼叫。對於第1個超鏈接，新增目標$("p")，一共有兩個

元素，對於第2個超鏈接，新增目標是唯一的

元素。

可以看到第一個超連結是以複製的形式添加的，第二個超連結則是以移動的方式添加的。

另外從上述可以看出，append()後面的標記被運用了目標

的樣式風格，同時也是保持了自身的樣式風格。這是因為append()是將作為

的子標記進行添加的，將放到了

的所有子標記（文本）節點後面。

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

複製程式碼 程式碼如下:

$(function() {
 $("img:eq(0)").appendTo($("p")); //新增目標為多個

 $("img:eq(1)").appendTo($("p:eq(0)")); //新增目標是唯一的

});

---

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

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

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

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

複製程式碼 程式碼如下:

連結1
連結2

內容1

內容2

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

3.刪除元素。

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

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

remove()也接受參數。

複製程式碼 程式碼如下:

連結1
連結2

內容1

內容2

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

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

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

複製程式碼 程式碼如下:

連結1
連結2

內容1

內容2

4.克隆元素。

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

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

複製程式碼 程式碼如下:

---

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

另外clone()函數也接受布林值物件作為參數，的那個參數為true時，除了複製本身，它所攜帶的時間方法將一塊被複製。

複製程式碼 程式碼如下:

以上程式碼在點擊按鈕時複製按鈕本身，同時複製點擊事件，複製出來的按鈕同樣具備有複製自己的功能。

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