jQeury入門：操作元素 Manipulating Elements

更完整的jQuery操作方法，參見 Manipulation documentation on api.jquery.com。

獲取和設置關於元素的信息

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

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

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

//更改元素的HTML
$( "#myDiv p:first" ).html( "New <strong>first</strong> 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字符串創建新的元素
$( "<p>This is a new paragraph</p>" );
$( "<li class=\"new\">new list item</li>" );

// 用屬性對象創建一個新元素
$( "<a/>", {
    html: "This is a <strong>new</strong> link",
    "class": "new",
    href: "foo.html"
});

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

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

//獲取頁面中一個新的元素

var myNewElement = $( "<p>New element</p>" );

myNewElement.appendTo( "#content" );

myNewElement.insertAfter( "ul:last" ); // 這將從#content移動p

$( "ul" ).last().after( myNewElement.clone() ); //克隆p所以現在有兩個

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

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

//同時在頁面中創建並添加元素
$( "ul" ).append( "<li>list item</li>" );

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

var myItems = [];
var myList = $( "#myList" );

for ( var i = 0; i < 100; i++ ) {
    myItems.push( "<li>item " + i + "</li>" );
}

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;
});

原文地址