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

一. 常規選擇器

（一）簡單選擇器

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

我們可以采用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)。那么在基礎選擇器外，還有一些進階和高級的選擇器方便我們更精準的選擇元素

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

$('#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進行精準確定

注意要點：

（三）高級選擇器

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

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

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

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

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

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

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

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

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

4. 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')

###（四）屬性選擇器

二. 過濾選擇器

（一）基本過濾器

注意： :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 提供了一個 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上加）

（三）可見性過濾器

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

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

（四）子元素過濾器

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

（五）其他方法

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

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>

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 的字段

（二）表單選擇器

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

注意：

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

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

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

（三）表單過濾器

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