自己手寫的學習筆記。常規選擇器：
/****************學習--高級選擇器（1）****************/
---高級選擇器：ie7+
層次選擇器：
后代選擇器 ul li a $('ul li a') 獲取追溯到的多個dom對象 ie6+=
子選擇器 div>p $('div p') 只獲取子類節點的多個dom對象 ie7+
next選擇器 div+p{} $('div+p') 只獲取某節點后的同一個同級對象 ie7+
nextAll選擇器 div~p{} $('div~p') 獲取某節點后面的所有同級的dom對象 ie7+
在層次選擇其中，除了后代選擇器外。其他的三種高級選擇器不支持ie6的,jquery卻是兼容ie6的、
//1.后代選擇器--》全兼容
$('#box p').css('color','#666');
//jquery為后代選擇器提供了一個等價的find()方法
$('#box').find('p').css('color','#666');
//2.子選擇器,孫子級失效。只支持一層子級（兒子級）。
#box>p{ color:red;}//css代碼，不支持ie6
$('#box>p').css('color','orange');//jquery兼容ie6
//jquery為子選擇器提供了一個等價children()方法。
$('#box').children('p').css('color','orange');//和子選擇器等價
//3.next選擇器（下一個同級節點）
#box+p{ color:red;}//css代碼，不支持ie6
$('#box+p').css('color','#bbb');
//jquery為next選擇器（下一個同級節點），提供了一個等價next()方法。
$('#box').next('p').css('color','#bbb');
//4.nextAll選擇器（后面的所有同級節點）
#box~p{ color:red;}//css代碼，不支持ie6
$('#box~p').css('color','red');//jquery兼容ie6
//jquery為nextAll選擇器（后面的所有同級節點）,提供了一個等價nextAll()方法。
$('#box').nextAll('p').css('color','orange');//和子選擇器等價
注意：層次選擇器對節點的層次都是有要求的，比如子節點才能被選擇到，孫子節點和重孫子節點都無法選擇到。
next和nextAll選擇器，必須是同一個層次的后一個和后N個，不在同一個層次就無法選取到了。
&&&&&：理論上，jquery提供的find()、children()、next()、 nextAll()運行速度要快於高級選擇器。因為他們實現的算法不同，高級選擇器是通過“sizzle引擎”解析字符串來獲取節點對象。jquery提 供的方法則是通過querySelectorAll()操作直接得到的（ie6/7不支持）。這種快慢差異，對於客戶端腳本來說沒有太大的實用性，並且速 度差異還要取決於瀏覽器和選擇的元素內容。
在find()、children()、next()、nextAll()這四個方法中，如果不傳參數，就相當於傳遞的是'*'，即任何節點，不推薦這 樣，這樣做不但是會影響性能，而且由於精准度不佳，在復雜的html結構中可能會產生怪異的結果(不是我們想要的效果).
//若'*'在某個環境里有所浪費，那么建議是盡量不要用、
$('#box').next();相當於$('#box').next('*');
為了補充高級選擇器的這三種模式，jquery提供了豐富的方法來選擇元素。
$('#box').prev('p').css('color','orange');//同級上一個元素
$('#box').prevAll('p').css('color','orange');//同級所有上面的元素
nextUntil()和prevUnitl()方法是選定同級下面或上面的所有節點，選定非指定的所有元素，一旦遇到制定元素就停止選定。
$('#box').nextUntil('p').css('color','orange');//同級上非指定元素選定，遇到則停止
$('#box').prevUnitl('p').css('color','orange');//同級下非指定元素選定，遇到則停止
siblings()方法正好集成了prevAll()和nextAll()兩個功能的效果，及上線相鄰的所有元素進行選定。
$('#box').siblings('p').css('color','orange');//同級下下所有元素選定。
//等價於:
$('box').prevAll('p').css('color','orange');//同級上所有元素選定
$('box').nextAll('p').css('color','orange');//同級下所有元素選定
/****************學習--高級選擇器（2）****************/
理論上，jquery提供的find()、children()、next()、nextAll()運行速度要快於高級選擇器。因為他們實現的算法不 同，高級選擇器是通過“sizzle引擎”解析字符串來獲取節點對象。jquery提供的方法則是通過querySelectorAll()操作直接得到 的（ie6/7不支持）。這種快慢差異，對於客戶端腳本來說沒有太大的實用性，並且速度差異還要取決於瀏覽器和選擇的元素內容。
在find()、children()、next()、nextAll()這四個方法中，如果不傳參數，就相當於傳遞的是'*'，即任何節點，不推薦這 樣，這樣做不但是會影響性能，而且由於精准度不佳，在復雜的html結構中可能會產生怪異的結果(不是我們想要的效果).
//若'*'在某個環境里有所浪費，那么建議是盡量不要用、
$('#box').next();相當於$('#box').next('*');
選擇器快慢的分析：
原生的getElementById、ByName、ByTagName和jquerySelectorAll()
//這條最快，會使用
$('#box').find('p').css('color','red');
//jquery會自動把下面這條語句轉化成$('#box').find('p')這會導致性能損失，它比最快的形式慢了5%-10%。
$('p','#box').css('color','red');
//jquery內部會使用這條語句轉成$('#box').find('p'),比最快慢了23%
$('p',$('#parent'));
$('p',$('box')).css('color','red');
//下面這條語句在jquery內部，會使用$.sibling()和javascript的nextSibling()方法，一個個遍歷節點。它的形式比最快的大約慢了50%。
$('#box').children('p').css('color','red');
//下面這條語句在jquery內部使用sizzle引擎，處理各種選擇器。sizzle引擎的選擇順序是從右到左，所以這條語句是先選P，然后再一個個的過濾出父元素#box，這導致比最快的大約慢70%。
$('#box>p').css('color','red');
//下面的這條語句和上面的是相同的情況，但是，上面的語句$('#box>p');只選擇直接的子元素，而下面的這一條語句可以選擇多級子元素，所以它的速度更慢，大概比最快的形式慢了77%。
$('#box p').css('color','red');
綜上總結：最快的是find()方法，最慢的$('#box p')這中高級選擇器。如果一開始將$('#box')進行賦值，那么jquery就對其變量進行緩存，那么速度會進一步提高。
var box = $('#box');
var p = box.find('p);
注 意：推薦使用的哪種呢？其實，都差不多。推薦使用的是jquery提供的方法。因為不但方法速度比高級選擇器更快，並且它的靈活性和擴展性要高於高級選擇 器。使用'+'或'~'從字面上沒有next和nextAll更加語義化，更加清晰，jquery的方法更加豐富，提供了相對的prev和 prevAll。畢竟jquery是編程語言，需要能夠靈活的拆分和組合選擇器，而css則過於死板。所以，如果jquery提供了獨立的方法來代替某些 選擇器
功能，我們還是優先推薦使用獨立的方法。
/************屬性選擇器****************/
css模式 jquery模式 描述
a[title] $('a[title]') 獲取具有這個屬性的DOM對象
a[title=num1] $('a[title=num1]') 獲取具有這個屬性=這個屬性值的DOM對象
a[title^=num] $('a[title^=numl]') 獲取具有這個屬性且開頭屬性值匹配的DOM對象
a[title|=num] $('a[title|=numl]') 獲取具有這個屬性且等於屬性值或者開頭屬性值匹配后面跟一個'-'號的DOM對象
a[title$=num] $('a[title$=numl]') 獲取具有這個屬性且結尾屬性值匹配的DOM對象
a[title!=num] $('a[title!=numl]') 獲取具有這個屬性且不等於屬性值的DOM對象
a[title~=num] $('a[title~=numl]') 獲取具有這個屬性且屬性值是一個空格符分割的列表，其中包含屬性值的DOM對象
a[title*=num] $('a[title*=numl]') 獲取具有這個屬性且屬性值是一個指定字符串的DOM對象
a[b][title=num1] $('a[b][title=num1]')獲取具有這個屬性且屬性值匹配的DOM對象
屬性選擇器也不支持ie6，所以在css界如果要兼容低版本，那么也是非主流。但是jquery卻不必考慮這個問題，jquery兼容了ie6.
a[title]{color:red;} //不支持ie6
$('a[title]').css('color','red'); //兼容ie6
....
<a bbb='aaa' title="num1">num</a><!--html的寫法-->
a[bbb][title=num1]{color:red;} //不支持ie6
$('a[bbb][title=num1]').css('color','red');//兼容ie6