jquery選擇器大全

2022-03-04 22:30:50 字數 3209 閱讀 9821

一,基本的選擇器:

$("#myelement")           選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素

$("div")                  選擇所有的div標籤元素,返回div元素陣列

$(".myclass")             選擇使用myclass類的css的所有元素

$("*")                    選擇文件中的所有的元素,可以運用多種的選擇方式進行聯合選擇:例如$("#myelement,div,.myclass")

$("div,span,p.myclass")  選擇所有,和擁有class為myclass的標籤的一組元素

二,層次的選擇器:

$("div span")                 選擇裡所有的元素

$("div>span")                選擇元素下元素名是的子元素

$(".one+div")                選擇class為one的下乙個同輩元素

$("#two~div")               選擇id為two的元素後面的所有元素

三,過濾選擇器 :

基本過濾的選擇器

$("div:frist")                   選擇所有的元素中第乙個元素

$("div:last")                選擇所有元素中最後乙個元素

$("input:not(.myclass)")   選擇class不是myclass的元素

$("input:event")          選擇索引為偶素的$("input:odd")         選擇索引為偶素的$("input:eq(1)")          選擇索引等於1的元素

$("input:gt(1)")              選擇索引大於1的元素

$("input:lt(1)")          選擇索引小於1的元素

$(":header")               選擇網頁中所有的,,...

$("div:animated")        選擇正在執行動畫的元素

$(":focus")          選擇當前獲取焦點的元素       

內容過濾的選擇器

$("div:contains('我')")       選擇含有文字「我」的元素

$("div:empty")        選擇不包含子元素(包括文字元素)的空元素

$("div:has(p)")        選擇含有元素的元素

$("div:parent")        選擇擁有子元素(包括文字元素)的元素

可見性過濾的選擇器

$(":hidden")         選擇所有不可見的元素,包括,和等元素。如果只想選取元素,可以使用$("input:hidden")

$(":visible")         選擇所有可見的元素

屬性過濾的選擇器

$("div[id]")           選擇擁有屬性id的元素

$("div[title=test]")     選擇屬性title為"test"的元素

$("!div[title=test]")      選擇屬性title不等於"test"的元素(注意這裡沒有title屬性的元素也會被選取)

$("div[title^=test

]")       選擇屬性title以"test"開始的元素

$("div[title$=test]")     選擇屬性title以"test"結束的元素

$("div[title*=test]")     選擇屬性title含有"test"的元素

$("div[title|="en"]")     選擇屬性title等於en或以en為字首(該字串後跟乙個連字元'_')的元素

$("div[titlt~="uk"]")     選擇屬性title用空格分隔的值中包含字元uk的元素

$("div[id][title$='test']")  選取擁有屬性id,並且屬性title以"test"結束的元素

子元素過濾選擇器

$("ul li:nth-child(2)")      選擇ul標籤內它的第2個li標籤

$(":eq(index)")只匹配乙個元素,而$(":nth-child(index)")將為每乙個父元素匹配子元素,並且:nth-child(index)的index是從1開始的,而:eq(index)是從0開始算起的

$("ul li:first-chlid")      選擇每個中第乙個元素

$("ul li:last-child")      選擇每乙個中最後乙個元素

$("ul li:only-child")       在中選取是唯一子元素的元素

表單物件屬性過濾選擇器

$("#form1:enabled");    選擇id為"form1"的表單內的所有可用元素

$("#form2:disabled")     選擇id為"form2"的表單內的所有不可用元素

$("input:checked");       選擇所有被選中的元素

$("select option:selected");  選擇所有被選中的選項元素

四,表單選擇器:

$("input")           選擇所有、、和元素

$(":test")           選擇所有的單行文字框

$(":password")        選擇所有的密碼框

$(":radio")           選擇所有的單選框

$(":checkbox")        選擇所有的核取方塊

$(":submit")          選擇所有的提交按鈕

$(":image")           選擇所有的影象按鈕

$(":reset")            選擇所有的重置按鈕

$(":button")          選擇所有的按鈕

$(":file")            選擇所有的上傳域

$(":hidden")          選擇所有的不可見元素

JQuery選擇器大全

jquery 的選擇器可謂之強大無比,這裡簡單地總結一下常用的元素查詢方法 myelement 選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用my...

JQuery選擇器大全

jquery 的選擇器可謂之強大無比,這裡簡單地總結一下常用的元素查詢方法 myelement 選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用my...

jQuery選擇器大全

在dom 程式設計中我們只能使用有限的函式根據id 或者tagname 獲取dom 物件.然而在jquery 中則完全不同,jquery 提供了異常強大的選擇器用來幫助我們獲取頁面上的物件,並且將物件以jquery 包裝集的形式返回。本文主要對常用的jquery 選擇器進行乙個介紹及歸類。jquer...