常规选择器——高级选择器
高级选择器
在前面我们学习六种最常规的选择器， 一般来说通过这六种选择器基本上可以解决所有DOM节点对象选择的问题。但在很多特殊的元素上，比如父子关系的元素，兄弟关系的元
素，特殊属性的元素等等。在早期CSS的使用上，由于IE6等低版本浏览器不支持，所以这些高级选择器的使用也不具备普遍性，但随着jQuery兼容，这些选择器的使用频率也越来越高。
层次选择器
| 选择器 | 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对象 |
在层次选择器中，除了后代选择器之外， 其他三种高级选择器是不支持IE6的， 而jQuery却是兼容IE6的。
如，html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常规选择器</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="box"> <p>p</p> <p>p</p> <p>p</p> <div> <p>p</p> <p>p</p> <p>p</p> </div> </div> </body> </html>
jQuery代码如下：
$("#box p").css("color", "red"); //后代选择器，全兼容
jQuery为后代选择器提供了一个等价find()方法：
$("#box").find("p").css("color", "blue"); //和后代选择器等价
CSS规则如下：
#box > p { //子选择器，孙子后失明，IE6不支持 color: red; }
jQuery代码：
$("#box > p").css("color", "orange"); //兼容IE6
jQuery为子选择器提供了一个等价children()方法：
$("#box").children("p").css("color", "red"); //和子选择器等价
修改html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常规选择器</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="box"> <p>p</p> <p>p</p> <p>p</p> <div> <p>p</p> <p>p</p> <p>p</p> </div> </div> <p>p</p> <p>p</p> <p>p2</p> </body> </html>
CSS规则如下：
#box + p { //next选择器(下一个同级节点) IE6不支持 color: red; }
jQuery代码如下：
$("#box + p").css("color", "blue"); //兼容IE6
jQuery为next选择器提供了一个等价的方法next()：
$("#box").next("p").css("color", "pink"); //和next 选择器等价
修改CSS如下：
#box ~ p { //nextAll选择器(后面所有同级节点) IE6不支持 color: red; }
jQuery代码如下：
$("#box ~ p").css("color", "pink"); //兼容IE6
jQuery为nextAll选择器提供了一个等价的方法nextAll()：
$("#box").nextAll("p").css("color", "red"); //和nextAll选择器等价
层次选择器对节点的层次都是有要求的，比如子选择器，只有子节点才可以被选择到，孙子节点和重孙子节点都无法选择到。next和nextAll选择器，必须是同一个层次的后一个和后N个，不在同一个层次就无法选取到了。
在find()、next()、nextAll()和children()这四个方法中，如果不传递参数，就相当于传递了“*” ，即任何节点，我们不建议这么做，不但影响性能，而且由于精准度不佳可能在复杂的HTML结构时产生怪异的结果。
$('#box').next(); //相当于$('#box').next('*');
$("#box").next("*").css("color", "red"); //next等选择器方法不传参，就相当于传递了*号，如果*在某个环境里有所浪费，建议尽量不去使用
为了补充高级选择器的这三种模式，jQuery还提供了更加丰富的方法来选择元素。
例，有如下html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常规选择器</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>p</p> <p>p</p> <p>p2</p> <span>strong</span> <span>strong</span> <span>strong</span> <p>p</p> <p>p2</p> <div id="box">div</div> <em>em</em> <p>p1</p> <span>strong</span> <p>p</p> <p>p</p> </body> </html>
jQuery代码如下：
$("#box").prev("p").css("color", "pink"); //同级上一个元素
jQuery代码如下：
$("#box").prevAll("p").css("color", "pink"); //同级所有上面的元素
siblings()方法正好集成了prevAll()和nextAll()两个功能的效果，及上下相邻的所有元素进行选定：
$("#box").prevAll("p").css("color", "pink"); //同级上所有元素选定
$("#box").nextAll("p").css("color", "pink"); //同级下所有元素选定
等价于：
$("#box").siblings("p").css("color", "red"); //同级上下所有元素选定
警告：切不可写成“$('#box').prevAll('p').nextAll('p').css('color', 'red');”这种形式，因为prevAll('p')返回的是已经上方所有指定元素，然后再nextAll('p')选定下方所有指定元素，这样必然出现错误。
nextUntil()和prevUnitl()方法是选定同级的下面或上面的所有节点，选定非指定的所有元素，一旦遇到指定的元素就停止选定。
$("#box").nextUntil("p").css("color", "red"); //同级下非指定元素选定，遇到则停止
$("#box").prevUntil("p").css("color", "red"); //同级上非指定元素选定，遇到则停止
理论上来讲，jQuery提供的方法find()、next()、nextAll()和children()运行速度要快于使用高级选择器。因为他们实现的算法有所不同，高级选择器是通过解析字符串来获取节点对象，而jQuery提供的方法一般都是单个选择器，是可以直接获取的。但这种快慢的差异，对于客户端脚本来说没有太大的实用性，并且速度的差异还要取决了浏览器和选择的元素内容。比如，在IE6/7不支持querySelectorAll()(没见过这个方法?)方法，则会使用“Sizzle”引擎(?)，速度就会慢，而其他浏览器则会很快。有兴趣的可以了解这个方法和这个引擎。
选择器快慢分析：
以该html代码为例说明：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常规选择器</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="box"> <p>p</p> <p>p</p> <p>p</p> <div> <p>p</p> <p>p</p> <p>p</p> </div> </div> </body> </html>
$('#box').find('p'); //这条最快，会使用原生的getElementById、ByName、ByTagName和querySelectorAll()
$("p","#box"); //jQuery会自动把这条语句转成$('#box').find('p')，这会导致一定的性能损失。它比最快的形式慢了5%-10%
$('#box').children('p'); //这条语句在jQuery内部，会使用$.sibling()和javascript的nextSibling()方法，一个个遍历节点。它比最快的形式大约慢50%
$('#box > p'); //jQuery内部使用Sizzle引擎，处理各种选择器。Sizzle引擎的选择顺序是从右到左，所以这条语句是先选p，然后再一个个过滤出父元素#box，这导致它比最快的形式大约慢70%
$('#box p'); //这条语句与上一条是同样的情况。但是，上一条只选择直接的子元素，这一条可用于选择多级子元素，所以它的速度更慢，大概比最快的形式慢了77%。
$("p", $("#box")); //jQuery内部会将这条语句转成$('#box').find('p')，比最快的形式慢了23%。
综上所属，最快的是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^=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对象 |
属性选择器也不支持IE6， 所以在CSS界如果要兼容低版本，那么也是非主流。但jQuery却不必考虑这个问题。
例，html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常规选择器</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <a title="num1">num1</a> <a>num2</a> <a>num3</a> <a title="no4">num4</a> <a bbb="aaa" title="num">num5</a> </body> </html>
jQuery代码如下：
$("a[title]").css("color", "red"); //选定这个属性(title)
$("a[title=num1]").css("color", "red"); //选定具有这个属性(title)=这个属性值(num1)的
$("a[title^=num]").css("color", "red"); //选定具有这个属性且开头属性值匹配的(numxxx)
$("a[title|=num]").css("color", "red"); //选定具有这个属性且等于属性值(num)或开头属性值匹配后面跟一个“-”号(num-xxx)
$("a[title$=num]").css("color", "red"); //选定具有这个属性且结尾属性值匹配的(xxxnum)
$("a[title!=num1]").css("color", "red"); //选定具有这个属性且属性值不相等的(为何没有title属性的也能被选中呢?)
$("a[title~=aaa]").css("color", "red"); //选定具有这个属性且属性值是以一个空格分割的列表，其中包含属性值的
$("a[title*=num]").css("color", "red"); //选定具有这个属性且属性值含有一个指定字串的
$("a[bbb][title=num]").css("color", "red"); //选定具有多个属性且属性值匹配成功的
