Jquery 常用選擇器總結

Jquery的選擇器可謂之強大無比，用過很多次總是記不得，於是選擇總結一下，順便分享給大家。

基本選擇器

$("*") 選取頁面所有元素

$("p,div") 選取p,div標籤元素

$(".con")選取class="con"的元素

$("#one") 選取id="one"的元素

層次選擇器

parent>child 選取直系子元素。

prev+next 選取下一個兄弟元素，相當於next();

prev~siblings 選取prev的所有兄弟元素，等同於nextAll();

基礎過濾選擇器

$("p:first") 選取匹配的第一個元素

$("p:last") 選取匹配的最後一個元素

$("p:not( div )")去除與給定選擇器匹配的元素

$("tr:event")匹配索引值為偶數的元素，從0開始計數；

$("tr:odd") 匹配索引值為奇數的元素，從0開始計數；

$("tr:eq()")匹配一個給定索引值的元素，從0開始計數；

$("tr:gt(0)")匹配所有大於給定索引值的元素，從0開始計數；

$("tr:lt(0)")匹配所有小於給定索引值的元素，從0開始計數；

$(":header") 匹配如h1,h2,h3之類的標題元素；

內容過濾選擇器

$("div:contains( hello )")匹配包含給定文本的元素；

$("td:empty")匹配所有不包含子元素或者文本的空元素；

$("div:has(p)")匹配含有選擇器匹配的元素的元素；

$("td:parent")匹配含有子元素或者文本的元素；

屬性過濾選擇器

$("input[name= news ]")匹配name=news的元素；

$("input[name!= news ]")匹配name不等於news的元素；

$("input[name^= news ]")匹配name值以news開頭的元素；

$("input[name$= news ]")匹配name值以news結尾的元素；

$("input[name*= news ]")匹配name值包含news的元素；

$("input[id][name$= news ]")匹配屬性id,屬性name以news結尾的元素

子元素過濾選擇器

$("ul li:nth-child(2)")匹配其父元素下的第二個字元素;

$("ul li:first-child")匹配第一個子元素；

$("ul li:last-child")匹配最後一個子元素；

$("ul li:only-child")匹配某個父元素中唯一的子元素；

表單元素選擇器

$(":input")匹配所有input,textarea,select,和button元素；

$("input:text")匹配所有的單行文本框；

$("input:password")匹配所有密碼框；

$("input:checked")匹配所有被選中的元素；

$("input:radio")匹配所有單選按鈕；

$("input:checkbox")匹配所有複選框；

$("input:submit")匹配所有提交按鈕；

$("input:image")匹配所有圖像域；

$("input:reset")匹配所有重置按鈕；

$("input:button")匹配所有按鈕；

$("input :file")匹配所有文件域；

$("input:hidden")匹配所有不可見元素；

編輯 | 碼哥

圖片源於網路，版權歸原作者所有

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！

請您繼續閱讀更多來自 程序員之家 的精彩文章: