jQuery入門筆記之（一）選擇器引擎

轉自個人部落格
本來是單獨整理了一個CSS選擇器的，但是在jQuery中基本都有對應的，所以就不發了。

jQuery選擇器，若未作特別說明，獲取的都是元素集合。

---

一. 常規選擇器

（一）簡單選擇器

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

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

選擇器	CSS 模式	jQuery 模式	描述
元素名	div{}	$(`div`)	獲取所有div元素的 DOM 物件
ID	#box {}	$(`#box`)	獲取一個 ID 為 box 元素的 DOM 物件
類(class)	.box{}	$(`.box`)	獲取所有class為box的所有DOM物件

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

在實踐過程中發現使用多個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的全部規則，支援CSS3部分實用的規則，同時它還有少量獨有的規則而jQuery選擇器在獲取節點物件的時候不但簡單，還內建了容錯功能區別如下：

$(`#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)。那麼在基礎選擇器外，還有一些進階和高階的選擇器方便我們更精準的選擇元素

選擇器	CSS 模式	jQuery 模式	描述
群組選擇器	span,.con,.box{}	$(`span,em,.box`)	獲取多個選擇器的 DOM 物件
後代選擇器	ul li a{}	$(`ul li a`)	獲取追溯到的多個 DOM 物件
通配選擇器	*{}	$(`*`)	獲取所有元素標籤的 DOM 物件

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

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

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

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

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

如同CSS一樣，類(class)有一個特殊的模式，就是同一個DOM節點可以宣告多個類(class)。那麼對於這種格式，我們有多class選擇器可以使用，但要注意和class群組選擇器的區別。

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

注意要點：

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

（三）高階選擇器

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

選擇器	CSS 模式	jQuery 模式	描述
後代選擇器	ul li a {}	$(`ul li a`)	獲取追溯到的多個 DOM 物件
子選擇器	div > p {}	$(`div p`)	只獲取子類節點的多個 DOM 物件
next 選擇器（相連）	div + p {}	$(`div + p`)	只獲取某節點後一個同級DOM物件
nextAll 選擇器(之後所有)	div ~ p {}	$(`div ~ p`)	獲取某節點後面所有同級DOM物件

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

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

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

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

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

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

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

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

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

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

需要注意的是：

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

2. 在 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提供了獨立的方法來代替某些選擇器的功能，推薦優先使用獨立的方法。

（四）屬性選擇器

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

CSS 模式	jQuery模式	描述
a[title]	$(`a[title]`)	獲取具有這個屬性的 DOM 物件
a[title=num1]	$(`a[title=num1]`)	獲取具有這個屬性=這個屬性值的DOM物件
a[title^=num]	$(`a[title^=num]`)	獲取具有這個屬性且開頭屬性值匹配的DOM物件
a[title¦=num]	$(`a[title¦=num]`)	獲取具有這個屬性且等於屬性值或開頭屬性值匹配後面跟一個-號的DOM物件
a[title$=num]	$(`a[title$=num]`)	獲取具有這個屬性且結尾屬性值匹配的DOM物件
a[title!=num]	$(`a[title!=num]`)	獲取不具有這個屬性或不等於該屬性值的DOM物件
a[title~=num]	$(`a[title~=num]`)	獲取具有這個屬性且屬性值是以一個空格分割的列表，其中包含屬性值的DOM物件
a[title*=num]	$(`a[title*=num]`)	獲取具有這個屬性且屬性值含有一個指定字串的DOM物件
a[bbb][title=num1]	$(`a[bbb][title=num1]`)	獲取具有這個屬性且屬性值匹配的DOM物件

二. 過濾選擇器

（一）基本過濾器

過濾器名	jQuery 語法	說明	返回
:first	$(`li:first`)	選取第一個元素	單個
:last	$(`li:last`)	選取最後一個元素	單個
:not(selector)	$(`li:not(.red)`)	選取class不是red的li元素	集合
:even	$(`li:even`)	選擇索引(以下幾個都是從0開始)是偶數的所有元素	集合
:odd	$(`li:odd`)	選擇索引是奇數的所有元素	集合
:eq(index)	$(`li:eq(2)`)	選擇索引等於index的元素(負數從後開始)	單個
:gt(index)	$(`li:gt(2)`)	選擇索引大於index的元素	集合
:lt(index)	$(`li.lt(2)`)	選擇索引小於index的元素	集合
:header	$(`:header`)	選擇標題元素，h1~h6	集合
:animated	$(`:animated`)	選擇正在執行動畫的元素	集合
:focus	$(`:focus`)	選擇當前被焦點的元素	集合

注意：:focus過濾器，必須是網頁初始狀態的已經被啟用焦點的元素才能實現元素獲取。而不是滑鼠點選或者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的元素

（二）內容過濾器

內容過濾器的過濾規則主要是包含的子元素或文字內容上。

過濾器名	jQuery語法	說明
:contains(text)	$(`:contains("ycku.com")`)	選取含”ycku.com”文字的元素
:empty	$(`:empty`)	選取不包含子元素或空文字的元素
:has(selector)	$(`:has(.red)`)	選取含有class是red的元素(在父元素呼叫)
:parent	$(`:parent`)	選取含有子元素或文字的元素

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上加）

（三）可見性過濾器

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

過濾器名	jQuery 語法	說明
:hidden	$(`:hidden`)	選取所有不可見元素
:visible	$(`:visible`)	選取所有可見元素

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

（四）子元素過濾器

子元素過濾器的過濾規則是通過父元素和子元素的關係來獲取相應的元素。

過濾器名	jQuery語法	說明
:first-child	$(`li:first-child`)	獲取每個父元素的第一個子元素
:last-child	$(`li:last-child`)	獲取每個父元素的最後一個子元素
:only-child	$(`li:only-child`)	獲取有且只有一個子元素的元素
:nth-child(odd/even/index)支援表示式，如2n等同even	$(`li:nth-child(even)`)	獲取每個自定義子元素的元素(索引值從 1 開始計算)

（五）其他方法

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

方法名	jQuery 語法	描述
is(s/o/e/f)	$(`li`).is(`.red`)返回布林值	傳遞選擇器、DOM、jquery物件或是函式來匹配元素集合，如果這些元素中至少有一個元素匹配給定的引數，返回true
hasClass(class)	$(`li`).eq(2).hasClass(`red`)	其實就是is("." + class),但只能傳遞class
slice(start, end)	$(`li`).slice(0,2)	選擇從start到end位置的元素，如果是負數，則從後開始
filter(s/o/e/f)	$(`li`).filter(`.red`)	篩選元素集合中匹配表示式或通過傳遞函式測試的那些元素集合。
end()	$(`div`).find(`p`).end()	獲取當前元素的前一個狀態的元素(同級或父級)
contents()	$(`div`).contents()	獲取某元素下面所有元素節點，包括文字節點，如果是iframe，則可以查詢文字內容

is:

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

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

<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>
<script>
$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
});
</script>

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

slice:

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

注意：這個引數有多種傳法和JavaScript中的slice方法是一樣的比如：slice(2)，從第三個開始到最後選定；slice(2,4)，第三和第四被選定；slice(0,-2)，從倒數第三個位置，向前選定所有；slice(2,-2)，前兩個和末尾兩個未選定。

filter：

$(`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`);

此處注意$(this)的使用，這把this包裝成了jQuery物件，以便使用jQuery的方法。

三. 表單選擇器

（一）常規選擇器

其實使用上面的選擇器已經能對錶單元素進行選取了，先來驗證一下，來看看如何利用上面的方法來進行表單元素的選擇。

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

很顯然，上面的這個方法都能選擇到想要的元素，那麼對於 id 和class基本一致，也可以結合屬性選擇器來精確的定位，在這裡我們不在重複。
對於表單中的其他元素名比如：textarea、select 和 button 等，原理一樣，不在重複。
但是這樣是不是太過於複雜了呢？假如我們要同時選擇input、textarea、select 和 button？繼續看吧。

（二）表單選擇器

雖然可以使用常規選擇器來對錶單的元素進行定位，但有時還是不能滿足開發者靈活多變的需求，而且也太過於繁瑣。所以，jQuery為表單提供了專用的選擇器。

方法名	描述
:input	選取所有 input、textarea、select 和 button元素
:text	選擇所有單行文字框，即 type=text
:password	選擇所有密碼框，即 type=password
:radio	選擇所有單選框，即 type=radio
:checkbox	選擇所有核取方塊，即 type=checkbox
:submit	選取所有提交按鈕，即 type=submit
:reset	選取所有重置按鈕，即 type=reset
:image	選取所有影像按鈕，即 type=image
:button	選擇所有普通按鈕，即 button 元素
:file	選擇所有檔案按鈕，即 type=file
:hidden	選擇所有不可見欄位，即 type=hidden

注意：

1. 由於這些選擇器都是返回元素集合，如果想獲取某一個指定的元素，最好結合一下屬性選擇器。比如：

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

1. 在使用這些屬性時最好界定父元素，比如直接$(":hidden").length這樣是不正確的，因為它還會選擇到head標籤內的元素，所以length屬性不會為0，建議使用這樣的形式：$("form :hidden")

（三）表單過濾器

jQuery 提供了四種表單過濾器，分別在是否可以用、是否選定來進行表單欄位的篩選過濾。

方法名	描述
:enabled	選取所有可用元素
:disabled	選取所有不可用元素
:checked	選取所有被選中的元素，單選和複選欄位
:selected	選取所有被選中的元素，下拉選單