常规选择器——进阶选择器
进阶选择器
在简单选择器中，我们了解了最基本的三种选择器：元素标签名、ID和类(class)。那么在基础选择器外，还有一些进阶和高级的选择器方便我们更精准的选择元素。
| 选择器 | CSS模式 | jQuery模式 | 描述 |
| 群组选择器 | span,em,.box {} | $("span,em,.box") | 获取多个选择器的DOM对象 |
| 后代选择器 | ul li a {} | $("ul li a") | 获取追溯到的多个DOM对象 |
| 通配选择器 | * {} | $("*") | 获取所有元素标签的DOM对象 |
如，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">div</div> <div>div</div> <div>div</div> <p class="pox">p</p> <p class="pox">p</p> <p>p</p> <strong>strong</strong> <strong>strong</strong> <strong>strong</strong> </body> </html>
CSS规则：
div, p, strong { color: red; //多种选择器添加红色字体 }
$("div, p, strong").css("color", "red"); //群组选择器jQuery方式
又或者：
$("#box, .pox, strong").css("color", "blue");
如，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> <ul> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><em>首页</em></li> <li><strong>首页</strong></li> </ul> <a href="#">首页</a> <a href="#">首页</a> <p>首页</p> <p>首页</p> <span>首页</span> <span>首页</span> </body> </html>
CSS规则：
ul a { color: green; }
相当于：
ul li a { //层层追溯到的元素添加红色字体 color: red; }
jQuery代码如下：
$("ul li a").css("color", "orange"); //后代选择器jQuery方式
修改CSS规则如下：
* { //页面所有元素都添加红色字体 color: red; }
jQuery代码如下：
$("*").css("color", "blue"); //通配选择器
目前介绍的六种选择器，在实际应用中，我们可以灵活的搭配，使得选择器更加的精准和快速。
警告：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$('*')，这种使用方法效率很低，影响性能，建议竟可能少用。
用以上html代码来说，
alert($("*").size()); //23
alert($("*")[0].nodeName);//得到第一个DOM对象的标签名——html
综上所述，在全局范围使用*号，会极大的消耗资源，所以不建议在全局使用。
再看以下jQuery代码：
$("ul li a,ul li em,ul li strong").css("color", "red");
等价于
$("ul li,ul li a").css("color", "red");
又等价于
$("ul li *").css("color", "pink");
alert($("ul li *").size()); //4 不是3
所以，通配选择器一般用在局部的环境内。
还有一种选择器，可以在ID和类(class)中指明元素前缀。
如，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 class="box pox">div</div> <p class="box">p</p> <div class="pox">div</div> <p class="box">p</p> </body> </html>
jQuery代码如下：
$("div.box").css("color", "red"); //限定必须是.box，元素获取必须是div
类(class)有一个特殊的模式，就是同一个DOM节点可以声明多个类(class)。那么对于这种格式，我们有多class选择器可以使用，但要注意和class群组选择器的区别。
对以上html代码有如下CSS规则：
.box.pox { //双class选择器，IE6出现异常 color: red; }
jQuery代码：
$(".box.pox").css("color", "blue"); //兼容IE6，解决了异常
多class选择器是必须一个DOM节点同时有多个class，用这多个class进行精确限定。而群组class选择器，只不过是多个class进行选择而已。
$(".box,.pox").css("color", "blue"); //加了逗号，体会区别
警告：在构造选择器时，有一个通用的优化原则：只追求必要的确定性。当选择器筛选越复杂，jQuery内部的选择器引擎处理字符串的时间就越长。比如：
$("div#box p ul li a#link");//可以，选择器越复杂，那么字符串解析就越慢，让jQuery内部处理了不必要的字符串
$("#link"); //单个ID不需要字符串解析，ID是唯一性的，准确度不变，性能提升
