jQuery選擇器大全-你們趕忙收藏

選擇器做爲Jquery的優點之一，確實讓我感受到了它的強大。Jquery選擇器分爲基本選擇器、層次選擇器、過濾選擇器和表單選擇器，下面我一一介紹這四種選擇器。
   1、基本選擇器
   看了書中關於選擇器的介紹，我才知道，本身平日裏用的大部分都是基本選擇器。基本選擇器中包含id選擇器、class選擇器、標籤選擇器、複合選擇器和「*」選擇器。
   $("#id") 選取全部屬性id等於「id」的元素。
   $(".class_1") 選取全部屬性class爲「class_1」的元素。
   $("p") 選取全部的<p>元素。
   $("div,span,p.myClass") 選取全部<div>、<span>和屬性class爲「myClass」的<p>標籤的一組元素。
   $("*") 選取全部元素。
   2、層次選擇器
   若是想根據個元素之間的層次關係來獲取特定的元素，能夠選擇使用層次選擇器。
   $("div p") 選取<div>裏全部的<p>元素。這個選擇器獲取的是全部後代元素，而不是下一層次的元素（即子元素）。
   $("div>p") 選取<div>裏全部標籤爲<p>子元素。
   $(".class_1+div") 選取屬性class爲「class_1」的下一個<div>同輩元素。
   $(".class_1").next("div") 效果同上。
   $(".class_1~div") 選取屬性class爲「class_1」的元素後面的全部<div>同輩元素。
   $(".class_1").nextAll("div") 效果同上。
   $(".class_1").siblings("div") 與上面兩個選擇器不一樣的是：這個選擇器沒有先後之分，它選取全部同輩的<div>元素。
   3、過濾選擇器
   過濾選擇器都是以冒號(:)開頭，過濾選擇器能夠分爲基本過濾、內容過濾、可見性過濾、屬性過濾、子元素過濾和表單對象屬性過濾選擇器。
   一、基本過濾選擇器
   $("div:first") 選取全部<div>元素中第一個<div>元素。
   $("div:last") 選取全部<div>元素中最後一個<div>元素。
   $("input:not(.class_1)") 選取屬性class不是「class_1」的<input>元素。
   $("input:even") 選取索引是偶數的<input>元素。
   $("input:odd") 選取索引是奇數的<input>元素。
   $("input:eq(1)") 選取索引等於1的<input>元素。
   $("input:gt(1)") 選取索引大於1的<input>元素。（注：大於1，而不包括1）
   $("input:lt(1)") 選取索引小於1的<input>元素。（注：小於1，而不包括1）
   $(":header") 選取網頁中全部的<h1>，<h2>，<h3>...。
   $("div:animated") 選取正在執行動畫的<div>元素。
   $(":focus") 選取當前獲取焦點的元素。
   二、內容過濾選擇器
   $("div:contains('我')") 選取含有文本「我」的<div>元素。
   $("div:empty") 選取不包含子元素（包括文本元素）的<div>空元素。
   $("div:has(p)") 選取含有<p>元素的<div>元素。
   $("div:parent") 選取擁有子元素（包括文本元素）的<div>元素。
   三、可見性過濾選擇器
   $(":hidden") 選取全部不可見元素，$("input:hidden") 選取全部不可見的<input>元素。
   $("div:visible") 選取全部可見的<div>元素。
   四、屬性過濾選擇器
   $("div[id]") 選取擁有屬性id的<div>元素。
   $("div[title=text]") 選取屬性title爲「text」的<div>元素。
   $("div[title!=text]") 選取屬性title不等於「text」的<div>元素。（注：沒有屬性title的<div>元素也會被選取）
   $("div[title^=text]") 選取屬性title是以「text」開頭的<div>元素。
   $("div[title$=text]") 選取屬性title是以「text」結束的<div>元素。
   $("div[title*=text]") 選取屬性title中含有「text」的<div>元素。
   $('div[title|="text"]') 選取屬性title等於「text」或以「text」爲前綴的<div>元素。（注：爲前綴指該字符串後跟一個‘-’）。
   $('div[title~="text"]') 選取屬性title以空格分隔的值中包含字符「text」的元素。
   $("div[id][title$='text']") 選取擁有屬性id，而且屬性title以「text」結束的<div>元素。
   五、子元素過濾選擇器
   $("div.one:nth-child(2)") 選取屬性class爲「one」的<div>父元素下的第二個子元素。
   $("div.one:first-child(2)") 選取屬性class爲「one」的<div>父元素下的第一個子元素。
   $("div.one:last-child(2)") 選取屬性class爲「one」的<div>父元素下的最後一個子元素。
   $("div.one:first-child(2)") 若是屬性class爲「one」的<div>父元素下只有一個子元素，則選取這個子元素。
   六、表單對象屬性過濾選擇器
   $("#form1 input:enabled") 選取表單內可用的<input>元素。
   $("#form1 input:disabled") 選取表單內不可用的<input>元素。
   $("input:checked") 選取被選中的多選框。
   $("select:selected") 選取下拉框中被選中的項。
   （注：在元素中設置屬性disabled爲「disabled」可以使此元素不可用）
   4、表單選擇器
   $(":input") 選取全部<input>、<textarea>、<select>和<button>元素。
   $(":text") 選取全部的單行文本框。
   $(":password") 選取全部的密碼框。
   $(":radio") 選取全部的單選框。
   $(":checkbox") 選取全部的複選框。
   $(":image") 選取全部的圖像按鈕。
   $(":reset") 選取全部的重置按鈕。
   $(":button") 選取全部的按鈕。
   $(":file") 選取全部的上傳控件。
   $(":hidden") 選取全部的不可見元素。
   5、選擇器中的一些注意事項
   一、一些屬性值中含有特殊字符
   如：<div id="id[1]">aa</div>,獲取此元素的方法是：$("#id\[1\]")。
   二、選擇器中含有空格
   $('.class_1 :hidden')與$('.class_1:hidden')的對比。
   $('.class_1 :hidden') 獲取到的是屬性class爲class_1的元素裏邊包含的隱藏元素。
   $('.class_1:hidden') 獲取到的是屬性class爲class_1的元素。
   總算把Jquery的選擇器的知識點大體的總結了一下了，這些知識點基本都是照書上的寫的，只不過是濃縮了一下，讓各位大神見笑了。明天根據今天總結的知識點作一個示例，固然示例也是書中的示例，那些和我同樣的菜鳥們期待吧！

轉載於猿2048:➣《jQuery選擇器大全-你們趕忙收藏》