jQuery 學(xué)習(xí)系列筆記（三）（續(xù)）

接著上一篇繼續(xù)...

三、設(shè)置元素內(nèi)容

針對通過修改元素的HTML方法來達(dá)到修改元素內(nèi)容，jQuery提供了多種方法來實(shí)現(xiàn)。

1、替換HTML或文本內(nèi)容

這個應(yīng)該不用解釋了，我們都學(xué)習(xí)了那么多方法了。

另外也可以只獲取或設(shè)置元素的文本內(nèi)容。

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

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

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

則text的結(jié)果是OneTwoThreeFour。

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

2、移動和復(fù)制元素

舉例說明：

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

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

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

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

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

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

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

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

還有更簡單的方法：

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

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

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

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

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

3、包裹元素

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

舉個例子：

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

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

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

...
<a class="surprise"> one</a>
<a class="surprise"> two</a>
<a class="surprise"> three</a>
...
轉(zhuǎn)換后
...
<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]);

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

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

對于包裹，說實(shí)話我真沒用過，不過據(jù)說是會經(jīng)常用到，我寫的jQuery代碼也太少了，哈哈。

4、刪除元素

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

5、克隆元素

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

四、處理表單元素值

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

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

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

（2）不會區(qū)分復(fù)選框和單選按鈕的選中或非選中狀態(tài)，而是返回復(fù)選框或單選按鈕的value特性值，不管其選中與否。

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

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

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

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

舉例說明：把頁面上所有<input>和<select>元素，只要它們的值里和輸入字符串ironman、superman、spiderman中任何一個相匹配。那么如果匹配的是復(fù)選框或單選按鈕將變?yōu)橐堰x中狀態(tài)，如果是<select>則變?yōu)橐堰x擇狀態(tài)。

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

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

關(guān)于jQuery的學(xué)習(xí)系列筆記我寫的會比較簡潔，更注重的是快速上手使用，當(dāng)然，非常重要的知識點(diǎn)我還是會專門指出的。

PS：歡迎留言交流，24小時內(nèi)必有回復(fù)。