jQuery 學習系列筆記（三）（續）

接著上一篇繼續...

三、設置元素內容

針對通過修改元素的HTML方法來達到修改元素內容，jQuery提供了多種方法來實現。

1、替換HTML或文本內容

這個應該不用解釋了，我們都學習了那么多方法了。

另外也可以只獲取或設置元素的文本內容。

舉個例子：有如下HTML片段。

<ulid="theList">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

var text = $("#theList").text();

則text的結果是OneTwoThreeFour。

需要說明的是，無論用html()還是text()都是對原先內容的覆蓋，所以使用前必須確認好。

2、移動和復制元素

舉例說明：

$("p").append("<b>some text</b>");

這句比較簡單，就是表示在所有<p>元素后面追加新的HTML片段。下面是稍稍復雜的用法。

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

這表示什么呢？在帶有類.sugar的所有<p>元素后面追加帶有類ant的鏈接。這里的追加有點說道。如果append里的是單一元素，那么將該元素從原來的位置上刪除掉，移動到新的父元素下。如果是多個元素，即是一個內容大于等于1的集合，那么在原來位置保留的情況下，會在新的父元素下追加集合中的副本。

前者可以理解為移動操作，后者則是復制操作。

如果不想追加整個包裝集，也可以單獨追加一個特定的DOM元素。如：

var toAppend = $("a.ant")[0];
$("p.sugar").append(toAppend);

這種情況下對于追加的toAppend是所謂的移動還是復制，要取決于$("p.sugar")的元素數量（注意：與上面的例子不同，上面是取決于追加元素的數量）。如果匹配一個元素進行移動操作。多個，則進行復制操作。

還有更簡單的方法：

同樣的，如果target只匹配一個元素，則是移動，如果是多個元素，則是復制。

再介紹幾個工作方式類似于append和appendTo的方法。

prepend()和prependTo()表示在目標元素的內容之前插入源元素，而不是之后。

before()和insertBefore()表示在目標元素之前插入元素，而不是在目標元素的第一個子元素之前。

after()和insertAfter()表示目標元素之后插入元素，而不是在目標元素的最后一個子元素之后。

3、包裹元素

什么叫包裹元素呢？妹的，看書讀文字把我都搞成漿糊了還沒弄明白所謂的包裹元素，又沒有例子是弄哪樣？我才不會這么不負責任。

舉個例子：

$("a.surprise").wrap("<div class='hello'></div>");

上面的例子就是對應紫色的部分，把頁面上所有帶有類surprise的鏈接外面套層帶有類hello的<div>標簽。

最后頁面上的情況可能就是這樣的。

...
<a class="surprise"> one</a>
<a class="surprise"> two</a>
<a class="surprise"> three</a>
...
轉換后
...
<div class="hello">
    <a class="surprise"> one</a>
</div>
<div class="hello">
    <a class="surprise"> two</a>
</div>
<div class="hello">
    <a class="surprise"> three</a>
</div>
...

另一種形式呢?舉個例子,用頁面上第一個<div>元素的克隆副本分別包裹各鏈接

$("a.surprise").wrap($("div:first")[0]);

就是這個樣子啦。包裝后的結果就是頁面上第一個<div>元素是什么樣子的，包裹在各鏈接上的<div>就是什么樣子的。

有的時候我們不想包裹匹配集里的元素，而想包裹元素的內容。那么就用下面的方法。

對于包裹，說實話我真沒用過，不過據說是會經常用到，我寫的jQuery代碼也太少了，哈哈。

4、刪除元素

需要說明的是從DOM里刪除的元素仍然被該包裝集引用著，所以可以進一步用其他 jQuery命令去操作。如appendTo()、insertBefore()等類似命令。

5、克隆元素

通常情況下都是我們克隆完一個包裝集之后都是利用jQuery命令把其附加到DOM中的某個地方。

四、處理表單元素值

對于表單元素，我們最常見的操作是：存取表單元素值。

對于這個命令我們有幾個需要注意的地方

（1）如果包裝集里第一個元素不是表單元素，就會拋出javascript錯誤。

（2）不會區分復選框和單選按鈕的選中或非選中狀態，而是返回復選框或單選按鈕的value特性值，不管其選中與否。

對于單選按鈕，val雖然看起來有點雞肋，但是如果我們結合上jQuery選擇器之后，結果就不一樣了，舉個例子：如果想獲取一組包含名為radioGroup的單選按鈕組中選中按鈕的值，那么我們可以這樣。

$("[name=radioGroup]:checked").val();

這樣可以很好的達到效果。但是對于復選框的話，我們就要想別的辦法了。

同樣，這個方法也有局限性，就是不能把多個值設置到多選列表中去。另一種重載變體

舉例說明：把頁面上所有<input>和<select>元素，只要它們的值里和輸入字符串ironman、superman、spiderman中任何一個相匹配。那么如果匹配的是復選框或單選按鈕將變為已選中狀態，如果是<select>則變為已選擇狀態。

$("input, select").val(['ironman','superman','spiderman']);

其實到目前為止，我們就已經能用jQuery做許多事情了，不過這些都是比較“隱蔽”的，如果想來些效果的話，那我們還得接下來的學習。

關于jQuery的學習系列筆記我寫的會比較簡潔，更注重的是快速上手使用，當然，非常重要的知識點我還是會專門指出的。

PS：歡迎留言交流，24小時內必有回復。