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")

待續...

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章