《锋利的jQuery》读书笔记第二章（jQuery选择器）

jQuery选择器

 jQuery中的完全继承了CSS的风格。利用jQuery选择器，可以非常便捷和快速地找出特定地DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。学会使用选择器是学习jQuery的基础，jQuery的行为规则都必须在获取到元素后才能生效。 jQuery选择器的写法与CSS选择器的写法十分相似，只不过两者的作用效果不同，CSS选择器找到元素后是添加样式，而jQuery选择器找到元素后是添加行为。需要特别说明的是，jQuery中涉及操作CSS样式的部分比单纯的CSS功能更为强大，并且拥有跨浏览器的兼容性。

jQuery选择器的优势

1.简洁的写法

 $()函数在很多JavaScript类库中都被作为一个选择器函数来使用，在jQuery中也不例外。其中，$("#ID")用来代替document.getElementById()函数，即通过ID来获取元素；$("tagName")用来代替document.getElementsByTagName()函数，即通过标签名获取HTML元素。

2.支持CSS1到CSS3选择器

  jQuery选择器支持CSS1、CSS2的全部和CSS3的部分选择器，同时它也有少量独有的选择器，因此对拥有一定CSS基础的开发人员来说，学习jQuery选择器是件非常容易的事，而对于没有接触过CSS技术的开发人员来说，在学习jQuery选择器的同时也可以掌握CSS选择器的基本规则。使用CSS选择器时，开发人员需要考虑主流浏览器是否支持某些选择器。而在jQuery中，开发人员则可以放心使用jQuery选择器而无需考虑浏览器是否支持这些选择器。

3.完善的处理机制
使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多，而且还能避免某些错误。看下面这个例子，代码如下：

<div>test</div><script type="text/javascript">    document.getElementById("tt").style.color = "red";</script>

运行上面的代码，浏览器就会报错，原因是网页中没有id为”tt”的元素。
改进后的代码如下：

<div>test></div><script type="text/javascript">    if (document.getElementById("tt")) {        document.getElementById("tt").style.color = "red";    }</script>

这样就可以避免浏览器报错，但如果要操作的元素很多，可能对每个元素都要进行一次判断，大量重复的工作使开发人员感到厌倦，而jQuery在这方面问题上的处理是非常不错的，即使使用jQuery获取网页中不存在的元素也不会报错，看下面的例子，代码如下：

<div>test</div><script type="text/javascript">    $("#tt").css("color","red");  //这里无需判断$("#tt")是否存在</script> 

有了这个预防措施，即使以后因为某种原因删除网页上某个以前使用过的元素，也不用担心这个网页的javascript代码会报错。
而需要注意的是，$(“#tt”)获取的永远是对象，即使网页上没有元素。因此当要使用jQuery检查某个元素在网页上是否存在时，不能使用以下代码：

if ($("#tt")) {    //do something}

而应该根据获取到元素的长度来判断，代码如下：

if ($("#tt).length > 0) {    //do something}

或者转化成DOM对象来判断，代码如下:

if ($("#tt")[0]) {    //do something} 

jQuery选择器

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。在下面的章节中将分别用不同的选择器来查找HTML代码中的元素并对其进行简单的操作。为了能更清晰、直观地讲解选择器，首先需要设计一个简单的页面，里面包含各种<div>元素和<span>元素，然后使用jQuery选择器来匹配元素并调整它们的样式。

基本选择器

基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使用。基本选择器的介绍说明如下:

选择器 描述 返回 示例 id 根据给定的id匹配一个元素 单个元素 $(“#test”)选取id为test的元素 .class 根据给定的类名匹配元素 集合元素 $(“.test”)选取所有class为test的元素 element 根据给定的元素名匹配元素 集合元素 $(“p”)选取所有的元素 * 匹配所有元素 集合元素 $(“*”)选取所有的元素 selector1,selector2….,selectorN 将每一个选择器匹配到的元素合并后一起返回 集合元素 $(“div,span,p.myClass”选取所有,和拥有class为myClass的标签的一组元素)

层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和兄弟元素等，那么层次选择器是一个非常好的选择。层次选择器的介绍如下:

过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则CSS中的伪类选择器语法相同，即选择器都以一个冒号（:）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

1.基本过滤选择器


2.内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。内容过滤选择器的介绍如下:

3.可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。可见性过滤选择器的介绍如下：

4.属性过滤选择器

 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。属性过滤选择器的介绍如下：

5.子元素过滤选择器

    子元素过滤选择器的过滤规则相对于其他选择器稍微有些复杂，不过没关系，只要将元素的父元素和子元素区分清楚，那么使用起来也非常简单。另外还注意它与普通的过滤选择器的区别。

6.表单对象属性过滤选择器

此对象主要是对所选择的表单元素进行过滤。例如选择被选中的下拉框，多选框等。

表单选择器

  为了使用户能够更加灵活地操作表单，jQuery中专门加入了表单选择器，利用这个选择器，能极其方便地获取到表单地某个或某类型地元素。

选择器中地一些注意事项

选择器中含有特殊符号的注意事项
1.选择器中含有”.”、”#”、”(“或”[“等特殊字符
根据W3C的规定，属性值中使不能含有这些特殊字符的，但在实际项目中偶尔会遇到表达式中含有”#”和”.”等特殊字符，如果按照普通的方式去处理出来的话就会出错。解决此类错误的方法是使用转义符转义
HTML代码如下:

<div id="id#b">bb</div><div id="id[1]">cc</div>

如果按照普通的方式来获取，例如：

$("#id#b");$("#id[1]");

以上代码不能正确获取到元素，正确的写法如下:

$("#id\\#b");       //转义特殊字符"#"$(""#id\\[1\\]);    //转义特殊字符"[ ]"

选择器中含有空格的注意事项

 选择器中的空格也是不容忽视的，多一个空格或少一个空格也许会得到截然不同的结果。看下面这个例子，它的HTML代码如下：

<div class="test">    <div style="display:none;">aa</div>    <div style="display:none;">bb</div>    <div style="display:none;">cc</div>    <div class="test" style="display:none;">dd</div></div><div class="test" style="display:none;">ee</div><div class="test" style="display:none;">ff</div>

使用如下jQuery选择器分别获取它们

var $t_a = $('.test :hidden');  //带空格的jQuery选择器var $t_b = $('.test:hidden');   //不带空格的jQuery选择器var len_a = $t_a.length;var len_b = $t_b.length;alert("$('.test :hidden') = " + len_a);  //输出4alert("$('.test:hidden')= " + len_b);    //输出3

之所以会出现不同的结果，是因为后代选择器与过滤选择器的不同

var $t_a = $('.test :hidden');

以上代码是选取class为”“test”的元素里面的隐藏元素。

var $t_b = $('.test:hidden');

则是选取隐藏的class为”test”的元素.

其他选择器

jQuery提供的选择器扩展

虽然jQuery提供了许多实用的选择器，但还是有可能不能满足各种多变的业务需要，不过jQuery选择器是可以进一步扩展的。

1.MoreSelectors for jQuery

这是一个jQuery的插件，用于增加更多的选择器，例如.color可以匹配颜色，:colIndex可以匹配表格中的列，:focus可以匹配获取焦点的元素等等。

2.Basic XPath

这个插件可以让用户使用基本的XPath。jQuery最开始支持XPath选择器，但由于使用人数不多，且降低了选择器匹配的效率，因此在1.2以后的版本中取消了默认对XPath选择器的支持，改为通过插件来实现。

其他使用CSS选择器的方法

除了jQuery提供了强大的选择器支持外，也有其他一些JavaScript脚本也提供了此类纯粹的CSS选择器的支持。

1.document.getElementBySelector()
早在2003年，Simon Willison就编写了该脚本，它的作用是通过选择器来获取文档元素。读者可以通过以下代码获取元素

document.getElementBySelector('#div#main p a.external');

该版本最新版本为0.4版，更新日期为2003年3月25日

2.cssQuery()
这是Dean Edwards编写的一款利用CSS选择器查找元素的脚本。支持所有CSS1、CSS2以及部分CSS3选择器，jQuery的选择器其实是源自于此，它支持一些jQuery尚不支持的选择器，例如E：link、E：nth-child、E：root、E：target和E[fool=”bar”]等。语法结构如下

elements = cssQuery(selector[,form]);

3.querySelctorAll()
这不是一个脚本库，而是W3C在Selector API草案中提到的方法，该草案的最新版本是在2007年12月21日发布的。此方法也是用于实现通过CSS选择器来获取元素的。IE8的Beta2中已经率先实现了此方法。相信其他几大浏览器也很快实现此方法。
JQuery的作者John Resig也表示将会利用querySelectorAll()这个浏览器原生的方法来重jQuery的选择器，同时增加一些jQuery扩展的选择器，届时jQuery选择器的执行效率也将大大提高。