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選擇器支持CSS一、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	選取全部被選中的元素，下拉列表