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

2021-06-07 09:57:17 字數 2531 閱讀 1071

無論何時,我們都要記住的一點就是通過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選擇器有沒有獲取到元素的,這樣可以在外掛程式未正常獲取到元素的時候,可以立即停止外掛程式的執行,可以提高效能而且減少意外情況的發生。如何獲取呢?可以這樣

view source

print?

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中引入了表單選擇器,讓我們能極其方便地獲取到乙個表單中的某個或某型別的元素。詳細說明請看下表 選擇器描述返回示例 input 選取所有 元素集合元素 input 選取所有 元素 text 選取所有單行文框 集合元素 text 選取所有單行文框 ...

Jquery基礎教程之神奇的

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

Jquery基礎教程之神奇的

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