摘要：選擇器，若未作特別說(shuō)明，獲取的都是元素集合。過(guò)濾器名語(yǔ)法說(shuō)明選取所有不可見(jiàn)元素選取所有可見(jiàn)元素注意過(guò)濾器一般是包含的內(nèi)容為樣式為表單類(lèi)型為和的元素。四子元素過(guò)濾器子元素過(guò)濾器的過(guò)濾規(guī)則是通過(guò)父元素和子元素的關(guān)系來(lái)獲取相應(yīng)的元素。

轉(zhuǎn)自個(gè)人博客
本來(lái)是多帶帶整理了一個(gè)CSS選擇器的，但是在jQuery中基本都有對(duì)應(yīng)的，所以就不發(fā)了。
jQuery選擇器，若未作特別說(shuō)明，獲取的都是元素集合。

模仿的是CSS選擇器，只不過(guò)在使用jQuery選擇器時(shí)，我們首先必須使用“$()”函數(shù)來(lái)包裝我們的 CSS 規(guī)則。
而CSS 規(guī)則作為參數(shù)傳遞到j(luò)Query對(duì)象內(nèi)部后，再返回包含頁(yè)面中對(duì)應(yīng)元素的 jQuery 對(duì)象。隨后可以進(jìn)行節(jié)點(diǎn)操作，例如：$("#box").css("color", "red"); 。

那么除了 ID 選擇器之外，還有兩種基本的選擇器，分別為：元素標(biāo)簽名和類(lèi)(class)：

我們可以采用jQuery核心自帶的一個(gè)屬性length來(lái)查看返回的元素個(gè)數(shù)。(size()方法已經(jīng)棄用)

在實(shí)踐過(guò)程中發(fā)現(xiàn)使用多個(gè)id時(shí)，css居然都會(huì)高亮，jQuery沒(méi)有這個(gè)問(wèn)題。（標(biāo)準(zhǔn)寫(xiě)明一個(gè)頁(yè)面只能有一個(gè)id）

jQuery選擇器的寫(xiě)法與CSS選擇器十分類(lèi)似，只不過(guò)他們的功能不同。CSS 找到元素后添加的是單一的樣式，而jQuery則添加的是動(dòng)作行為。重要的是jQuery兼容性更好，例如：

#box > p { //CSS 子選擇器，IE6 不支持
color:red;
}
$("#box > p").css("color","red"); //jQuery 子選擇器，兼容了 IE6

jQuery選擇器支持CSS1、CSS2的全部規(guī)則，支持CSS3部分實(shí)用的規(guī)則，同時(shí)它還有少量獨(dú)有的規(guī)則而jQuery選擇器在獲取節(jié)點(diǎn)對(duì)象的時(shí)候不但簡(jiǎn)單，還內(nèi)置了容錯(cuò)功能區(qū)別如下：

$("#pox").css("color", "red"); //不存在ID為pox的元素，也不報(bào)錯(cuò)
document.getElementById("pox").style.color = "red"; //報(bào)錯(cuò)了

如何判斷jQuery是否調(diào)取不存在的元素：

if ($("#pox").length > 0) { //jQuery對(duì)象，判斷元素包含數(shù)量即可
    $("#pox").css("color", "red");
}
//或者轉(zhuǎn)化成DOM對(duì)象方式判斷
if ($("#pox")[0]) {}; //通過(guò)數(shù)組下標(biāo)也可以獲取 DOM 對(duì)象
if ($("#pox").get(0)) {} ;

在簡(jiǎn)單選擇器中，我們了解了最基本的三種選擇器：元素標(biāo)簽名、ID 和類(lèi)(class)。那么在基礎(chǔ)選擇器外，還有一些進(jìn)階和高級(jí)的選擇器方便我們更精準(zhǔn)的選擇元素

目前介紹的六種選擇器，在實(shí)際應(yīng)用中，我們可以靈活的搭配，使得選擇器更加的精準(zhǔn)和快速：

$("#box p, ul li *").css("color", "red");//組合了多種選擇器

警告：在實(shí)際使用上，通配選擇器一般用的并不多，一般只用在局部的環(huán)境內(nèi)。因?yàn)樵诖笸ㄅ渖希热纾?b>$("*")，這種使用方法效率很低，影響性能，建議盡可能的少用。(CSS上也很少用)

還有一種選擇器，可以在ID和類(lèi)(class)中指明元素前綴，比如：

$("div.box"); //限定.box獲取到的元素標(biāo)簽名必須是div
$("p#box div.side"); //同上

如同CSS一樣，類(lèi)(class)有一個(gè)特殊的模式，就是同一個(gè)DOM節(jié)點(diǎn)可以聲明多個(gè)類(lèi)(class)。那么對(duì)于這種格式，我們有多class選擇器可以使用，但要注意和class群組選擇器的區(qū)別。

.box.pox { //雙 class 選擇器獲取頁(yè)面中class同時(shí)有.box.pox的元素
    color:red;
}
$(".box.pox").css("color", "red"); //用多個(gè)class進(jìn)行精準(zhǔn)確定

注意要點(diǎn)：

只追求必要的確定性。當(dāng)選擇器篩選越復(fù)雜，jQuery內(nèi)部的選擇器引擎處理字符串的時(shí)間就越長(zhǎng)。

在前面學(xué)習(xí)了六種最常規(guī)的選擇器，一般來(lái)說(shuō)通過(guò)這六種選擇器基本上可以解決所有DOM節(jié)點(diǎn)對(duì)象選擇的問(wèn)題。但在很多特殊的元素上，比如父子關(guān)系的元素，兄弟關(guān)系的元素，特殊屬性的元素等等并不好獲取，下面就來(lái)說(shuō)說(shuō)這些高級(jí)選擇器：

其實(shí)后代選擇器我們?cè)谶M(jìn)階選擇器里面已經(jīng)有過(guò)使用，這里為什么要再提起呢?

因?yàn)樗鼘儆趯哟芜x擇器，在高級(jí)選擇器中，jQuery為這樣的選擇器都提供了一個(gè)相對(duì)應(yīng)的方法。

jQuery為后代選擇器提供了一個(gè)等價(jià)的find(）方法:

$("#box p").css("color", "red"); //后代選擇器
$("#box").find("p").css("color","red");//和后代選擇器等價(jià)

jQuery為子選擇器提供了一個(gè)等價(jià)的children()方法

$("#box > p").css("color","red");//子選擇器，孫子失明
$("#box").children("p").css("color","red");//和子選擇器等價(jià)

jQuery為next選擇器提供了一個(gè)等價(jià)的next()方法：

$("#box+p").css("color","red");//下一個(gè)同級(jí)節(jié)點(diǎn)
$("#box").next("p").css("color","red");//和next選擇器等價(jià)

jQuery為nextAll選擇器提供了一個(gè)等價(jià)的方法nextAll()：

$("#box ~ p").css("color","red");//后面所有同級(jí)節(jié)點(diǎn)
$("#box").nextAll("p").css("color", "red"); //和 nextAll 選擇器等價(jià)

需要注意的是：

層次選擇器對(duì)節(jié)點(diǎn)的層次都是有要求的，比如子選擇器，有子節(jié)點(diǎn)才可以被選擇到，孫子節(jié)點(diǎn)和重孫子節(jié)點(diǎn)都無(wú)法選擇到。next和nextAll選擇器，必須是同一個(gè)層次的后一個(gè)和后N個(gè)，不在同一個(gè)層次就無(wú)法選取到了。

在 find()、children()、next()和nextAll()和這四個(gè)方法中，如果不傳遞參數(shù)，就相當(dāng)于傳遞了“*”，選擇所有符合條件的元素，建議盡量保持參數(shù)的傳遞

jQuery獨(dú)有補(bǔ)充方法。CSS未含有

$("#box").prev("p").css("color","red");//同級(jí)上一個(gè)元素
$("#box").prevAll("p").css("color","red");//同級(jí)上面所有的元素

$("#box").prevUntil("p").css("color","red");//同級(jí)上非指定元素選定，遇到則停止
$("#box").nextUntil("p").css("color","red");//同級(jí)下非指定元素選定，遇到則停止

$("#box").siblings("p").css("color","red");//siblings()方法正好集成了prevAll()和nextAll()兩個(gè)功能的效果，及上下相鄰的所有元素進(jìn)行選定：

擴(kuò)展：

$("p", "#box");//jQuery會(huì)自動(dòng)把這條語(yǔ)句轉(zhuǎn)成$("#box").find("p")，這會(huì)導(dǎo)致一定的性能損失。

$("p", $("#parent"));//jQuery內(nèi)部會(huì)也將這條語(yǔ)句轉(zhuǎn)成$("#box").find("p")

這里，推薦使用jQuery提供的方法。使用“+”或“~”從字面上沒(méi)有next和nextAll更加語(yǔ)義化，更加清晰，jQuery的方法更加豐富，提供了相對(duì)的prev和prevAll。
并且有時(shí)需要能夠靈活的拆分和組合選擇器。所以，如果jQuery提供了獨(dú)立的方法來(lái)代替某些選擇器的功能，推薦優(yōu)先使用獨(dú)立的方法。

注意|應(yīng)該是|，因?yàn)閙arkdown表格解析的問(wèn)題，所以用來(lái)替代

注意：:focus過(guò)濾器，必須是網(wǎng)頁(yè)初始狀態(tài)的已經(jīng)被激活焦點(diǎn)的元素才能實(shí)現(xiàn)元素獲取。而不是鼠標(biāo)點(diǎn)擊或者Tab鍵盤(pán)敲擊激活的。

$("input").get(0).focus(); //先初始化激活一個(gè)元素焦點(diǎn)
$(":focus").css("background", "red"); //被焦點(diǎn)的元素

jQuery為最常用的過(guò)濾器提供了專(zhuān)用的方法，如下：

$("li").eq(2).css("background","#ccc");//元素li的第三個(gè)元素，負(fù)數(shù)從后開(kāi)始
$("li").first().css("background","#ccc");//元素li的第一個(gè)元素
$("li").last().css("background","#ccc");//元素li的最后一個(gè)元素
$("li").not(".red").css("background","#ccc");//元素li不含class為red的元素

內(nèi)容過(guò)濾器的過(guò)濾規(guī)則主要是包含的子元素或文本內(nèi)容上。

jQuery 提供了一個(gè) has()方法來(lái)提高:has 過(guò)濾器的性能：

$("ul").has(".red").css("background", "#ccc"); //選擇子元素含有 class 是 red 的元素

jQuery提供了一個(gè)名稱(chēng)和:parent相似的方法，但這個(gè)方法并不是選取含有子元素或文本的元素，而是獲取當(dāng)前元素的父元素，返回的是元素集合。

$("li").parent().css("background","#ccc");//選擇當(dāng)前元素的父元素
$("li").parents().css("background","#ccc");//選擇當(dāng)前元素的父元素及祖先元素（追溯到html）
$("li").parentsUntil("html").css("background","#ccc");//選擇當(dāng)前元素遇到html父元素停止（會(huì)在body上加）

可見(jiàn)性過(guò)濾器根據(jù)元素的可見(jiàn)性和不可見(jiàn)性來(lái)選擇相應(yīng)的元素。

注意：:hidden過(guò)濾器一般是包含的內(nèi)容為：CSS樣式為display:none、input表單類(lèi)型為type="hidden"和visibility:hidden的元素。

子元素過(guò)濾器的過(guò)濾規(guī)則是通過(guò)父元素和子元素的關(guān)系來(lái)獲取相應(yīng)的元素。

jQuery 在選擇器和過(guò)濾器上，還提供了一些常用的方法，方便我們開(kāi)發(fā)時(shí)靈活使用。

is:

$(".red").is("li"); //選擇器，檢測(cè)class為是否為 red
$(".red").is($("li")); //jQuery 對(duì)象集合，同上
$(".red").is($("li").eq(2)); //jQuery 對(duì)象單個(gè)，同上
$(".red").is($("li").get(1)); //DOM 對(duì)象，同上

還可以進(jìn)行各種自定義判斷：

  
list item 1
  
list item 2
  
list item 3

當(dāng)用戶(hù)點(diǎn)擊的是第一個(gè)列表項(xiàng)中的單詞"list"或第三個(gè)列表項(xiàng)中的任何單詞時(shí)，被點(diǎn)擊的列表項(xiàng)會(huì)被設(shè)置為紅色背景。
不過(guò)，當(dāng)用戶(hù)點(diǎn)擊第一個(gè)列表項(xiàng)中的item1或第二個(gè)列表項(xiàng)中的任何單詞時(shí)，都不會(huì)有任何變化，這是為這上面的情況中，事件的目標(biāo)分別是 是 。

$("li").slice(0,2).css("color", "red"); //前三個(gè)變成紅色

$("li").filter(".red").css("background","#ccc");//選擇li的class為red的元素
$("li").filter(".red,:first,:last").css("background","#ccc");//增加了首尾選擇
//特殊要求函數(shù)返回
$("li").filter(function(){
    return $(this).attr("class")=="red" && $(this).attr("title")=="列表3";
}).css("background", "#ccc");

//val()是jQuery用來(lái)獲取表單元素文本內(nèi)容的一個(gè)方法
$("input").val(); //元素名定位，默認(rèn)獲取第一個(gè)
$("input").eq(1).val(); //同上，獲取第二個(gè)
$("input[type=password]").val();//選擇type為password的字段
$("input[name=user]").val(); //選擇 name 為 user 的字段

$(":text[name=user]).size(); //獲取單行文本框 name=user 的元素