JavaScript程序的设计（第2版）04.JQuery选择器.pptVIP

* * JQuery选择器 本讲大纲： 1、JQuery的工厂函数 2、基本选择器 3、层级选择器 4、过滤选择器 5、属性选择器 6、表单选择器 JQuery的工厂函数 　　在介绍JQuery的选择器前，我们先来介绍一下JQuery的工厂函数“$”。在JQuery中，无论使用哪种类型的选择符都需要从一个“$”符号和一对“()”开始。在“()”中通常使用字符串参数，参数中可以包含任何CSS选择符表达式。下面介绍几种比较常见的用法。 在参数中使用标记名 　　$(div)：用于获取文档中全部的div。 在参数中使用ID 　　$(#username)：用于获取文档中ID属性值为username的一个元素。 在参数中使用CSS类名 　　$(.btn_grey)：用于获取文档中使用CSS类名为btn_grey的所有元素。 基本选择器 　　基本选择器在实际应用中比较广泛，建议重点掌握JQuery的基本选择器，它是其他类型选择器的基础，基础选择器是JQuery选择器中最为重要的部分。JQuery基本选择器包括ID选择器、元素选择器、类名选择器、多种匹配条件选择器和通配符选择器。下面进行详细介绍。 1．ID选择器（#id） 　　ID选择器#id顾名思义就是利用DOM元素的id属性值来筛选匹配的元素，并以JQuery包装集的形式返回给对象。这就像一个学校中每个学生都有自己的学号一样，学生的姓名是可以重复的但是学号却是不可以的，根据学生的学号就可以获取指定学生的信息。 　　ID选择器的使用方法如下： $(#id); 　　其中，id为要查询元素的ID属性值。例如，要查询ID属性值为user的元素，可以使用下面的JQuery代码： $(#user); 　　在IE浏览器中运行本示例，在文本框中输入“JavaScript”，如图12-11所示，单击“输入的值为”按钮，将弹出提示对话框显示输入的文字，如图12-12所示。 　　JQuery中的ID选择器相当于传统的JavaScript中的document.getElementById()方法，JQuery用更简洁的代码实现了相同的功能。虽然两者都获取了指定的元素对象，但是两者调用的方法是不同的。利用JavaScript获取的对象只能调用DOM方法，而JQuery获取的对象即可以使用JQuery封装的方法也可以使用DOM方法。但是JQuery在调用DOM方法时需要进行特殊的处理，也就是需要将JQuery对象转换为DOM对象。 图12-11 在文本框中输入文字 图12-12 弹出的提示对话框 2．元素选择器（element） 元素选择器是根据元素名称匹配相应的元素。通俗的讲元素选择器指向的是DOM元素的标记名，也就是说元素选择器是根据元素的标记名选择的。可以把元素的标记名理解成学生的姓名，在一个学校中可能有多个姓名为“刘伟”的学生，但是姓名为“吴语”的学生也许只有一个，所以通过元素选择器匹配到的元素可能有多个，也可能是一个。多数情况下，元素选择器匹配的是一组元素。 元素选择器的使用方法如下： $(element); 其中，element为要查询元素的标记名。例如，要查询全部div元素，可以使用下面的JQuery代码： $(div); 例12-2 在页面中添加两个div标记和一个按钮，通过单击按钮来获取这两个div，并修改它们的内容。 （1）创建一个名称为index.html的文件，在该文件的head标记中应用下面的语句引入JQuery库。 script type=text/javascript src=JS/jquery-1.6.1.min.js/script （2）在页面的body标记中，添加两个div标记和一个按钮，代码如下： divimg src=images/strawberry.jpg/这里种植了一棵草莓/div divimg src=images/fish.jpg/这里养殖了一条鱼/div input type=button value=若干年后 / 　　（3）在引入JQuery库的代码下方编写JQuery代码，实现单击按钮来获取全部div元素，并修改它们的内容，具体代码如下： script type=text/javascript $(document).ready(function(){ $(input[type=button]).click(function(){ //为按钮绑定单击事件 $(div).eq(0).html(img src=images/strawberry1.jpg/这里长出了一片草莓);