收集一組元素,可以使用如下簡單的語法:
$(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")
待續...