第1章 WEB前端开发工程师-jQuery框架 1-4：jQuery进阶选择器

                                                    jQuery 进阶选择器

 

本节课所讲内容：

1. jQuery进阶选择器

 

                                                                         主讲教师：Head老师

一. jQuery进阶选择器

在简单选择器中，我们了解了最基本的三种选择器：元素标签名、ID 和类(class)。那么在基础选择器外，还有一些进阶和高级的选择器方便我们更精准的选择元素。

选择器	CSS模式	jQuery 模式	描述
群组选择器	span,em,.box {}	$('span,em,.box')	获取多个选择器的 DOM 对象
后代选择器	ul li a {}	$('ul li a')	获取追溯到的多个 DOM 对象
通配选择器	* {}	$('*')	获取所有元素标签的 DOM 对象

//群组选择器

span, em, .box { //多种选择器添加红色字体

color:red;

}

$('span, em, .box').css('color', 'red'); //群组选择器 jQuery 方式

//后代选择器

ul li a { //层层追溯到的元素添加红色字体

color:red;

}

$('ul li a').css('color', 'red'); //群组选择器 jQuery 方式

//通配选择器

* { //页面所有元素都添加红色字体

color:red;

}

$('*').css('color', 'red'); //通配选择器

目前介绍的六种选择器，在实际应用中，我们可以灵活的搭配，使得选择器更加的精准

和快速：

$('#box p, ul li *').css('color', 'red'); //组合了多种选择器

警告：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$('*')，

这种使用方法效率很低，影响性能，建议竟可能少用。

还有一种选择器，可以在 ID 和类(class)中指明元素前缀，比如：

$('div.box'); //限定必须是.box 元素获取必须是 div

$('p#box div.side'); //同上

类(class)有一个特殊的模式，就是同一个 DOM 节点可以声明多个类(class)。那么对于这

种格式，我们有多 class 选择器可以使用，但要注意和 class 群组选择器的区别。

.box.pox { //双 class 选择器，IE6 出现异常

color:red;

}

$('.box.pox').css('color', 'red'); //兼容 IE6，解决了异常

多 class 选择器是必须一个 DOM 节点同时有多个 class，用这多个 class 进行精确限定。

而群组 class 选择器，只不过是多个 class 进行选择而已。

$('.box, .pox').css('color', 'red'); //加了逗号，体会区别

警告：在构造选择器时，有一个通用的优化原则：只追求必要的确定性。当选择器筛选

越复杂，jQuery 内部的选择器引擎处理字符串的时间就越长。比如：

$('div#box ul li a#link'); //让 jQuery 内部处理了不必要的字符串

$('#link'); //ID 是唯一性的，准确度不变，性能提升