第3章 常规选择器

标签：

学习要点：

1.简单选择器

2.进阶选择器

3.高级选择器

jQuery 最核心的组成部分就是：选择器引擎。

一．简单选择器 

1.元素选择器

2.id选择器

3.类选择器

$(‘div‘).css(‘color‘,‘red‘); //元素选择器，返回多个元素

$(‘#box‘).css(‘color‘,‘red‘); //ID 选择器，返回单个元素

$(‘.box‘).css(‘color‘,‘red‘); //类(class)选择器，返回多个元素

为了证明 ID 返回的是单个元素，而元素标签名和类(class)返回的是多个，我们可以采 用 jQuery 核心自带的一个属性 length 或 size()方法来查看返回的元素个数。

alert($(‘div‘).size()); //3 个

alert($(‘#box‘).size()); //1 个，后面两个失明了

alert($(‘.box‘).size()); //3 个

二．进阶选择器

//群组选择器span,em,.box{ color:red;} //多种选择器添加红色字体

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

//后代选择器

ul li a{  color:red; }//层层追溯到的元素添加红色字体

$(‘ullia‘).css(‘color‘,‘red‘); //群组选择器 jQuery 方式

//通配选择器

*{  color:red; }//页面所有元素都添加红色字体

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

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

$(‘#box p,ul li *‘).css(‘color‘,‘red‘); //组合了多种选择器
警告：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$(‘*‘)， 这种使用方法效率很低，影响性能，建议竟可能少用。
还有一种选择器，可以在 ID 和类(class)中指明元素前缀，比如： $(‘div.box‘); //限定必须是.box 元素获取必须是 div $(‘p#boxdiv.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 是唯一性的，准确度不变，性能提升

三．高级选择器 

//后代选择器
$(‘#boxp‘).css(‘color‘, ‘red‘); //全兼容
jQuery 为后代选择器提供了一个等价 find()方法
$(‘#box‘).find(‘p‘).css(‘color‘,‘red‘); //和后代选择器等价

//子选择器，孙子后失明
#box>p{ color:red; }//IE6 不支持
$(‘#box>p‘).css(‘color‘,‘red‘); //兼容 IE6
jQuery 为子选择器提供了一个等价 children()方法：
$(‘#box‘).children(‘p‘).css(‘color‘,‘red‘); //和子选择器等价

//next 选择器(下一个同级节点)
#box+p{ color:red; } //IE6 不支持
$(‘#box+p‘).css(‘color‘, ‘red‘); //兼容 IE6
jQuery 为 next 选择器提供了一个等价的方法 next()：
$(‘#box‘).next(‘p‘).css(‘color‘,‘red‘); //和 next 选择器等价

//nextAll 选择器(后面所有同级节点)
#box~p{ color:red; }//IE6 不支持
$(‘#box~p‘).css(‘color‘,‘red‘); //兼容 IE6
jQuery 为 nextAll 选择器提供了一个等价的方法 nextAll()：
$(‘#box‘).nextAll(‘p‘).css(‘color‘,‘red‘); //和 nextAll 选择器等价

层次选择器对节点的层次都是有要求的，比如子选择器，只有子节点才可以被选择到， 孙子节点和重孙子节点都无法选择到。next 和 nextAll 选择器，必须是同一个层次的后一个 和后 N 个，不在同一个层次就无法选取到了。
在 find()、next()、nextAll()和 children()这四个方法中，如果不传递参数，就相当于传递 了“*”，即任何节点，我们不建议这么做，不但影响性能，而且由于精准度不佳可能在复杂 的 HTML 结构时产生怪异的结果。$(‘#box‘).next(); //相当于$(‘#box‘).next(‘*‘);

第3章 常规选择器

标签：

原文地址：http://www.cnblogs.com/Xuman0927/p/5957345.html