jQuery學習筆記（2）

收集一組元素，可以使用如下簡單的語法：

$(selector)或者jQuery(selector)

也許剛開始你會覺得$()符號有點奇怪，但大部分jQuery使用者很快就喜歡上它的簡潔。

例如，為了獲取巢狀在<p>元素內的一組連線，我們使用如下語句：

$("p a")

$()函式(jQuery()函式的別名)返回特別的JavaScript物件，它包含著與選擇器相匹配的DOM元素的陣列。該物件擁有大量預定義的有用方法，能夠作用於該組元素。

用程式設計的話來說，這種構造稱為包裝器（wrapper），因為它用擴充套件功能來對匹配的元素進行包裝。我們使用術語jQuery包裝器或者包裝集（wrapped set），來指能夠在其上用jQuery定義的方法去操作的、匹配元素集合。

假定我們想讓帶有CSS類notLongForThisWorld的所有<div>元素呈現淡出效果。jQuery語句如下：

$("div.notLongForThisWorld").fadeOut();

經常作為jQuery命令引用的許多這類方法的顯著特徵是，當完成了一個操作（比如淡出操作）時，它們返回相同的一組元素，提供給下一個操作。如，假定除了讓元素呈現淡出效果之外，還想新增新的CSS類removed到每個元素。編寫如下程式碼：

$("div.notLongForThisWorld").fadeOut().addClass("removed");

這些jQuery鏈可以無限延續。任由jQuery鏈無限制地延續的話，你發現包含長達幾十個命令的例子並不罕見。因為imeige書都作用在與最初的選擇器相匹配的全部元素之上，所以沒有必要迴圈遍歷元素陣列。

即使選中的物件組被表現為非常複雜的JavaScript物件，如有必要也可以假定它是典型的元素陣列。因此以下兩個語句產生相同的結果：

$("#someElement").html("I have added some text to an element");

或

$("#someElement")[0].innerHTML="I have added some text to an element";

因為使用了ID選擇器，所以只有一個元素與選擇器相匹配。第一個示例使用jQuery的html()方法，將DOM元素的額內容用某些HTML標記去替換。第二個示例使用jQuery獲取元素陣列，用陣列下標0去選擇第一個元素，然後使用通常的JavaScript方式來替換該元素的內容。

如果想用能匹配多個元素的選擇器來獲取同樣的結果，那麼以下兩個片段產生一致的結果：

$("div.fileMeIn").html("I have added")

待續...