JQuery常规选择器入门

一、简单选择器

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

//使用ID 选择器的CSS 规则：
#box { 
    //将ID 为box 的元素字体颜色变红
    color：red;
}

在JQuery选择器里，我们使用如下方式来获取同样的结果：

//获取DOM节点对象，并添加行为。
$('#box').css('color'，'red');

那么除了ID选择器之外，还有两种基本的选择器：元素标签名和类（class）。

CSS选择器与JQuery选择器对比

选择器	CSS模式	JQuery模式	描述
元素标签选择器	div{ }	$('div')	获取所有div元素的DOM对象
ID选择器	#box{ }	$('#box')	获取一个ID为box元素的DOM对象
类选择器(class)	.box	$('.box')	获取所有class为box的所有DOM对象

二、进阶选择器

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

获取多个选择器的DOM对象

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

• CSS选择器用法：

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


//后代选择器
ul li a { //层层追溯到的元素添加红色字体
    　　color：red;
}

//通配选择器
 * { //页面所有元素都添加红色字体
    　　color：red;
}

• JQuery选择器用法:

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

//后代选择器JQuery方式
$('ul li a').css('color', 'red'); 

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

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

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

警告：在实际使用上，通配选择器一般用得并不多，尤其是在大通配上，比如：$（'*'）。这种使用方法效率很低，影响性能，建议尽可能少用。还有一种选择器，可以在ID和类（class）中指明元素前缀，比如：

//限定必须是.box元素
$（'div.box'）;
$（'p#box div.side'）;//同上

类（class）有一个特殊的模式，就是同一个DOM节点可以声明多个类（class）。那么对于这种格式，我们有多class选择器可以使用，但要注意和class群组选择器的区别。多class选择器是指必须一个DOM节点同时有多个class，用这些class进行精确限定。而群组class选择器，只不过是多个class进行选择而已。

$（'.box，.pox'）.css（'color'，'red'）;//加了逗号，体会区别。

警告：在构造选择器时，有一个通用的优化原则：只追求必要的确定性。当选择器筛选越复杂，JQuery内部的选择器引擎处理字符串的时间就越长。比如：

$（'div#box ul li a#link'）;//让JQuery内部处理了不必要的字符串
$（'#link'）;//ID是唯一性的，准确度不变，性能提升

 三、高级选择器

在前面我们学习了六种最常规的选择器，一般来说通过这六种选择器基本上可以解决所有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的。

   //后代选择器
    $（'#box p'）.css（'color'， 'red'）； //全兼容

    JQuery为后代选择器提供了一个等价find（）方法

    $（'#box'）.find（'p'）.css（'color'， 'red'）； //和后代选择器等价

    //子选择器，孙子后失明
    #box > p { //IE6 不支持
    　　color：red；
    }

    $（'#box > p'）.css（'color'， 'red'）； //兼容IE6

JQuery为子选择器提供了一个等价children（）方法：

$（'#box'）.children（'p'）.css（'color'， 'red'）； //和子选择器等价 

//next选择器（下一个同级节点）
#box + p { //IE6不支持
   color：red；
}
    
$（'#box+p'）.css（'color'， 'red'）； //兼容IE6

JQuery为next 选择器提供了一个等价的方法next（）：

$（'#box'）.next（'p'）.css（'color'， 'red'）； //和next 选择器等价

//nextAll选择器（后面所有同级节点）
#box ~ p { //IE6不支持
   color：red；
}

$（'#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（'*'）；

为了补充高级选择器的这三种模式，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'）； //同级上下所有元素选定
//等价于下面：
$（'#box'）.prevAll（'p'）.css（'color'， 'red'）； //同级上所有元素选定
$（'#box'）.nextAll（'p'）.css（'color'， 'red'）； //同级下所有元素选定

注意：我们应该推荐使用哪种方案呢？其实，使用哪种方案都差不多。这里，我们推荐使用JQuery提供的方法。因为不但方法的速度比高级选择器运行得更快，并且它的灵活性和扩展性要高于高级选择器。使用“+”或“~”从字面上没有next和nextAll更加语义化，更加清晰，JQuery的方法更加丰富，提供了相对的prev和prevAll。毕竟JQuery是编程语言，需要能够灵活的拆分和组合选择器，而使用CSS模式过于死板。所以，如果JQuery提供了独立的方法来代替某些选择器的功能，我们还是推荐优先使用独立的方法。

属性选择器

CSS模式	JQuery模式	描述
E［A］	$('E[A]')	匹配表签名为E的所有元素，这些元素拥有特性A
E［A = V］	$('E[A = V]')	匹配表签名为E的所有元素，这些元素的A特性值为V
E［A ^= V］	$('E[A ^= V]')	匹配表签名为E的所有元素，这些元素的A特性值以V开头
E［A |= V］	$('E[A |= V]')	匹配表签名为E的所有元素，这些元素的A特性值等于V或开头属性值匹配V后面跟一个“-”号
E［A $= V］	$('E[A $= V]')	匹配表签名为E的所有元素，这些元素的A特性值以V结尾
E［A != V］	$('E[A != V]')	匹配表签名为E的所有元素，这些元素的A特性值不等于V
E［A ~= V］	$('E[A ~= V]')	匹配表签名为E的所有元素，这些元素的A特性值是以空格分隔的列表并包含V
E［A *= V］	$('E[A *= V]')	匹配表签名为E的所有元素，这些元素的A特性值包含V

• JQuery属性选择器举例：

//匹配herf特性值以http://开头的链接
a[herf^='http://']

//匹配type特性为text的所有<input>元素
input[type='text']

//匹配title特性值以my开头的所有div元素
div[title^='my']

//匹配herf特性值以.pdf结尾的链接
a[herf$='.pdf']

//获取指向JQuery站点的所有<a>元素
a[herf*='jquery.com']

以上只是JQuery的基础选择器，更高级的选择器(过滤选择器)将在下一篇文章介绍。