jQeury入門：操作元素 Manipulating Elements

jQeury入門：操作元素 Manipulating Elements

 

擷取和設定關於元素的資訊

有很多方法可以改變當前的元素。在這些方法中最常用的任務是改變元素內部的HTML或者屬性。jQuery為這些類型的操作提供了簡單的，跨瀏覽器的方法。你也能夠用很多同樣的方法用它的擷取函數化身來擷取關於元素的資訊。關於擷取函數和設定函數的更多資訊，參見 Working with Selections章節。這裡有一些你可以用來設定和擷取元素資訊的方法：

.html() – 擷取或設定元素中的HTML內容。 .text() – 擷取或設定元素中的常值內容；HTML代碼會被過濾。 .attr() – 擷取或設定元素提供的屬性的值。 .width() – 擷取或設定封裝集中的首個元素的寬度整數像素值。 .height() – 擷取或設定封裝集中的首個元素的高度整數像素值。 .position() – 擷取封裝集中第一個含有定位資訊元素的對象，相對於它的第一個被定位的上代元素。這個方法只有擷取函數。 .val() – 擷取或設定表單元素的值。

更改相關元素的一些東西不是很重要，但是記住，這個改變將影響封裝集中的所有元素。如果你只想更改一個元素，那麼在調用設定函數之前，一定要在封裝集中指定它。

//更改元素的HTML$( #myDiv p:first ).html( New first paragraph! );

移動，複製，和刪除元素

有各種各樣的方法讓元素在DOM中移動，常用的有兩種方法：

相對於另一元素來放置所選元素。 相對於所選元素來放置一個元素。

舉例來說，jQuery提供.insertAfter()和.after()。 .insertAfter() 方法將被選擇的元素做為一個參數放置到提供的元素後。.after() 方法將提供的元素做為參數放置到被選擇元素之後。一些其他的方法也延用這種模式：.insertBefore() 和 .before(), .appendTo() 和 .append(), 以及 .prependTo() 和 .prepend().

最有意義的方法將取決於所選擇的元素，以及是否需要儲存你添加到頁面中的元素的引用
（添加後，是否還需要調用被添加的元素？——譯者按）。如果你需要儲存引用，你最好使用第一種辦法——將所選元素相對於另外一個元素——這樣會返回這個放置的元素。既然這樣，.insertAfter()， .insertBefore()，.appendTo()，和 .prependTo() 就是被選擇的操作。

//用不同的方式移動元素//讓第一條排列到的列表的最後一條var li = $( #myList li:first ).appendTo( #myList );//解決同一個問題的另外一種方法：$( #myList ).append( $( #myList li:first ) );//注意，沒有辦法訪問添加的清單項目，被移動後，返回的是列表本身。

複製元素

象.appendTo()這樣的方法移動元素，但是某些時候是需要元素的副本。如果這樣，最好用.clone()：

// 產生一個元素的副本//複製清單項目的第一項到列表最後：$( #myList li:first ).clone().appendTo( #myList );

如果你需要複製相關的資料和事件，確定傳遞參數true到.clone()。

刪除元素

有兩種方式將元素從頁面中刪除：.remove() 和 .detach()。當你想徹底在頁面中刪除封裝集時，使用.remove()。雖然.remove()會返回刪除的元素，如果它們再次在頁面中出現，這些元素將不再有依附於他們的關聯資料和事件。

如果你需要保留這些資料和事件，使用.detach()。和.remove()一樣，它會返回封裝集，但在封裝集中，它也維持了資料和事件的關聯，所以稍後你能夠在頁面中恢複這個封裝集。

如果你對元素做了大量的操作，.detach()方法是非常有價值的。既然這樣，從頁面中.detach()元素是有益於繼續在代碼中操作它，然後需要的話就在頁面中恢複它。這樣限制了昂貴的”DOM touches”並且保留了元素的資料和事件。

如果在頁面中你想保留元素但是刪除它的內容，你能使用.empty()來處理元素的內部HTML。

建立新元素

jQuery提供了一個平凡且簡潔的辦法，用和建立封裝集一樣的$()方法來建立新元素：

// 用HTML字串建立新的元素$( 

This is a new paragraph

); $(

• new list item
• ); // 用屬性對象建立一個新元素 $( , { html: This is a new link, class: new, href: foo.html });

  注意上面代碼第二個參數中的屬性對像，屬性名稱class在引號中，而屬性名稱 html 和 href並沒有這樣。屬性名稱通常只要不是保留字是不用引號的（而class在這些樣本中）。

  當你建立一個新的元素，它不會立即被添加到頁面中。這裡有一些一旦元素被建立就會添加到頁面中辦法。

  //擷取頁面中一個新的元素var myNewElement = $( 

  New element

  ); myNewElement.appendTo( #content ); myNewElement.insertAfter( ul:last ); // 這將從#content移動p $( ul ).last().after( myNewElement.clone() ); //複製p所以現在有兩個

  新建立的元素沒有必要儲存到變數中——你可以直接在$()之後調用在頁面中添加元素的方法。不管怎樣，更多的時候你想引用添加的元素，因此不用晚些再去選擇它。

  你也可以建立一個元素然後把它添加到頁面中（前面講的第二種方式），但是注意這種方式你不能取到新建立元素的引用。

  //同時在頁面中建立並添加元素$( ul ).append( 

  • list item
  • );

    添加新的元素到頁面中，文法很簡單，所以會使人忘記重複添加元素到DOM需要消耗的巨大的效能。如果你需要添加很多相似的容器，你可以將所有的HTML串連成一個字串，然後將這個字串添加到容器中來代替每次添加一個元素。用數組將所有片斷收集到一起，然後將他們組合成一個字串再去添加。

    var myItems = [];var myList = $( #myList );for ( var i = 0; i < 100; i++ ) {    myItems.push( 

    • item + i +
    • ); } myList.append( myItems.join( ) ); 操作屬性

      jQuery的屬性操作功能很強大。基本的改變很容易，但是.attr()方法可以允許更複雜的操作。它既可以設定一個明確的值，也可以設定一個從函數返回的值。當這種函數文法被用到，這個函數接收兩個參數：這個被改變屬性的元素從0開始的索引值，和被改變屬性的當前值。

      //操作一個單獨的屬性$( #myDiv a:first ).attr( href, newDestination.html );// 操作多種屬性$( #myDiv a:first ).attr({    href: newDestination.html,    rel: nofollow});//使用一個函數定義一個屬性的新值$( #myDiv a:first ).attr({    rel: nofollow,    href: function( idx, href ) {        return /new/ + href;    }});$( #myDiv a:first ).attr( href, function( idx, href ) {    return /new/ + href;});