JQuery篩選器全系列介紹

基本選擇器：

#id　　　　　　　　　　　　根據Id匹配一個元素

$("#div1").css("background-color","red");　　//匹配id爲"div1"的元素

<div id="div1">我是一個DIV</div>   //會選中該div元素

.class　　　　　　　　　　  根據給定的類名匹配一個元素

$(".important").removeClass();　　　　//匹配全部class="important"元素

p class="important">我是一個p元素</p>

element　　　　　　　　　  根據元素名匹配一個元素

$("p").css("background-color","red");　　　　//匹配頁面全部的p元素

<p>我是一個P</p>

*　　　　　　　　　　　　　匹配全部元素

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

selecttor1,selector2　　　  並集，返回兩個選擇器匹配到的元素

$(".div1,#span1").css("background-color","red");

層次選擇器：

ancestor descendant　　　根據祖先匹配全部的後代元素

 

$("#div1 span").css("color","red");

<div id="div1">

<span>我是span1</span>　　　　　***會被選中，是#div1的後代span

<div>

<span>我是span3</span>　　　***會被選中，也是#div1的後代span

</div>

</div>

<span>我是span2</span>　　　　　　　***不會被選中，不是#div1的後代

parent>child　　　　　　　 根據父元素匹配全部的子元素，直接後代

$("#div1 > span").css("color","red");

<div id="div1">

<span>我是span1</span>　　　　　***會被選中，是#div1的子元素span

<div>

<span>我是span3</span>　　　***不會被選中，是#div1的後代元素，但不是直接子元素

</div>

</div>

<span>我是span2</span>　　　　　　　***不會被選中，不是#div1的子元素

prev+next　　　　　　　　 匹配下一個兄弟元素 至關於next()方法

$(".p1 + p").css("color","red");　　　　//此行代碼至關於$(".p1").next().css("color","red");

<div>

<p>我是第一個P</p>　　　　　　***不會被選中，是class爲p1的上一個了

<p class="p1">我是第二個P</p>　　***prev自己並不會被選中

<p>我是第三個P</p>　　　　　　***會被選中，是class爲p1的下一個相鄰元素

<p>我是第四個P</p>　　　　　　***不會被選中，不是class爲p1的下一個，是下二個了

</div>

prev~siblings　　　　　　   匹配後面的兄弟元素 至關於nextAll()方法     siblings()方法爲匹配全部的兄弟元素

$(".p1 + p").css("color","red");　　　　//此行代碼至關於$(".p1").nextAll("p").css("color","red");

<div>

<p>我是第一個P</p>　　　　　　***不會被選中，是class爲p1前面的元素

<p class="p1">我是第二個P</p>　　***prev自己並不會被選中

<p>我是第三個P</p>　　　　　　***會被選中，是class爲p1後面的P兄弟元素

<p>我是第四個P</p>　　　　　　***會被選中，也是class爲p1後面的P兄弟元素

</div>

選中全部的兄弟元素 siblings() 方法

$(".p1").sibings("p").css("color","red");

<div>

<p>我是第一個P</p>　　　　　　***會被選中，是class爲p1的P兄弟元素

<p class="p1">我是第二個P</p>　　***prev自己並不會被選中

<p>我是第三個P</p>　　　　　　***會被選中，是class爲p1的P兄弟元素

<p>我是第四個P</p>　　　　　　***會被選中，也是class爲p1的P兄弟元素

</div>

簡單過濾選擇器：

:first或first()　　　　　　　 匹配第一個元素

$("#div1 > p:first").css("color","red")　　//此行代碼至關於　　

$("#div1 > p").first().css("color","red");

<div id="div1">

<p>我是第一個P</p>　　　***會被選中，是id爲#div1下的第一個P元素

<p>我是第二個P</p>　　　***不會被選中，是第二個P元素了

<p>我是第三個P</p>　　　***不會被選中，是第三個P元素了

</div>

:last或last()　　　　　　  　匹配最後一個元素

$("#div1 > p:last").css("color","red");　　　　//此行代碼至關於　

$("#div1 > p").last().css("color","red");

<div id="div1">

<p>我是第一個P</p>　　　***不會被選中，是第一個

<p>我是第二個P</p>　　　***不會被選中，是第二個

<p>我是第三個P</p>　　　***會被選中，id爲#div1下的最後一個P元素

</div>

:not(selector)　　　　　　  匹配非selector能匹配到的元素

$("#div1 > p:not('.p1')").css("color","red");

<div id="div1">

<p>我是第一個P</p>　　　　　　　　***會被選中

<p class="p1">我是第二個P</p>　　***不會被選中，由於符合了:not裏的條件 class="p1"

<p>我是第三個P</p>　　　　　　　　***會被選中

</div>

:even　　　　　　　　　　  匹配索引值爲偶數的元素，索引號從0開始

$("#div1 > p:even").css("color","red");

<div id="div1">

<p>我是第一個P</p>　　***會被選中，索引號0

<p>我是第二個P</p>　　***不會被選中，索引號1

<p>我是第三個P</p>　　***會被選中，索引號2

<p>我是第四個P</p>　　***不會被選中，索引號3

<p>我是第五個P</p>　　***會被選中，索引號4

</div>

:odd　　　　　　　　 　　　匹配索引值爲奇數的元素，索引號從0開始

$("#div1 > p:odd").css("color","red");

<div id="div1">

<p>我是第一個P</p>　　***不會被選中，索引號0

<p>我是第二個P</p>　　***會被選中，索引號1

<p>我是第三個P</p>　　***不會被選中，索引號2

<p>我是第四個P</p>　　***會被選中，索引號3

<p>我是第五個P</p>　　***不會被選中，索引號4

</div>

:eq(index)　　　　　 　　　匹配指定索引號的元素，索引號從0開始

$("#div1 > p:eq(1)").css("color","red");

<div id="div1">

<p>我是第一個P</p>　　***不會被選中，索引號爲0

<p>我是第二個P</p>　　***會被選中，索引號爲1

<p>我是第三個P</p>　　***不會被選中，索引號爲2

<p>我是第四個P</p>　　***不會被選中，索引號爲3

</div>

:gt(index)　　　　　  　　　匹配索引號大於給定索引值的元素，索引號從0開始

$("#div1 > p:gt(1)").css("color","red");

 

<div id="div1">

<p>我是第一個P</p>　　***不會被選中，索引號爲0

<p>我是第二個P</p>　　***不會被選中，索引號爲1

<p>我是第三個P</p>　　***會被選中，索引號爲2大於1了

<p>我是第四個P</p>　　***會被選中，索引號爲3大於1了

</div>

:lt(index)　　　　　　  　　 匹配索引號小於給定索引值的元素，索引號從0開始

$("#div1 > p:lt(1)").css("color","red");

<div id="div1">

<p>我是第一個P</p>　　***會被選中，索引號爲0，小於1

<p>我是第二個P</p>　　***不會被選中，索引號爲1，不小於1

<p>我是第三個P</p>　　***不會被選中，索引號爲2大於1了

<p>我是第四個P</p>　　***不會被選中，索引號爲3大於1了

</div>

:header　　　　　　　　　　匹配全部的標題元素  h1 h2 h3 h4 h5 h6

$("#div1 > :header").css("color","red");

<div id="div1">

<p>我是一個P</p>　　　　　　***不會被選中，不是標題類型元素

<span>我是一個span</span> ***不會被選中，不是標題類型元素

<h1>我是一個h1</h1>　　　　***會被選中，h1是標題類型元素

<h6>我是一個h6</h6>　　　　***會被選中，h6是標題類型元素

</div>

:animated　　　　　　　　  匹配全部正在執行動畫的元素

內容過濾選擇器：

:contains(text)　　　　　　匹配包含給定文本的元素

$("p:contains('三')").css("background-color","red");

<div>

<p>我是第一個P</p>　　***不會被選中

<p>我是第二個P</p>　　***不會被選中

<p>我是第三個P</p>　　***會被選中，文本里包含了"三"

</div>

:empty　　　　　　　　　　匹配全部不包含子元素或者文本的空元素

$(:empty).text("我是空元素");

<div>

<div><span></span></div>　　***div不會被選中，由於有<span></span>子元素。

<span></span>會被選中，由於沒有子元素也沒有文本元素

<p></p>　　　　　　　　　　　　***會被選中，沒有子元素，也沒有文本元素

<span>我是一個span</span>　　***不會被選中,有文本元素

</div>

:has(selector)　　　　　　  匹配後代中含有selector能匹配上元素的元素

$("div:has('span')").css("background-color","red");

 

<div>　　　　　　　　　　***此div會被選中，由於他的有孫子span

我是最外層div　　　　

<div><p>我是一個P</p></div>　　　　***此div不會被選中，由於不含有後代span

<div><span>我是一個span</span></div>　　***此div會被選中，含有後代span

</div>

:parent　　　　　　　　　　匹配含有子元素或者文本的元素

$(":parent").text("不含子元素或文本元素");

<div>我是一個div</div>　　***不會被選中，由於含有文本元素

<div><span>我是一個span</span></div>　　***不會被選中，含有子元素。

<div></div>　　　　　　　　***會被選中，不含子元素也不含有文本元素

可見性過濾選擇器：

:hidden　　　　　　　　　　匹配不可見元素，或者type="hidden"的元素　含有css樣式:display:"none";的元素，不管CSS是內聯，導入，連接式

$("span:hidden").css("display","block");

$("input:hidden").val("我是jQuery");

<span style="display:none">我是一個span</span>　　***會被第一條規則選中

<input type="hidden" value="我是一個隱藏的input" />　***會被第二條jQuery選中

<span class="span1">我是span1</span>　　　　　　　***會被第一條jQuery選中

:visible　　　　　　　　　　 獲取全部的可見元素

屬性過濾選擇器：

[attribute]　　　　　　　　 匹配含有給定屬性的元素

$("div[class]").css("font-size","30px");

<div>

<div class="div1">我是第一個div</div>　　***會被選中，含有class屬性

<div>我是第二個div</div>　　　　　　　　 ***不會被選中，沒含有class屬性。

</div>

[attribute=value]　　　　   匹配含有屬性=value的元素

$("div[class=div1]").css("font-size","30px");

<div>

<div class="div1">我是div1</div>　　***會被選中，class屬性等於div1。

<div class="div2">我是div2</div>　　***不會被選中,class屬性不等於div1。

</div>

[attribute!=value]　　　　  匹配含有屬性但!=value的元素

$("div[class!=div1]").css("color","red");

<div>我是一個沒有class屬性的div</div>　                        ***會被選中，沒有class屬性天然class屬性不等於div1

<div class="div2">我是一個class屬性等於div2的div</div>　　 ***會被選中，class屬性不等於div1

<div class="div1">我是一個class屬性等於div1的元素</div>　　***不會被選中，class屬性等於div1

[attribute^=value]　　　　 匹配屬性值是以value開始的元素

$("div[class^=div]").css("color","red');

<div class="div1">我是div1</div>　　***會被選中，class屬性以div開始

<div class="div2">我是div2</div>　　***會被選中，class屬性以div開始

<div class="abc">我是div3</div>　　 ***不會被選中，class屬性不以div開始

[attribute$=value]　　　　  匹配屬性值是以value結束的元素

$("div[class$=div]").css("color","red");

<div class="1div">我是第一個div</div>　　***會被選中，class屬性以div結束

<div class="2div">我是第二個div</div>　　***會被選中，class屬性以div結束

<div class="abc">我是第三個div</div>　　 ***不會被選中，class屬性不以div結束

[attribute*=value]　　　　  匹配屬性值包含某些值的元素，不分先後，中間有也算

$("div[class*=div]").css("font-size","30px");

<div class="div1">我是div1</div>　　***會被選中，屬性值包含div

<div class="1div">我是1div</div>　　***會被選中，屬性值包含div

<div class="1div1">我是1div1</div>  ***會被選中，屬性值包含div

<div class="abc">我是abc</div>　　　***會被選中，屬性值包含div

[selector][selector]　　　　 匹配屬性選擇器的交集

$("div:[class][title=title1]").css("background-color","red");

<div class="div1" title="title1">我是div1,title1</div>　　***會被選中，有class屬性且title屬性等於title1

<div class="div1" title=title2>我是div1,title2</div>　　　***不會被選中，雖然有class屬性，可是title屬性不等於title2

<div class="div3">我是div3</div>　　　　　　　　　　　***不會被選中，沒有title屬性

子元素過濾選擇器：

:nth-child(eq|even|odd|index)　　獲取全部父元素特定位置的子元素

$("div>p:nth-child(1)").css("background-color","red");　　//選中每個父元素下的div下的第一個直接P元素

<div>

<p>我是第一個P</p> 　　*** 會被選中，是div下的第一個子P元素

<p>我是第二個P</p> 　　*** 不會被選中，是第二個了

</div>

<div>

<P>我是第三個P</P> 　　*** 會被選中，是div下的第一個子P元素

<P>我是第四個P</P> 　　*** 不會被選中，是第二個了

</div>

:first-child　　　　　　　　　　　 獲取全部父元素下的第一個子元素

$("p:first-child").css("background-color","red");　　　　//選中每個父元素下的第一個P元素

<div>

<p>我是第一個P</p> 　　*** 會被選中，是div下的第一個子P元素

<p>我是第二個P</p> 　　*** 不會被選中，是第二個了

</div>

<ul>

<li>

<P>我是第三個P</P> 　　*** 會被選中，是div下的第一個子P元素

<P>我是第四個P</P> 　　*** 不會被選中，是第二個了

</li>

</ul>

:last-child　　　　　　　　　　　 獲取全部父元素下最後一個子元素

$("p:last-child").css("background-color","red");　　　　//選中每個父元素下的第一個P元素

<div>

　　<p>我是第一個P</p> 　　*** 不會被選中，不是某父元素的最後一個子P元素

　　<p>我是第二個P</p> 　　*** 會被選中，是div元素下的最後一個子P元素

</div>

<ul>

　　<li>

　　　　<P>我是第三個P</P> 　　*** 不會被選中，不是某父元素下的最後一個子P元素

　　　　<P>我是第四個P</P> 　　*** 會被選中，是div元素下的最後一個P元素

　　</li>

</ul>

:only-child　　　　　　　　 獲取全部父元素下惟一的一個元素

$("p:only-child").css("background-color","red");

<div>

<p>我是第一個P</p>　　***不會被選中，不是某父元素下的惟一一個P元素

<p>我是第二個P</p>　　***不會被選中，不是某父元素下的惟一一個P元素

</div>

<div>

<span>我是一個span</span>　　***不會被選中，不是某父元素下的惟一一個P元素

<p>我是第三個P</p>　　　　　　 ***不會被選中，不是某父元素下的惟一一個span元素

</div>

<div>

<p>我是一個P</p>　　　　***會被選中，是div下的惟一一個P元素

</div>

表單對象屬性過濾選擇器：

:enabled　　　　　　　　    獲取表單中全部可用的元素

$("input:enabled").val("jQuery表單對象屬性過濾選擇器");

<div>

<input type="text" value="我是一個可用的input" />　　　　***會被選中，是一個可用的表單元素

<input type="text" value="我是一個不可用的input" disabled="disabled" />　　***不會被選中，是不可用的表單元素

</div>

:disabled　　　　　　　　　 獲取表單中全部不可用的元素

$("input:enabled").val("jQuery表單對象屬性過濾選擇器");
<div>

<input type="text" value="我是一個可用的input" />　　　　***不會被選中，是一個可用的表單元素

<input type="text" value="我是一個不可用的input" disabled="disabled" />　　***會被選中，是不可用的表單元素   //注意，jQuery可以操做不可用　　　的表單元素

</div>

:checked　　　　　　　　　獲取表單張全部被選中的元素

$("input:checked").val("jQuery");

<div>

<input type="checkbox" checked="checked" value="1">選中

<input type="checkbox" value="0">未選中

</div>

:selected　　　　　　　　   獲取表單中全部被選中的option的元素

alert($("input:selected").text(""));　　//獲取全部被選中的option元素

<div>

<selected>

<option value="0" selected="selected">option1</option>　　***會被選中

<option value="1">option2</option>　　　　　　　　　　***不會被選中，由於本option不是選中的。

</selected>

</div>

表單選擇器：

:input　　　　　　　　　　 獲取全部的表單元素<input開頭的，還有textarea select

$(":input").val("jQuery");

 

<div>

<textarea>我是一個兵</textarea>　　***會被選中

<input text="button" value="" />　　***會被選中

<p>我是一個P</p>　　　　　　　　　　***不會被選中

</div>

:text　　　　　　　　　　   獲取全部的單行文本框　　<input type="text" />

$(":text").val("jQuery");

<div>

<input type="text" value="我是一個input" />　　***會被選中，是單行文本框

<input type="button" value="肯定" />　　　　　 ***不會被選中，不是單行文本框

<textarea>我是一個textarea</textarea>　　　　 ***不會被選中，不是單行文本框

</div>

:password　　　　　　　　獲取全部的密碼框元素      <input type="password" />

$(":password").hide(3000);

<div>

<input type="password" />　　　　***會被選中，是密碼框

<input type="text" value="我是一個文本框" />　　***不會被選中，是文本框

</div>

:radio　　　　　　　　　　 獲取全部的單選按鈕　　　<input type="radio" />

$(":radio").hide(3000);

<div>

<input type="radio" />我是一個radio　　***單選按鈕會被選中，可是後面的文字不會

<input type="text" />我是一個文本框　　***不會被選中

</div>

:checkbox　　　　　　　　 獲取全部的複選框　　　　<input type="checkbox">

$(":checkbox").hide(3000);

<div>

<input type="checkbox" />我是一個checkbox　　***複選框會被選中，文本不會

<input type="text" />我是一個文本框　　　　　　 ***不會被選中，不是複選框

</div>

:submit　　　　　　　　　 獲取全部的提交按鈕　　　<input type="submit" />

$(":submit").hide(3000);

<div>

<input type="submit" value="提交">　　　　　　***會被選中，是提交按鈕

<input type="text" value="我是一個文本框">　　 ***不會被選中，不是提交按鈕

</div>

:image　　　　　　　　　　獲取全部的圖像按鈕　　 <input type="image" />

$(":image").attr("title","我是一個圖片按鈕");

 

<div>

<input type="image" src="http://www.baidu.com/img/baidu_sylogo1.gif" />　　***會被選中

<input type="text" value="我是一個文本框" />　　　　　　***不會被選中，不是圖片按鈕

</div>

:reset　　　　　　　　　　獲取全部的重置按鈕　　　 <input type="reset" />

$(":reset").hide(3000);

<div>

<input type="reset" value="重置">　　　　　　***會被選中，是重置按鈕

<input type="text" value="我是一個文本框">　 ***不會被選中，不是重置按鈕

</div>

:button　　　　　　　　    獲取全部的按鈕　　　　　<input type="button">

$(":button").hide(3000);

<div>

<input type="button" value="確認" />　　　　　　***會被選中，是按鈕元素

<input type="text" value="我是一個文本框" />　　 ***不會被選中，不是按鈕元素

</div>

:file　　　　　　　　　　　 獲取全部的文件上傳框　　<input type="file" />

$(":file").hide(3000);

<div>

<input type="file" title="file" />

<input type="text" value="我是一個文本框" />

</div>

 

轉至：https://www.cnblogs.com/zhouguowei/p/5194754.html