jQuery 选择器引擎

jQuery 最核心的组成部分就是：选择器引擎。它继承了 CSS 的语法，可以对 DOM 元 素的标签名、属性名、状态等进行快速准确的选择，并且不必担心浏览器的兼容。

一.简单选择器

在使用 jQuery 选择器时，我们首先必须使用“$()”函数来包装我们的 CSS 规则。而 CSS 规则作为参数传递到 jQuery 对象内部后，再返回包含页面中对应元素的 jQuery 对象。 随后，我们就可以对这个获取到的 DOM 节点进行行为操作了。

使用 ID 选择器的 CSS 规则 ：

#box{ color:red; }

使用ID选择器的jQuery规则：

$('#box').css('color','red');  //获取dom节点对象，并添加样式

那么除了ID选择器外，还有两种基本的选择器，一个是类（class），一个是标签名。

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

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

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

警告：有个问题特别要注意，ID 在页面只允许出现一次，我们一般都是要求开发者要 遵守和保持这个规则。但如果你在页面中出现三次，并且在 CSS 使用样式，那么这三个元 素还会执行效果。但如果，你想在 jQuery 这么去做，那么就会遇到失明的问题。所以，开 发者必须养成良好的遵守习惯，在一个页面仅使用一个 ID。

有一点是：CSS 在添加样 式的时候，高级选择器会对部分浏览器不兼容，而 jQuery 选择器在添加 CSS 样式的时候却 不必为此烦恼。

举例：

#box>p{ color:red; }                //CSS 子选择器，IE6 不支持
$('#box>p').css('color','red');    //jQuery 子选择器，兼容了 IE6

jQuery选择器在获取节点对象的时候不但简单，还内置了容错功能，这样避免像JavaScript 那样每次对节点的获取需要进行有效判断。

$('#pox').css('color','red');      //不存在 ID 为 pox 的元素，也不报错
document.getElementById('pox').style.color='red';   //报错

那么对于缺失不存在的元素，我们使用 jQuery 调用的话，怎么去判断是否存在呢？因 为本身返回的是 jQuery 对象，可能会导致不存在元素存在与否，都会返回 true。

//判断元素包含数量即可
if($('#pox').length>0{$('#pox').css('color','red'); }

二、进阶选择器

$('span,em,.box').css('color','red');   //群组选择器
$('ullia').css('color','red');          //后代选择器
$('*').css('color','red');              //通配选择器

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

$('#boxp,ulli*').css('color','red');   //组合了多种选择器

警告：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$(‘*’)， 这种使用方法效率很低，影响性能，建议竟可能少用。

多 class 选择器是必须一个 DOM 节点同时有多个 class，用这多个 class 进行精确限定。 而群组 class 选择器，只不过是多个 class 进行选择而已。

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

三．高级选择器 （层级选择器）



在层次选择器中，除了后代选择器之外，其他三种高级选择器是不支持 IE6 的，而 jQuery 却是兼容 IE6 的，同时jQuery提供了几种方法。

$('#boxp').css('color', 'red');     //后代选择器
$('#box').find('p').css('color','red');    //find()，和后代选择器等同

$('#box>p').css('color','red');    //子选择器
$('#box').children('p').css('color','red'); //children()，和子选择器等同

$('#box+p').css('color', 'red');   //next选择器
$('#box').next('p').css('color','red');  //next()，和next选择器等同

$('#box~p').css('color','red');  //nxetAll选择器
$('#box').nextAll('p').css('color','red'); //nextAll（），和nextAlL选择器等同

在 find()、next()、nextAll()和 children()这四个方法中，如果不传递参数，就相当于传递 了“*”，即任何节点，我们不建议这么做，不但影响性能，而且由于精准度不佳可能在复杂 的 HTML 结构时产生怪异的结果。

$('#box').next(); //相当于$('#box').next('*');

为了补充高级选择器的这三种模式，jQuery 还提供了更加丰富的方法来选择元素：

$('#box').prev('p').css('color','red'); 	//同级上一个元素 $('#box').prevAll('p').css('color', 'red'); //同级所有上面的元素

nextUntil()和 prevUnitl()方法是选定同级的下面或上面的所有节点，选定非指定的所有 元素，一旦遇到指定的元素就停止选定。

//同级上非指定元素选定，遇到则停止
$('#box').prevUntil('p').css('color','red');
//同级下非指定元素选定，遇到则停止
$('#box').nextUntil('p').css('color','red');

siblings()方法正好集成了 prevAll()和 nextAll()两个功能的效果，及上下相邻的所有元素 进行选定：

//同级上下所有元素选定
$('#box').siblings('p').css('color','red');

四、属性选择器

//获取具有这个属性的 DOM 对象
$('a[title]')

//获取具有这个属性=这个属性值的DOM对 象
$('a[title=num1]')

//获取具有这个属性且开头属性值匹配的 DOM 对象
$('a[title^=num]')

//获取具有这个属性且等于属性值或开头属 性值匹配后面跟一个“-”号的 DOM 对象
$('a[title|=num]')

//获取具有这个属性且结尾属性值匹配的 DOM 对象
$('a[title$=num]')

//获取具有这个属性且不等于属性值的 DOM 对象
$('a[title!=num]')

//获取具有这个属性且属性值是以一个空格 分割的列表，其中包含属性值的 DOM 对 象
$('a[title~=num]')

//获取具有这个属性且属性值含有一个指定 字串的 DOM 对象
$('a[title*=num]')

//获取具有这个属性且属性值匹配的 DOM 对象
$('a[bbb][title=num1]')

关于属性选择器，演示出来比较麻烦，就简化了。就酱。