jQuery 是一個快數、小巧、功能豐富的 JavaScript Open Source library，主要是用來操作 DOM ，包含快速選取一個或多個來做一些事件的處理，例如：隱藏、顯示。

jQuery 的宗旨是 Write less, do more. 它的特色在於提供了相當簡便的寫法，能透過 CSS Selector、函數串接等，用很短的程式碼來做到想要處理的事件、元素的變更新增/刪除等，因此相當受到開發者的喜愛。

而在使用 jQuery 時，選擇器的使用很重要，所以先來看看選擇器吧！

選擇器

圖片來源：jQuery API

寫法
$('CSS Selector').要做的事();

基本選擇器 Basics

• * 選擇所有元素
• .class 選擇 class，如：$('.mybox')
• element 選擇 element，如：$('p')
• #id 選擇 id ，如：$('#box')
• selector1,selectorN 可以同時選擇多個元素，如：$('div, p.box, #phone')

階層選擇器 Hierarchy

• parent > child 選擇指定元素下的指定子元素，如：$('ul.topnav > li' )
• ancestor descendant 選擇一個元素裡所有的後代元素，如：$('form input')
• prev + next 選擇所有指定元素後緊跟著的元素，如：$('label + input' )
• prev ~ siblings 選擇與指定元素之後有相同父級的同級選擇器，如：$('#prev ~ div')

基本過濾器 Basic Filters

• :animated 選擇動畫進行中的所有元素。如：$('div:animated')
• :eq(n) 選取第n個元素，如：$('ul.topnav li:eq(n)')
• :even 選取偶數個元素，如：$('li:even')
• :odd 選取奇數個元素，如：$('li:odd')
• :first 選取第一個符合的元素，如：$('li:first')
• :gt(n) 選取結果集中索引大於 N 的元素，n 可以為負值，如：$(':gt(3)')
• :lt(n) 選取結果集中索引小於 N 的元素，n 可以為負值，如：$(':lt(3)')
• :header 選擇所有的標題元素，例如 h1、h2、h3，如：$(':header')
• :lang() 選擇指定語言的所有元素，如：$('div:lang(zh-tw)')
• :last 選取最後一個符合的元素，如：$('li:last')
• :not() 選擇不符合的所有元素，如：$('input:not(:checked) + span')
• :root 選擇做為文檔根目錄的元素
• :target 選擇由文檔的圖片、影片、聲音指示的目標元素

內容過濾器 Content Filters

• :contains() 選擇包含指定文本的所有元素，如：$("div:contains('Home')")
• :empty 選擇沒有子元素或內容文字的元素，如：$('td:empty')
• :has() 選擇包含至少一個匹配指定選擇器的元素的元素。如：$('div:has(p)')
• :parent 選擇至少有一個子節點（元素或文本）的所有元素。

可視選擇器 Visibility Filters

• :hidden 選擇所有隱藏的元素。 如：$("div:hidden").show( 3000 );
• :visible 選擇所有可見的元素。如：$("div:visible").click(function() { $(this).css("background", "yellow"); });

屬性選擇器 Attribute

• [name] 選擇具有指定屬性的元素(使用任何值都可)。如：$( "div[id]" )
• [name|=”value”] 選擇具有指定屬性的元素，其值等於給定的字符串，或者以該字符串開頭，後跟連字符（ - ）。

$('a[href="about.html"]')` 選擇 a 連結的 href 屬性包含 'about.hmtl'的元素

• [name*=”value”] 選擇具有包含給定子字符串的值的指定屬性的元素。

$( "input[name*='man']" )` 選擇所有的name屬性包含’man’的input元素

• [name~=”value”] 選擇具有指定屬性的元素，其中包含由空格分隔的給定單詞的值。

<input name="man-news">
<input name="milk man">
<input name="letter">

$( "input[name~='man']" ) -->會選到前兩個 input

• [name$=”value”] 選擇具有指定屬性的元素，其值與給定字符串精確匹配。要區分大小寫。如：$( "input[name$='letter']" )

• [name=”value”] 選擇具有指定屬性的元素，其值恰好等於特定值。如：
  $( "input[value='Hot Fuzz']" ) 會選到 value 等於 Hot Fuzz 的 input

• [name!=”value”] 選擇不具有指定屬性的元素，或者俱有指定屬性但不具有特定值的元素。如：$( "input[name!='newsletter']" ) name 屬性值為 newsletter 的不選。

• [name^=”value”] 選擇具有指定屬性的元素，其值與給定字符串完全一致。

<input name="newsletter">
<input name="milkman">
<input name="news">

$( "input[name^='news']" ) 會選到第三個 input

• [name=”value”][name2=”value2″] 符合所有指定的屬性過濾器的元素。如：$( "input[id][name$='man']" )

子代過濾選擇器 Child Filters

• :first-child 選擇同父代的第一個子代元素。
• :first-of-type 選擇同一元素名稱的兄弟中的第一個元素。
• :last-child 選擇同父代的最後一個子代元素。
• :last-of-type 選擇同一元素名稱的兄弟中的最後一個元素。
• :nth-child() 選擇同父代的第n個子代元素。
• :nth-last-child() 選擇同父代的倒數第n個子代元素。
• :nth-last-of-type() 選擇同父代的倒數第n個子代元素。
• :nth-of-type() 選擇同父代的第n個子代元素。
• :only-child 選擇只有一個子代的元素。
• :only-of-type() 選擇所有沒有同名元素的兄弟元素。如：$("div button:only-child") 選擇只有一個 button 的 div

表單選擇器

• :button 選擇所有按鈕元素和按鈕類型的元素。
• :checkbox 選擇所有的核取方塊的元素。
• :checked 選擇所有選中的元素。
• :disabled 選擇所有被禁用的元素。
• :enabled 選擇所有已啟用的元素。
• :focus 選擇當下被 focus 的元素。
• :file 選擇 file 類型的元素。
• :image 選擇圖像類型的所有元素。
• :input 選擇所有input、textarea、select 和 button 元素。
• :password 選擇所有密碼類型的元素。
• :radio 選擇所有選項按鈕的元素。
• :reset 選擇所有清除按鈕的元素。
• :selected 選擇所有選中的元素。
• :submit 選擇所有送出類型的元素。
• :text 選擇所有文字輸入框元素。

因為使用選擇器會有效能上的問題，盡可能使用 ID 選擇器減少使用 class 選擇器。

以上是所有的 jQuery 選擇器，各位看倌明天見囉～

參考資料：
[1] jQuery.com