Jquery選擇器分類(基本選擇器，層次選擇器，過濾選擇器，表單選擇器)
阿新 • • 發佈：2019-01-07
Jquery選擇器分類：基本選擇器，層次選擇器，過濾選擇器，表單選擇器。
基本選擇器
說明：通過元素id、class和標籤名等來查詢DOM元素
1.id選擇器：$("#test");//選取id為test的元素
2.類選擇器：$(".test");//選取所有class為test的元素,其他：$('div.mini')
3.標籤選擇器:$("div");//選取所有的<div>元素
4.群組選擇器:$("p,div,.test");//選取所有<P>,<div>和擁有class為test的一組元素
5.通配選擇器:$("*"); // 通配選擇器，匹配頁面中所有元素
層次選擇器
說明：通過DOM元素之間的層次關係獲取特定元素，如後代元素、子元素、相鄰元素、兄弟元素
1.$(“div span”);//選取<div>裡所有的<span>元素
2.$(“div>span”);//選取<div>下元素名為<span>的子元素
3.$(‘.one+div');//選取class為one的下一個<div>元素（相鄰元素）
4.$(‘#two~div') ;//選取id為two的元素後面所有<div>兄弟元素
注意：
$(‘prev+next')選擇器與next()方法的等價關係
$(‘.one+div') 等價於
$(‘prev~siblings')選擇器與nextAll()方法的等價關係
$(‘.one~div') 等價於 $(“.one”).nextAll(“div”)
表單選擇器
1.表單物件屬性過濾選擇器
1.1:$(“#form1:enabled”) ;//選取id為”form1”的表單內的所有可用元素
1.2:$(“#form1:disabled”) ;//選取id為”form1”的表單內的所有不可用元素
1.3:$(“input:checked”);//選取所有被選中的<input>元素
1.4:$(“select:selected”);//選取所有被選中的選項元素
2.表單物件屬性過濾示例
2.1：$(“:input”);// 選取所有<input>、<textarea>、<select>和<button>元素
2.2:$(“:text”);//選取所有的單行文字
2.3:$(“: password”);//選取所有的密碼框
2.4:$(“:radio”);//選取所有的單選框
2.5:$(“:checkbox”);//選取所有的多選框
2.6:$(“:submit”);//選取所有的提交按鈕
2.7:$(“:image”);//選取所有的影象按鈕
2.8:$(“:reset”);//選取所有的重置按鈕
2.9:$(“:button”);//選取所有按鈕
2.10:$(:file);//選取所有的上傳域
2.11:$(“:hidden”);//選取所有不可見元素
過濾選擇器
說明：主要是通過特定的過濾選擇器規則來篩選出所需的DOM元素,選擇器都以一個冒號（:）開頭
1.基本過濾選擇器：
1.1：$(“div:first”);//選取所有<div>元素中第一個<div>元素
1.2: $(“div:last”);//選取所有<div>元素中最後一個<div>元素
1.3: $(“input:not(.myClass)”);// 選取class為不是myClass的<input>元素
1.4: $(“input:even”);//選取索引是偶數的<input>元素
1.5: $(“input:odd”);//選取索引是奇數的<input>元素
1.6: $(“input:eq(1)”;//選取索引為1的<input>元素
1.7: $(“input:gt(1)”);//選取索引大於1的<input>元素（注：大於1，而不包括1）
1.8: $(“input:lt(1)”);//選取索引小於1的<input>元素（注：小於1，而不包括1）
1.9: $(“:header”);//選取網頁中所有的<h1>，<h2>，<h3>……
1.10: $(“div:animated”); //選取正在執行動畫的<div>元素
2. 內容過濾選擇器:
2.1:$(“div:contains(‘我')”);//選取含有文字“我”的<div>元素
2.2:$(“div:empty”);//選取不包含子元素（包括文字元素）的<div>空元素
2.3:$(“div:has(p)”);// 選取含有<p>元素的<div>元素
2.4:$(“div:parent”);// 選取擁有子元素（包括文字元素）的<div>元素
3.可見性過濾選擇器:
3.1:$(“:hidden”);//選取所有不可見的元素。
包括<input type=”hidden”>，<div style=”disply:none;>和<div style=”visibility:hidden;”>等元素。如果只想選取<input>元素，可以使用$(“input:hidden”)