jQuery-選擇器

使用jQuery選擇器

　　一、可使代碼更簡潔的寫

　　　　document.getElementById()使用jQuery的寫：$("#demo")

　　二、支持CSS選擇器

　　三、提供了完善的處理機制 （完善的兼容處理）

 

一、基本選擇器

　　基本選擇器是JQuery最經常使用的選擇器，也是最簡單的選擇器，它經過元素id、class和標籤名來查找DOM元素。

 

　　* : 選擇全部元素　　 //$("*").css("background","red")

　　#id ：經過id屬性值獲取元素 　　//$("#id").css("background","red")

　　Element ：經過元素名獲取元素

　　selector1,selector2 ：獲取列表中指定的全部元素

　　.class ：獲取使用class樣式的全部元素、

二、層級選擇器

　　若是想經過 DOM 元素之間的層次關係（後代元素, 子元素, 相鄰元素, 兄弟元素等）來獲取特定元素。

　　ancetor descendant ：匹配祖先元素下的後代元素 　　 //$("body div").css("background","red")

　　parent > child ：匹配父元素下的子元素　　 //$("body>div").css("background","red")

　　prev + next ：匹配上一個元素的後面的元素，必須是挨着的

　　prev~siblings ：匹配前一個元素的全部平輩元素，在prev元素後面才能匹配 　　 //$("#two").siblings("div").css("background","red")

三、過濾選擇器

　　在頁面元素中先找到許多具備共同屬性的元素，而後對這些元素加過濾條件，找到咱們想要的這些元素。

　　即經過特定的過濾規則來篩選出所需的 DOM 元素。

　　按照不一樣的過濾規則,又分爲基本過濾選擇器, 內容過濾選擇器, 可見性過濾選擇器, 屬性過濾選擇器, 子元素過濾選擇器和表單對象屬性過濾選擇器。

3.一、基礎過濾選擇器

　　:first ：匹配第一個元素

　　:last ：匹配最後一個元素　　 //$("div:last")

　　:even ：匹配索引爲偶數的元素 　　 //$("input:even")

　　:odd ：匹配索引爲奇數的元素

　　:eq(index) ：匹配索引爲指定值的元素

　　:gt(index) ：匹配索引大於指定值的元素　　 //:gt(index)

　　:lt(index) ：匹配索引小於指定值的元素

　　:not(selector) ：匹配除了指定選擇器以外的全部元素 　　 //$("div:not(.class)").css("background","red")

3.二、內容過濾選擇器

　　:contains(text) ：匹配內容中包含指定內容的元素

　　:empty ：匹配內容爲空的元素

　　:has(selector) ：匹配內容中包含指定選擇器的元素

　　:parent ：匹配內容不爲空的元素

3.三、可見性過濾選擇器

　　:hidden ：匹配隱藏的元素 　　 //$("div:hidden").show(3000)

　　:visible ：匹配顯示的元素

3.四、屬性過濾選擇器

　　[attribute] ：匹配具備指定屬性的元素 　　 //$("div[title]").css("background","red")

　　[attribute=value] ：匹配屬性等於指定值的元素

　　[attribute!=value] ：匹配屬性不等於指定值的元素

　　[attribute^=value] ：匹配屬性值以指定值開始的元素　　 //("div[title^=en]").css("background","red")

　　[attribute$=value] ：匹配屬性值以指定值結束的元素

　　[attribute*=value] ：匹配屬性值中包含指定值的元素

　　[selector1][selector2][selectorN] ：同時知足全部條件，則匹配

3.五、子元素過濾選擇器

　　:nth-child(index/even/odd) ：匹配指定索引的元素 從1算起　　 //$("div.one :nth-child(2)").css("background","red")

　　:first-child ：匹配第一個子元素

　　:last-child ：匹配最後一個子元素

　　:only-child ：若是子元素是父元素的惟一子元素，則匹配

3.六、表單對象屬性濾選擇器

　　:enabled ：匹配狀態可用的表單元素

　　:disabled ：匹配狀態不可用的表單元素

　　:checked ：匹配被選中的元素 匹配單選或複選 　　 //$("#form1 input:checked").length

　　:selected ：匹配被選中的元素 匹配的是option

3.七、表單過濾選擇器

　　:input ：匹配全部表單元素

　　$(「:input」) ：匹配全部表單元素 select、textarea

　　$(‘input’) ：匹配input標籤

　　:text ：文本框

　　:password ：密碼框 //$(":password")

　　:radio ：單選按鈕

　　:checkbox ：複選框

　　:submit ：提交按鈕

　　:reset ：重置按鈕　　 //$(":reset")

　　:image ：圖像按鈕

　　:button ：按鈕

　　:file ：文件框

　　:hidden ：隱藏域