jQuery 選擇器

---

title: jQuery 選擇器
date: 2017-01-07 20:32:26

tags: [jQuery, 選擇器]

1、基本選擇器

語法	說明
$("*")	選擇文檔中的全部元素
$("div")	元素選擇器，選擇全部的div元素，返回數組
$("#id")	Id選擇器，返回單個元素
$(".class")	class選擇器，返回數組
$("p , div")	並列選擇器，返回全部的p元素和div元素

<!-- more -->

2、層次選擇器

語法	說明
$("A B")	後代選擇器，選擇全部A元素下面的全部B子元素，包含非直接子節點
$("A > B")	子元素選擇器，選擇A下面的直接B子元素，不包含非直接子節點
$("A + B")	緊鄰兄弟元素選擇器，選擇A元素後面緊鄰的B元素，若是沒有不選中，等同於next()方法
$("A ~ B")	兄弟元素選擇器，選擇A後面全部的B元素，等同於nextAll()方法

3、過濾選擇器

一、基本過濾選擇器

語法	說明
$("span : first")	選取第一個元素
$("span : last")	選取第二個元素
$("span : not(.wrap)")	取非元素
$("tr : even")	選取偶數行（索引從0開始）
$("tr : odd")	選取奇數行（索引從0開始）
$("tr : eq(2)")	選取指定索引的元素（索引從0開始）
$("tr : gt(2)")	選取大於索引號的元素（索引從0開始）
$("ul li : lt(2)")	選取小於索引號的元素（索引從0開始）
$(" : header")	選取全部的標題元素
$(" : animated")	選取全部的動畫元素

二、內容過濾選擇器

語法	說明
$("span : contains('hello')")	選取包含具體文本的元素
$("span : empty」)	選取不包含子元素或文本爲空的元素
$("ol li : parent」)	選取包含子元素或文本不爲空的元素
$("div : has(span)」)	選取子元素含有指定元素的元素，不是直系子元素也會生效

三、可見性過濾選擇器

語法	說明
$("div : hidden")	僅選取display:none或input type="hidden"的元素，不選取visibility: hidden或opacity:0的元素，也就是說:hidden只匹配那些「隱藏的」而且不佔空間的元素
$("div : visible")	選取可見的元素

四、屬性過濾選擇器

語法	說明
$("[href]")	選取全部帶有 href 屬性的元素
$("[href = '#']")	選取全部 href 屬性的值等於 "#" 的元素
$("[href != '#']")	選取全部 href 屬性的值不等於 "#" 的元素
$("[herf ^= 'http']")	選取全部 href 屬性的值以 "http" 開頭的元素
$("[herf $= '.jsp']")	選取全部 href 屬性的值以 "jsp" 結尾的元素
$("[herf *= 'www']")	選取全部 href 屬性的值包含 "www" 的元素

4、表單選擇器

一、基本表單選擇器

語法	說明
$(":input")	選取全部的 input 元素
$(":text")	選取全部type="text"的 input 元素
$(":password")	選取全部type="password"的 input 元素
$(":radio")	選取全部type="radio"的 input 元素
$(":checkbox")	選取全部type="checkbox"的 input 元素
$(":submit")	選取全部type="submit"的 input 元素和button的元素
$(":reset")	選取全部type="reset"的 input 元素和button的元素
$(":button")	選取全部type="button"的 input 元素和全部標籤爲button的元素
$(":image")	選取全部type="image"的 input 元素
$(":file")	選取全部type="file"的 input 元素

二、表單元素過濾選擇器

語法	說明
$(":enabled")	選擇全部啓用的 input 和 button 元素
$(":disabled")	選擇全部禁用（即設置了disabled="disabled"）的 input 和 button 元素
$(":selected")	選擇全部被選中下拉列表 選項
$(":checked")	選擇全部被選中的複選框 或單選 按鈕元素

5、jQuery CSS 選擇器

jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。

語法： jQuery選擇器.css("css屬性", "css屬性值");

$("div").css("background-color","red");

6、jQuery查找父、子、兄弟節點的方法

語法	說明
jQuery.parent(expr)	找父節點，能夠傳入expr進行過濾，好比$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr)	查找全部祖先元素，從父元素開始查找
jQuery.closest(expr)	查找第一個匹配的祖先元素，從當前元素開始查找
jQuery.children(expr)	返回全部子節點，這個方法只會返回直接的孩子節點，不會返回全部的子孫節點
jQuery.contents()	返回下面的全部內容，包括節點和文本。
jQuery.prev()	返回上一個兄弟節點，不是全部的兄弟節點
jQuery.prevAll()	返回全部以前的兄弟節點
jQuery.next()	返回下一個兄弟節點，不是全部的兄弟節點
jQuery.nextAll()	返回全部以後的兄弟節點
jQuery.siblings()	返回兄弟姐妹節點，不分先後
jQuery.find(expr)	不會有初始集合中的內容，好比$("p"),find("span"),是從子元素中找，等同於$("p span")
jQuery.filter(expr)	會有初始集合中的內容

7、參考資料

jQuery選擇器大全

jQuery選擇器總結

w3school-jQuery 參考手冊 - 選擇器