jQuery選擇器

jQuery能夠理解成一個JS的代碼庫，使用時能夠用更少的代碼量完成更多的功能

但目前jQuery已經再也不普遍使用，只有一些老的項目使用

本篇隨筆涵蓋了jQuery的選擇器部分，大多都是CSS選擇器的另外一種簡便寫法，實際效果可參考CSS選擇器一文

基本選擇器

標籤選擇器

　　$('標籤名')

　　其中能夠用$(this).index()明確使用的是該類數組中的第幾個元素，或者用$('元素')[index]訪問

ID選擇器

　　$('#ID名')

類選擇器

　　$('.類名')

通配符選擇器

　　$('*')

　　效率低，儘量不用

多項選擇器

　　$('選擇器1,選擇器2,……')

　　相似於CSS裏的羣組選擇器

　　最後返回所匹配到的全部元素的一個類數組，其中數組元素的順序同HTML中標籤前後順序一致

 

層級選擇器

祖前後代選擇器

　　$('祖先元素 後代元素')

　　能夠選中祖先元素的全部後代元素中爲指定元素的元素（包括子元素、孫元素等等），不是像CSS中只選子元素而不選孫元素

　　生成的類數組中，元素順序符合HTML中元素的前後順序

直接後代選擇器

　　$('父元素>子元素')

　　選中父元素下子元素爲指定元素的元素，只會選中子元素而沒有孫元素

相鄰兄弟選擇器

　　$('元素+兄弟元素')

　　選中緊跟在元素後的兄弟元素爲特定元素的元素

兄弟選擇器

　　$('元素~兄弟元素')

　　選中元素以後同級的全部兄弟元素中爲指定元素的元素，而並不是只是相鄰的

 

屬性選擇器

　　$('[class]')：選擇元素中有class屬性名的全部元素

　　$('[attribute=value]')，找出attribute屬性值爲value的元素

　　$('[attribute!=value]')：找出attribute屬性值不爲value的元素

　　$('[attribute^=value]')：attribute屬性值以value開頭的元素（^能夠理解爲正則中首匹配）

　　$('[attribute$=value]')：attribute屬性值以value結尾的元素（$可理解爲正則中的尾匹配）

　　$('[attribute*=value]')：attribute屬性值包含value的元素

　　$('[attribute1][attribute2]')，能夠在其中放多個種類的屬性選擇器，最後篩選出同時知足其中全部條件的元素

 

過濾器

child

　　$('父元素>子元素:first-child')：找到父元素下第一個子元素爲指定類型的元素

　　$('父元素>子元素:last-child')：找到父元素下最後一個子元素爲指定類型的元素

　　$('父元素>子元素:nth-child(n)')：找到父元素下第n個子元素爲指定類型的元素（n從1開始）

　　$('父元素>子元素:nth-last-child(n)')：找到父元素下倒數第n個子元素爲指定類型的元素（n從1開始）

　　$('父元素>子元素:only-child')：找到父元素下只有一個子元素，且爲指定類型的元素

type

　　$('父元素>子元素:first-of-type')：找到父元素下的第一個指定類型的子元素（不必定必須是第一個節點）

　　$('父元素>子元素:last-of-type')：找到父元素下的最後一個指定類型的子元素（不必定必須是最後一個節點）

　　$('父元素>子元素:nth-of-type(n)')：找到父元素下的第n個指定類型的子元素（不必定必須是第n個節點）

　　$('父元素>子元素:nth-last-of-type(n)')：找到父元素下的倒數第n個指定類型的子元素（不必定必須是倒數第n個節點）

　　$('父元素>子元素:only-of-type')：找到父元素下的惟一指定類型的子元素（不必定必須只有一個子節點）

參數n

　　取值爲整數，從1開始

　　也可取even（偶數），odd（奇數）

　　也可用an+b的形式寫（n從1開始），例如3n+1

 

表單選擇器

表單元素選擇器

　　$(':input')：選擇全部表單中的元素

　　$(':text')：匹配全部的單行文本框，功能同$('input[type='text']')同樣，其餘的input中type（checkbox、radio等）也可用這種方法匹配

表單狀態選擇器

　　$(':enabled')：選中表單元素中enabled的元素（disabled也可如此使用）

　　$(':checked')：選中表單元素中checked的元素（複選框、單選框等、select中的option）

　　$(':selected')：選中表單元素中被選中的option元素

 

查找&過濾

　　如下爲jQuery的內置方法

find

　　$('父元素').find('子元素')

　　查找父元素中的後代元素（不僅是子元素）

chidren

　　$('父元素').children('子元素')

　　查找父元素中的子元素（只是子元素）

parent

　　$('子元素').parent()

　　查找子元素的父元素（只是父元素）

　　也有parents的方法（一個子元素的多個父元素），但不推薦使用

next/prev

　　$('元素').next/prev('兄弟元素')

　　查找元素相鄰的前一個/後一個兄弟元素

eq

　　$('元素').eq(n)

　　查找當前鏈式操做中的第n個jQuery對象（其中eq方法裏有隱式迭代），能夠理解成查找找到的元素中的第n個

　　n可正可負，若是是負數爲倒數第n個

siblings

　　$('元素').siblings()

　　找到同級的元素的兄弟元素

filter

　　$('元素').filter()

　　用以在元素的jQuery對象中篩選出和括號內要求一致的元素

　　其中方法內可傳入參數包括：字符串（可寫入選擇器表達式）、jQuery對象、DOM元素、函數