jQuery基礎教程之 層次選擇器

2021-08-31 19:44:52 字數 2314 閱讀 1982

隱式迭代

$(「選擇器」).css(「background-color」,」red」)則是為這組元素中每個元素的樣式都加上紅色背景。jquery會自動迭代每個元素,這就免去了我們編寫**遍歷每個元素物件的操作。

無需判斷物件是否存在

如果頁面上不存在id為test的dom 元素,$(「#test」).css(「background-color」,」red」)不會產生任何異常,而document.getelementbyid(「test」).style.backgroundcolor=』red』就會產生未找到物件的異常。

雖然jquery這樣操作不會產生異常,但是我們在開發jquery外掛程式的時候,是有必要判斷jquery選擇器有沒有獲取到元素的,這樣可以在外掛程式未正常獲取到元素的時候,可以立即停止外掛程式的執行,可以提高效能而且減少意外情況的發生。如何獲取呢?可以這樣

1if($("選擇器").length > 0)else

上面一段文字貌似和今天要說的jquery層次選擇器好像沒多大關係呢,呵呵~~的確,上面的東西是我臨時想起來的,感覺比較實用,所以就在這裡和大家說一下,也好讓對此沒有多少了解的人解決一下疑惑。

那接下來我們來說一下這個jquery層次選擇器的用法,其實jquery層次選擇器只有兩種用法:

$(「ancestor descendant」):選取parent元素後所有的child元素

ancestor的中文意思是「祖先」,descendant的中文意思是「後代」

$(「body div」)

選取body元素下所有的div元素。

$(「ul li」)

選取ul元素下所有的li元素。

$(「#test div」)

選取id為「test」的元素所包含的所有的div子元素

$(「div#test div」)

選取id為「test」的div所包含的所有的div子元素

$(「.test div」)

選取class為「test」的元素所包含的所有的div子元素

$(「div.test span」)

選取class為「test」的div所包含的所有的span子元素

$(「span.test .demo」)

選取class為「test」的span所包含的所有的class為demo的元素

$(「.test .demo」)

選取class為「test」的元素所包含的所有的class為demo的元素

$(「parent > child」):選取parent元素後所有的直屬child元素,何謂「直屬」,也就是第一級的意思了

$(「body > div」)

選取body元素下所有的第一級div元素。

$(「ul > li」)

選取ul元素下所有的第一級li元素。

$(「#test > div」)

選取id為「test」的元素所包含的所有的第一級div子元素

$(「div#test > div」)

選取id為「test」的div所包含的所有的第一級div子元素

$(「.test > div」)

選取class為「test」的元素所包含的所有的第一級div子元素

$(「div.test > span」)

選取class為「test」的div所包含的所有的第一級span子元素

$(「span.test > .demo」)

選取class為「test」的span所包含的所有的第一級class為demo的元素

$(「.test > .demo」)

選取class為「test」的元素所包含的所有的第一級class為demo的元素

$(「prev + next」):prev和next是兩個同級別的元素. 選中在prev元素後面的next元素.

$(「#demo+img」)選在id為demo元素後面的img物件.如果id為demo元素後面沒有同級的img物件,那麼這個$(「#demo+img」).length=0

$(「prev ~ siblings」):選擇prev後面的根據siblings過濾的元素。注:siblings是過濾器

$(「#demo~[title]「)選擇id為demo的元素後面所有帶有title屬性的元素,同樣如果id為demo的元素後面沒有乙個帶有title屬性的元素,那麼$(「#demo~[title]「).length = 0

jQuery基礎教程之強大的選擇器(層次選擇器)

無論何時,我們都要記住的一點就是通過jquery選擇器獲取的jquery物件任何時候都是一組元素。而jquery選擇器又具有這樣的特點 隱式迭代 選擇器 css background color red 則是為這組元素中每個元素的樣式都加上紅色背景。jquery會自動迭代每個元素,這就免去了我們編寫...

jQuery基礎教程之 基本選擇器

jquery的基本選擇器分為以下四種型別 cssid 選擇id值等於 cssid 的元素,注意 在乙個html文件中id是唯一的,也即id為 cssid 不能出現兩次 雖然即使出現了兩次瀏覽器也可以解釋,但是這是不規範的 這個id選擇器獲取jquery物件也是個元素集合,但是只有乙個元素。將這個jq...

Jquery基礎教程之神奇的

這個玩意其實是乙個jquery封裝的功能非常強大的函式,當然,強大的東東,在使用起來也必然會是有點複雜的咯。下面我們來看它的一些強大的用法 expr 這個函式可以通過css選擇器 xpath html 來匹配目標元素,返回的是乙個jquery物件,jquery的所有操作都是以此為基石的。下面來看 h...