無論何時,我們都要記住的一點就是通過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?
1
if
($(
"選擇器"
).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...