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

轉自個人博客
本來是多帶帶整理了一個CSS選擇器的，但是在jQuery中基本都有對應的，所以就不發(fā)了。
jQuery選擇器，若未作特別說明，獲取的都是元素集合。

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

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

我們可以采用jQuery核心自帶的一個屬性length來查看返回的元素個數。(size()方法已經棄用)

在實踐過程中發(fā)現使用多個id時，css居然都會高亮，jQuery沒有這個問題。（標準寫明一個頁面只能有一個id）

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

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

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

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

如何判斷jQuery是否調取不存在的元素：

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

在簡單選擇器中，我們了解了最基本的三種選擇器：元素標簽名、ID 和類(class)。那么在基礎選擇器外，還有一些進階和高級的選擇器方便我們更精準的選擇元素

目前介紹的六種選擇器，在實際應用中，我們可以靈活的搭配，使得選擇器更加的精準和快速：

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

警告：在實際使用上，通配選擇器一般用的并不多，一般只用在局部的環(huán)境內。因為在大通配上，比如：$("*")，這種使用方法效率很低，影響性能，建議盡可能的少用。(CSS上也很少用)

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

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

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

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

注意要點：

只追求必要的確定性。當選擇器篩選越復雜，jQuery內部的選擇器引擎處理字符串的時間就越長。

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

其實后代選擇器我們在進階選擇器里面已經有過使用，這里為什么要再提起呢?

因為它屬于層次選擇器，在高級選擇器中，jQuery為這樣的選擇器都提供了一個相對應的方法。

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

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

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

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

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

$("#box+p").css("color","red");//下一個同級節(jié)點
$("#box").next("p").css("color","red");//和next選擇器等價

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

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

需要注意的是：

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

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

jQuery獨有補充方法。CSS未含有

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

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

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

擴展：

$("p", "#box");//jQuery會自動把這條語句轉成$("#box").find("p")，這會導致一定的性能損失。

$("p", $("#parent"));//jQuery內部會也將這條語句轉成$("#box").find("p")

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

注意|應該是|，因為markdown表格解析的問題，所以用來替代

注意：:focus過濾器，必須是網頁初始狀態(tài)的已經被激活焦點的元素才能實現元素獲取。而不是鼠標點擊或者Tab鍵盤敲擊激活的。

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

jQuery為最常用的過濾器提供了專用的方法，如下：

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

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

jQuery 提供了一個 has()方法來提高:has 過濾器的性能：

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

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

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

可見性過濾器根據元素的可見性和不可見性來選擇相應的元素。

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

子元素過濾器的過濾規(guī)則是通過父元素和子元素的關系來獲取相應的元素。

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

is:

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

還可以進行各種自定義判斷：

  
list item 1
  
list item 2
  
list item 3

當用戶點擊的是第一個列表項中的單詞"list"或第三個列表項中的任何單詞時，被點擊的列表項會被設置為紅色背景。
不過，當用戶點擊第一個列表項中的item1或第二個列表項中的任何單詞時，都不會有任何變化，這是為這上面的情況中，事件的目標分別是 是 。

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

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

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

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