jQuery層次選擇器

2021-06-16 08:34:14 字數 2398 閱讀 8515

無論何時,我們都要記住的一點就是通過jquery選擇器獲取的jquery物件任何時候都是一組元素。

而jquery選擇器又具有這樣的特點:

隱式迭代

$(「選擇器」).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層次選擇器

div span 選取裡的所有元素 div span 選取元素下元素名是的子元素 one div 選取id為one的元素的下乙個同輩元素 等同於 one next div one div 選取id為one的元素的元素後面的所有同輩元素 等同於 one nextall div one siblings...

JQuery 層次選擇器

在 dom元素之間的層次關係主要包含元素的後代元素 子元素 相鄰元素和兄弟元素等 html的結構 1.ancestor descendant 在給定的祖先元素下匹配所有的後代元素 比如說子元素還有孫子輩的元素等 2.子元素選擇器 parent child firefox firebug下的html變...

jQuery 層次選擇器

div span 選取裡的所有元素 div span 選取元素下元素名是的子元素 one div 選取id為one的元素的下乙個同輩元素 等同於 one next div one div 選取id為one的元素的元素後面的所有同輩元素 等同於 one nextall div one siblings...