常見的jQuery選擇器匯總_jquery

基本元素選擇器

複製程式碼 程式碼如下:

$("p")
$("p.ii")選取所有class=ii的 p元素
$("p#demo")選取id=demo的第一個p元素

分層選擇器

複製程式碼 程式碼如下:

$("div input")div 下的所有input
$("div>input")

基本條件選擇器

複製程式碼 程式碼如下:

$("p:first")
$("p:last")
$("tr:even")選擇偶數行
$("tr:odd")奇數
$("input:not(:checked)")選擇所有為本選取的元素
$("tr:eq(1)")索引值為1的表格
$("tr:gt(0)")大於0
$("tr:lt(0)")小於0
$(":header")選擇所有標題元素
$(":animated")正在執行的動畫

內容條件選擇器

複製程式碼 程式碼如下:

$("div:constains('ddd')")選擇包含ddd文本的層元素
$("td:empty")選擇不包含文字或子元素的表格單元
$("div:has(p)")選擇包含段落元素的層元素
$("td:parent")選擇包含子元素或文字的表格單元

可見性條件選擇器

複製程式碼 程式碼如下:

$("tr:hidden")  //選擇所有隱藏的表格
$("tr:visible") 選擇所有可見的表格

屬性選擇器

複製程式碼 程式碼如下:

$("div[id]")具有id屬性的層
$("input[name='']") input屬性name=''
$("input[name!='']")
$("input[name^='']")選擇具有name屬性且值為‘'為起始內容的表單輸入元素
$("input[name$='']")選擇具有name屬性且值為‘'為結束內容的表單輸入元素
$("input[name*='']")選擇具有name屬性且值為‘'的表單輸入元素
$("input[id][name$='']")選擇具有id和name屬性的值以‘'為結束內容的輸入表單元素

子元素選擇器

複製程式碼 程式碼如下:

$("ul li:nth-child(2)")選擇第二個清單項目
$("ul li:nth-child(even)")
$("ul li:nth-child(odd)")
$("ul li:nth-child(3n)")
$("ul li:first-child")
$("ul li:last-child")
$("ul li:only-child")選擇清單出現且僅出現一個清單項目

表單元素選擇器

複製程式碼 程式碼如下:

$("input")選擇所有 input textarea select button等元素
$(":text")文字行
$(":password")
$(":radio")
$(":checkbox")
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")
$(":hidden")

表單屬性選擇器

複製程式碼 程式碼如下:

$("input:enabled")  //選擇所有可用
$("input:disabled")
$("input:checked")
$("select:option:selected")