jQuery网页特效设计基础教程（慕课版）（第2版）课件 第3单元 使用jQuery 选择器.pptx

第3单元使用jQuery选择器jQuery网页特效设计基础教程（慕课版）（第2版）

了解什么是jQuery的工厂函数。了解什么是jQuery选择器。掌握基本选择器的使用。掌握层次选择器的使用。掌握过滤选择器的使用。掌握属性选择器的使用。掌握表单选择器的使用。了解混淆选择器的使用。教学目标pedagogicalobjectives能够熟练使用jQuery的各种选择器。能够选择合适的jQuery选择器进行开发。通过学习选择器的使用，培养从多角度观察和筛选信息的能力，增强代码设计的条理性和操作目标的精准性，提升信息处理与操作效率。

目录导航3.1jQuery的工厂函数3.3jQuery选择器的优势3.5层次选择器3.2什么是jQuery选择器3.4基本选择器3.7属性选择器3.9混淆选择器3.6过滤选择器3.8表单选择器3.11项目实战：表格隔行换色及鼠标指针指向行变色3.10使用选择器时的注意事项

3.1jQuery的工厂函数在jQuery中，无论使用哪种类型的选择符，都需要从一个“$”符号和一个“()”开始。在“()”中通常使用字符串参数，在参数中可以使用任意CSS选择符表达式。在参数中使用标记名在参数中使用id010203$(div)：用于获取文档中全部div标记。在参数中使用CSS类名$(#username)：用于获取文档中id属性值为username的一个元素。$(.btn_grey)：用于获取文档中CSS类名为btn_grey的所有元素。

目录导航3.1jQuery的工厂函数3.3jQuery选择器的优势3.5层次选择器3.2什么是jQuery选择器3.4基本选择器3.7属性选择器3.9混淆选择器3.6过滤选择器3.8表单选择器3.11项目实战：表格隔行换色及鼠标指针指向行变色3.10使用选择器时的注意事项

3.2什么是jQuery选择器jQuery选择器用于查找和操作元素，是jQuery库中非常重要的部分。它支持网页开发人员所熟知的CSS语法，能够轻松、快速地对页面进行设置。jQuery选择器是打开高效开发jQuery之门的钥匙。典型的jQuery选择器的语法格式为：$(selector).methodName();selector是一个字符串表达式，用于识别DOM元素，然后使用jQuery提供的方法集合加以设置。多个jQuery操作可以以链的形式串起来，语法格式为：$(selector).method1().method2().method3();例如，要隐藏id为test的DOM元素，并为它添加名为content的样式，实现代码如下：$(#test).hide().addClass(content);使用起来非常方便就是jQuery选择器的强大之处。

目录导航3.1jQuery的工厂函数3.3jQuery选择器的优势3.5层次选择器3.2什么是jQuery选择器3.4基本选择器3.7属性选择器3.9混淆选择器3.6过滤选择器3.8表单选择器3.11项目实战：表格隔行换色及鼠标指针指向行变色3.10使用选择器时的注意事项

3.3.1代码更简单在jQuery库中封装了大量可以直接通过选择器调用的方法或函数，使人们仅使用简单的几行代码就可以实现比较复杂的功能。例如，使用$(#id)代替JavaScript代码中的document.getElementById()函数，即通过id来获取元素；使用$(tagName)代替JavaScript代码中的document.getElementsByTagName()函数，即通过标记名来获取HTML元素；等等。

3.3.2支持CSS1～CSS3选择器jQuery选择器支持CSS1、CSS2的全部选择器和CSS3几乎所有的选择器以及jQuery独创的、高级且复杂的选择器，因此有一定CSS经验的开发人员可以很容易地切入jQuery的学习中。一般来说，在使用CSS选择器时，开发人员需要考虑主流的浏览器是否支持某些jQuery选择器。在jQuery中，开发人员可以放心地使用jQuery选择器，无须考虑主流的浏览器是否支持这些jQuery选择器，这极大地方便了开发人员进行开发工作。

3.3.3完善的检测机制在传统的JavaScript代码中，给页面中的元素设定某个事务时必须先找到该元素，然后为其赋予相应的事件或属性；如果该元素在页面中不存在或已被删除，那么浏览器会提示运行出错的信息，这会影响之后代码的执行。因此，为避免提示这样的出错信息，通常要先检测该元素是否存在，如果存在，再执行