基于新信息技术的jQuery开发基础教程课件：jQuery选择器

jQuery选择器根据需求精准获取并设置元素2.1什么是选择器2.2CSS选择器2.3jQuery选择器的优势2.4jQuery选择器详细介绍单元总结

2.1什么是选择器

在jQuery选择器API中，CSS选择器的概念同样适用于DOM，也就是说，我们使用jQuery获取指定元素时，可以使用CSS选择器作为$(selector)方法的参数来获取对应元素。比如下面的HTML代码中，页面上有5个段落：<!DOCTYPEhtml>

如果要选择第三个段落，修改段落中的内容，可以使用CSS伪类选择器进行选择，CSS代码如下：

同样，使用jQuery需要选择第三个段落，也可以使用CSS伪类选择器，JavaScript代码如下：

以上HTML代码、CSS代码、JavaScript代码综合运行后，页面的效果如图2-1所示。图2-1页面运行效果图

2.2CSS选择器

了解了jQuery选择器和CSS选择器之间的联系后，我们先来回顾一下CSS选择器。我们在表2-1中列出了一些常用的选择器，更多选择器请参考W3C官方中文帮助文档：/cssref/css_selectors.ASP。

2.3jQuery选择器的优势jQuery选择器具有如下优势：

(1) 写法简洁。$()函数在很多JavaScript类库中都被作为一个选择器函数来使用，在jQuery中也不例外。其中，$("#ID")用来代替document.getElementById()函数，即通过ID获取元素；$("tagName")用来代替document.getElementsByTagName()函数，即通过标签名获取HTML元素，其他选择器的写法大家可以自行进行对比。

(2) 支持从CSS1到CSS3的选择器。

jQuery选择器支持CSS1、CSS2的全部和CSS3的部分选择器，同时它也有少量独有的选择器，因此对拥有一定CSS基础的开发人员来说，学习jQuery选择器是件非常容易的事；而对于没有接触过CSS技术的开发人员来说，在学习jQuery选择器的同时也可以掌握CSS选择器的基本规则。

(3) 完备的处理机制。

使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多，而且还能避免某些错误。比如使用getElementById()获取某个元素时，如果该元素不存在，则浏览器会报错。

如上面的JavaScript代码，如果页面中没有id="myid"的元素，则代码会报错，下面的JavaScript代码则不会执行，此时应将代码修改为：

但如果页面中需要如此操作的元素很多，每个元素都进行一次判断无疑会给开发人员造成大量的工作负担。而jQuery中这方面的问题处理起来就简单多了，jQuery获取元素时，即使页面中不存在获取的元素也不会报错。如下面的代码，功能和上面的原生JavaScript代码效果一样，但简短很多，而且不用担心元素不存在而报错问题。

需要注意的是，$(selector)方法获取的永远是对象，即使网页上没有该元素。因此当要用jQuery检查某个元素在网页上是否存在时，不能使用以下代码：

jQuery中的选择器完全继承了CSS的风格。利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为，而无须担心浏览器是否支持该选择器。学会使用选择器是学习jQuery的基础，jQuery的行为规则都必须在获取到元素后才能生效。

2.4jQuery选择器详细介绍

1. 选择元素元素选择器是根据元素名来选择元素的。语法如下：

$('element')或者

jQuery('element')

在不进行另外设置的情况下，$(美元符号)等价于jQuery对象，此后不再另行说明。

如图2-2所示，HTML代码中存在3个div元素和4个p元素，使用jQuery元素选择器选择其中的div元素，并打印出所选元素个数，jQuery代码如下：

显示结果如图2-2所示。图2-2选择div结果页面

当然，我们也可以使用通配符(*)选取页面中所有的元素，比如下面的代码，它选择到的元素个数为11个。

2. 根据id选择

id选择器是根据id来选择元素，使用井号(#)作为前缀。语法如下：

$('#id')

如图2-3所示，HTML代码中存在3个div元素和4个p元素，使用jQueryid选择器选择其中的id为div3的元素，并修改其文本内容，jQuery代码如下：

$('#div3').text('我找到并修改了id为div3的div中的内容');

显示结果如图2-3所示。图2-3选择id修改文本内容结果页面

3. 根据class选择

class选择器是根据class来选择元素，使用点号(.)作为前缀。语法如下：

$('.id')

如图2-4所示，HTML代码中存在3个div元素和4个p元素，使用jQueryclass选择器选择其中的class为p2的元素，并修改其文本内容，jQuery代码如下：

$('.p2').text('我找到并修改了class为p2的p中的内容');

显示结果如图2-4所示。图2-4选择class修改文本内容结果页面

4. 使用选择器组合精确选择元素

除了前面的三种单独选择器外，我们还可以使用单独选择器进行组合，达到精确选择元素的目的。如选择内部元素的方法是使用空格(space)键连接两个选择器，可以选择第一个选择器选中的元素中的所有第二个选择器选中的元素。语法如下：

$('selector1selector2')

如图2-5所示，选择器选择的是id为“div1”的元素中的所有p元素。而id为“div2”的元素中的p元素则不会被选择。

更多的选择器组合大家可以参考CSS中的组合选择器，此处不再赘述。图2-5使用组合选择器修改文本背景颜色结果页面

5. 根据属性选择元素

jQuery还可以根据元素的属性，以各种非常灵活的方式来选择元素。常用的属性选择器语法如下。

与某个字符串精确匹配：

当然，属性选择器还可以跟其他选择器搭配使用，效果会更好。如下面的代码，将会选择所有div元素中，id以“user”开头的元素，最终输出结果为3：

表2-2总结了不同种类的属性选择器。

6. 根据位置选择元素

jQuery还可以根据元素相对于其他元素的位置来选择元素，或者根据元素在文档中的层次关系来选择元素。比如选择匹配集合中的第一个、最后一个、第n个元素，或者选择位置为奇数或偶数的元素等等。具体语法如下。

如图2-6所示，页面中有一个8×4的表格，要实现隔行变色效果只需要一行jQuery代码即可实现。图2-6组合选择器修改文本背景颜色结果页面

7. 过滤选择器

请注意，上面的选择器全都以冒号(:)开始，类似于CSS中的伪类，这种选择器称为过滤选择器，因为它们的功能是对基本选择器进行过滤。相比于CSS中的伪类，jQuery添加了更多的过滤器，它们的使用方法与前面的例子类似，具体见表2-3～表2-7。

8. 自定义选择器

jQuery允许开发人员对选择器进行扩展，根据项目需求，可能内置的选择器没有最合适的，此时开发人员就可以自己编写选择器。

要创建自定义选择器，必须扩展jQuery对象，下面的代码示例创建了一个用户自定义选择器，选择具有红色背景的元素：

单 元 总 结

原生JavaScript提供的元素查找功能只有六种：

►document.getElementById("id")

►document.getElementsByName("name")

►document.getElementsByClassName("className")

►document.getElementsByTagName("tagName")

►document.querySelector("selector")

►document.querySelectorAll("selector")

其中querySelector()和querySelectorAll()是在JavaScript新版本中模仿jQuery而新增的，它们使用起来较灵活，而其他几种使用起来局限性都比较大，jQuery选择器与它们相比有明显的优势。

当使用原生JavaScript编写客户端应用程序代码时，某些任务将会非常复杂和繁重，jQuery提供了一套简便的解决方