傳智播客學習之JQuery選擇器

一、 基本過濾選擇器

基本過濾選擇器重要包括:

:first :last:not(selector) :even:odd:eq(index):gt(index):lt(index):header:animated

二、 內容過濾選擇器

containstext)選取含有文本內容爲text的元素

$("div:contains('John')") 選取內容包含Johndiv元素

empty 選取不包含子元素或者文本的空元素

$("td:empty") 選擇不含子元素或者文本的td

has(selector)選取含有選擇器匹配的元素的元素

eg$("div:has(p)").addClass("test");選擇有p元素的div,並給其增加class屬性,值爲test

parent 選取含有子元素或者文本德元素

eg$("td:parent") 選擇有子元素或者文本的單元格

三、 可見性過濾選擇器

:hidden  匹配所有的不可見元素,input 元素的 type 屬性爲 "hidden" 的話也會被匹配到

$("tr:hidden") 選擇所有styledisplaynone即不可見的tr

注意hidden不僅包括樣式屬性的displaynone的元素,也包括文本隱藏域和visible=hidden等的元素。通過show方法可以讓其變爲顯示元素。所以我們要設置隱藏的特效,需要在執行show方法之前設定。

:visible  匹配所有的可見元素

$("tr:visible") 選擇styledisplay不爲none即可見的tr

四、 屬性過濾選擇器

[attribute=value] 匹配所有含有指定的屬性,但屬性等於特定值的元素。

[attribute!=value] 匹配所有含有指定的屬性,但屬性不等於特定值的元素。

[attribute^=value] 匹配給定的屬性是以某些值開頭的元素

[attribute$=value] 匹配給定的屬性是以某些值結尾的元素

[attribute*=value] 匹配給定的屬性是以包含某些值的元素

[attribute]  匹配包含給定屬性的元素

[selector1][selector2][selectorN]  複合屬性選擇器,需要同時滿足多個條件時使用。

eg$("input[id][name$='man']") 含有id屬性卻name屬性以man結尾的input元素

五、 子元素過濾選擇器·

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

eg:每個class爲one的div元素下的第2個子元素 $("div.one :first-child")

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

eg:每個class爲one的div元素下的第1個子元素 $("div.one :last-child")

:nth-child(index/even/odd/equation) 匹配其父元素下的第N個子或奇偶元素

eg:每個class爲one的div元素下的最後1個子元素 $("div.one :nth-child(2)")

:only-child 如果某個元素是父元素中唯一的子元素,那將會被匹配

eg:每個class爲one的div元素下只有1個元素的 $("div.one :only-child")

六、 表單對象過濾選擇器

:checked 匹配所有選中的被選中元素(複選框、單選框等,不包括select中的option)

:selected  匹配所有選中的option元素

:disabled 匹配所有不可用元素

:enabled  匹配所有可用元素

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章