jquery学习，3--高级选择器
自己手写的学习笔记。常规选择器：
/****************学习--高级选择器（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