元素選擇是一切操作的前提，jQuery中$()函式最強大最常用的功能之一就是使用選擇器選擇DOM元素。這裡就彙總一些十分常用的jQuery選擇器。

1、jQuery選擇器基本結構

$('選擇器')
$('選擇器 上下文')

2、使用基本css選擇器

關於基本的css選擇器可以看一下css選擇器詳解。這裡列出幾種最基本的使用css選擇器的用法。

2.1 元素選擇器

$('a'); //選擇所有a元素
$('div');  //選擇所有div元素
$('p');  //選擇所有p元素

當然，如果你願意，jQuery也允許我們使用逗號將多個選擇器合併為一個選擇器：

$('a,div,p');
 

這樣得到了和上面3行程式碼相同的效果。

2.2 類選擇器

$('div.myClass');  //所有擁有myClass類的div元素
$('p.myClass');  //所有擁有myClass類的p元素
$('*.myClass');  //擁有myClass類的所有型別元素

通常情況下，要選擇擁有某一類的所有元素時，會省略掉萬用字元*，如下：

$('.myClass');  //擁有myClass類的所有型別元素

這樣不會有任何不妥，也是我們常用的寫法。

另外，某些元素可能擁有不止一個類:

$('div.myClass1.myClass2');

這樣會選擇同時擁有myClass1以及myClass2類的div元素。當然，被選中的div元素可能還擁有其他類，也就是說，以下div會毫無疑問地被選中：

<div class="myClass1 myClass2 myClass3">...</div>

2.3 ID選擇器

$('table#myID');  //id為myID的table元素

通常在一個html頁面中，一個元素只能擁有一個id，一個id也只能出現一次。

3、結合使用上下文選擇器

3.1 後代選擇器

從這裡開始，開始一些稍有難度的選擇，例如：

$('ul.myUl li');

這樣會選擇所有擁有myUl類的ul元素的li子元素。聽起來很拗口。看下面的程式碼：

html

<ul class="myUl">
  <li
 
><a href="#"></a>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li>
<ul>

這裡，通過$('ul.myUl li')，所有的li元素都將被選中，注意是所有的！因為所有的li元素均是<ul class="muUl">...</ul>的後代。不論你是直接後代，孫子代還是重孫子代。

事實上，上例還不足以完全說明所有擁有myUl類的ul元素的li子元素的含義。因為擁有myUl類的ul元素可能不止一個，如下：

html

<ul class="myUl">
  <li><a href="#"></a>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li>
<ul>

<ul class="myUl">
  <li>
    <ul>
      <li>一</li>
      <li>二</li>
      <li>三</li>
    </ul>
  </li>
<ul>

$('ul.myUl li')同樣會選擇以上程式碼中所有的li元素。因為上述程式碼中所有li元素均是ul.myUl的子元素，雖然ul.myUl有2個。現在應該能理解所有擁有myUl類的ul元素的li子元素的含義了吧！

後代選擇器其實不止能夠選擇某元素的後代，也可以選擇某元素後代的後代(聽起怎麼有點彆扭)，如下：

$('ul.myUl li a');

這樣就選擇了所有擁有myUl類的ul元素的所有li後代元素的所有a後代元素。雖然又多了一個xx的後代，不過和上面的分析是一個道理，就不贅述了。

3.2 直接子節點選擇器

參考3.1中的程式碼。

$('ul.myUl > li');

選擇所有擁有myUl類的ul元素的直接li元素。注意，這裡不是所有而是直接子元素。孫子，重孫子li元素將不會被選取。

3.3 兩種兄弟節點選擇器

參考下面的程式碼：

html

<ul class="myUl">
  <li class="myLi1">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
  <li class="myLi2">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li>
  <li class="myLi3">
    <ul>
      <li>一</li>
      <li>二</li>
      <li>三</li>
    </ul>
  </li>
<ul>

$('li.myLi1 + li');

選擇擁有myLi1類的li元素後面的第一個兄弟li元素節點。選擇的結果為<li class="myLi2">...</li>

對於某元素後面的第一個兄弟節點，有些方便的應用，比如在css選擇器詳解曾經說過的例如你想在一個h2標題後面的段落應用某種獨到的樣式或者希望在某類p段落後的table上新增一個額外的邊距等等。

如果你想擁有更加靈活的兄弟節點選擇方式，可以使用以下的語法：

$('li.myLi1 ~ li[class="myLi3"]');

這樣，我們就選擇到了[<li class="myLi3">...</li>]。

上面的中括號看起來有些陌生，就是我們下面要說的特性選擇器。

如果沒有給上面的兄弟選擇器指定條件，則會選擇其後所有兄弟節點：

$('li.myLi1 ~ li');

會選擇[<li class="myLi2">...</li>,<li class="myLi3">...</li>]。

4、使用特性選擇器

特性選擇器十分強大，它的語法是用一箇中括號表示的。例如:

$('img[alt]');  //擁有alt特性的img元素節點
$('form[method]');  //擁有method特性的form元素節點

如果你希望指定這些特性的具體值來精確化選擇，可以使用以下的方法：

$('input[type="text"]');  //type特性值為text的所有input元素
$('a[href="http://jquery.com"]');  //href為"http://jquery.com"的a元素

如果你想進一步，使用部分匹配的方式進行節點選擇，請看下面的例子：

頭匹配：

$('a[href^="http://"]');  

href以”http://”開頭的a元素節點。

$('div[title^="my"]');  

所有title特性以”my”開頭的div元素。

尾匹配：

$('a[href$=".pdf"]');  

href以”.pdf”結尾的a元素節點。

$('div[title$="ed"]');  

所有title特性以”ed”結尾的div元素。

任意匹配：

$('a[href*="jquery"]');  

所有herf特性中包含jquery字串的a元素。

不等匹配：

$('img[alt!="frontImg"]');  

所有alt特性不等於frontImg的img元素。

5、使用過濾選擇器

過濾選擇器是通過過濾一個基礎選擇器來實現的。它的基本語法用一個冒號表示。我們來看具體的例子。

5.1 位置過濾器

有的時候，希望根據元素在頁面中的位置或者其相對於其他元素的位置來選擇元素。這時將會用到位置選擇器。

$('div.myClass a:first');  

選擇所有div.myClass所有子節點中的第一個a元素。

$('div.myClass a:last');  

選擇所有div.myClass所有子節點中的最後一個a元素。

$('div.muClass p:odd');  

選擇所有div.myClass所有子節點中奇數段落元素。

$('div.myClass p:even');  

選擇所有div.myClass所有子節點中偶數段落元素。

注意，這裡如果省略掉前面的基礎選擇器，它會預設為*。

接下來內容我們結合一小段程式碼來看：

html

<table id="myTable">    
  <thead>
    <tr>
      <th>Language</th>
      <th>Type</th>
      <th>Invented</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Java</td>
      <td>CS</td>
      <td>2010</td>
    </tr>
    <tr>
      <td>English</td>
      <td>Lang</td>
      <td>2015</td>
    </tr>
    <tr>
      <td>Calculus</td>
      <td>Math</td>
      <td>2011</td>
    </tr>
  </tbody>
</table>

$('table#myTable td:first-child');

選取以上所有作為第一個子節點的td元素。也就是[<td>Java</td>,<td>English</td>],<td>Calculus</td>

$('table#myTable td:last-child');

選取以上所有作為最後一個子節點的td元素。也就是[<td>2010</td>,<td>2015</td>],<td>2011</td>

$('table#myTable td:nth-child(1)');

選取以上所有作為第1個子節點的td元素。也就是[<td>Java</td>,<td>English</td>],<td>Calculus</td>

特別強調nth-child(1)的下標從1開始！再比如：

$('table#myTable td:nth-child(3)');

選取以上所有作為第3個子節點的td元素。也就是[<td>2010</td>,<td>2015</td>],<td>2011</td>

$('table#myTable td:nth-child(even)');

選取以上所有作為偶數子節點的td元素。也就是[<td>CS</td>,<td>Lang</td>],<td>Math</td>

$('table#myTable td:nth-child(even)');

選取以上所有作為奇數子節點的td元素。

還有一個特別有意思的位置選擇器:nth-child(Xn+Y):

$('table#myTable td:nth-child(3n)');

選取以上所有能被3整除的子td元素。即作為第3n個子節點存在的td元素。注意，沒有0號元素！

$('table#myTable tr:nth-child(2n+1)');

作為第2n+1個子節點存在的td元素。注意這裡包含第1個元素。

$('table#myTable tr:eg(0)');

table#myTable子元素中第1個tr元素。注意，這裡的下標是從0開始的！不同於上面的nth-child(n)。另外要注意，這裡結果為<td>Java</td>而不是[<td>Java</td>,<td>English</td>],<td>Calculus</td>，也就是說它只會選取table#myTable子元素中第1個tr元素。

$('table#myTable tr:gt(1)');

table#myTable子元素中第2個tr元素之後的所有tr元素。不包含第2個tr。

$('table#myTable tr:lt(1)');

table#myTable子元素中第2個tr元素之前的所有tr元素。不包含第2個tr。也就是<td>Java</td>。

5.2 css及部分jQuery自定義過濾器

$(':button');  //所有按鈕元素
$(':checkbox');  //所有複選框元素
$(':radio');  //所有單選框元素
$(':reset');  //所有input[type=reset]元素
$(':submit');  //所有input[type=submit]元素
$(':text');  //所有input[type=text]元素
$(':password');  //所有input[type=password]的元素
$(':image');  //所有圖片輸入元素input[type=image]
$(':file');  //所有檔案輸入元素input[type=file]
$(':visible');  //所有可見元素
$(':checked');  //所有處於選中狀態的複選框或單選按鈕元素
$(':contains(hello)');  //所有包含文字hello的元素
$(':animated');  //所有處於動畫狀態的元素
$(':disabled');  //所有處於禁用狀態的元素
$(':enabled');  //所有處於啟用狀態的元素
$(':header');  //所有標題元素h1~h6
$(':hidden');  //所有隱藏元素
$(':input');  //所有表單元素
$(':parent');  //所有擁有子節點的元素
$(':selected');  //所有處於選中狀態的option元素

示例:

$('form#register input:checkbox');

id為register的form中的複選框元素。

事實上，以上過濾器可以組合使用：

$('form#register input:checkbox:checked');

id為register的form的複選框元素中被選中的按鈕元素。

$('form#register input:contains(my)');

form#register中包含文字”my”的input元素。

5.3 :has過濾器

選擇擁有某種特性的元素。

$('tr:has(a)');

選取所有包含a子元素的tr行元素。

$('div:has(img[href*="beauty"])');

選取包含img[href*="beauty"]的div元素。

5.4 :not過濾器

$("img:not([src*=beauty])");

選取所有src中不包含字串”beauty”的img元素。

$(input:not(:checkbox));

選取所有非複選框的input元素。