下载掌阅APP，畅读海量书库
立即打开
基本选择器在实际应用中比较广泛，建议重点掌握jQuery的基本选择器，它是其他类型选择器的基础，基本选择器是jQuery选择器中最为重要的部分。jQuery基本选择器包括ID选择器、元素选择器、类名选择器、多种匹配条件选择器和通配符选择器。下面进行详细介绍。
ID选择器#id顾名思义就是利用DOM元素的id属性值来筛选匹配的元素，并以jQuery包装集的形式返回给对象。这就好像在学校中每个学生都有自己的学号一样，学生的姓名是可以重复的，但是学号却是不能重复的，因此根据学号就可以获取指定学生的信息。
ID选择器的使用方法如下：
$("#id");
其中，id为要查询元素的ID属性值。例如，要查询ID属性值为user的元素，可以使用下面的jQuery代码：
$("#user");
如果页面中出现了两个相同的id属性值，程序运行时页面会报出JS运行错误的对话框，所以在页面中设置id属性值时要确保该属性值在页面中是唯一的。
【例4.1】 在页面中添加一个ID属性值为testInput的文本输入框和一个按钮，通过单击按钮来获取在文本输入框中输入的值。 （实例位置：光盘\TM\sl\4\1）
（1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加一个ID属性值为testInput的文本输入框和一个按钮，代码如下：
<input type="text" id="testInput" name="test" value=""/>
<input type="button" value="输入的值为"/>
（3）在引入jQuery库的代码下方编写jQuery代码，实现单击按钮来获取在文本输入框中输入的值，具体代码如下：
<script type="text/javascript">
$(document).ready(function(){
$("input[type='button']").click(function(){ //为按钮绑定单击事件
var inputValue = $("#testInput").val(); //获取文本输入框的值
alert(inputValue);
});
});
</script>
在上面的代码中，第三行使用了jQuery中的属性选择器匹配文档中的按钮，并且为按钮绑定单击事件。
ID选择器是以“#id”的形式获取对象的，在这段代码中用$("#testInput")获取了一个id属性值为testInput的jQuery包装集，然后调用包装集的val()方法取得文本输入框的值。
在IE浏览器中运行本示例，在文本框中输入“仰天大笑出门去，我辈岂是蓬蒿人”诗句，如图4.2所示，单击“输入的值为”按钮，将弹出提示对话框显示输入的文字，如图4.3所示。
图4.2 在文本框中输入文字
图4.3 弹出的提示对话框
jQuery中的ID选择器相当于传统的JavaScript中的document.getElementById()方法，jQuery用更简洁的代码实现了相同的功能。虽然两者都获取了指定的元素对象，但是两者调用的方法是不同的。利用JavaScript获取的对象是DOM对象，而使用jQuery获取的对象是jQuery对象，这点要尤为注意。
元素选择器是根据元素名称匹配相应的元素。通俗地讲，元素选择器指向的是DOM元素的标记名，也就是说，元素选择器是根据元素的标记名选择的。可以把元素的标记名理解成学生的姓名，在一个学校中可能有多个姓名为“刘伟”的学生，但是姓名为“吴语”的学生也许只有一个，因此通过元素选择器匹配到的元素是可能有多个的，也可能只有一个。多数情况下，元素选择器匹配的是一组元素。
元素选择器的使用方法如下：
$("element");
其中，element是要获取的元素的标记名。例如，要获取全部div元素，可以使用下面的jQuery代码：
$("div");
【例4.2】 在页面中添加两个<div>标记和一个按钮，通过单击按钮来获取这两个<div>，并修改它们的内容。 （实例位置：光盘\TM\sl\4\2）
（1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加两个<div>标记和一个按钮，代码如下：
<div><img src="images/strawberry.jpg"/>这里种植了一棵草莓</div>
<div><img src="images/fish.jpg"/>这里养殖了一条鱼</div>
<input type="button" id="button" value="若干年后" />
（3）在引入jQuery库的代码下方编写jQuery代码，实现单击按钮来获取全部<div>元素，并修改它们的内容，具体代码如下：
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){ //为按钮绑定单击事件
$("div").eq(0).html("<img src='images/strawberry1.jpg'/>这里长出了一片草莓"); //获取第一个div元素
$("div").get(1).innerHTML="<img src='images/fish1.jpg'/>这里的鱼没有了"; //获取第二个div元素
});
});
</script>
在上面的代码中，使用元素选择器获取了一组div元素的jQuery包装集，它是一组Object对象，存储方式为[Object Object]，但是这种方式并不能显示出单独元素的文本信息，需要通过索引器来确定要选取哪个div元素，在这里分别使用了两个不同的索引器eq()和get()。这里的索引器类似于房间的门牌号，所不同的是，门牌号是从1开始计数的，而索引器是从0开始计数的。
在本实例中使用了两种方法设置元素的文本内容，html()方法是jQuery的方法，innerHTML方法是DOM对象的方法。这里使用了$(document).ready()方法，当页面元素载入就绪时就会自动执行程序，自动为按钮绑定单击事件。
eq()方法返回的是一个jQuery包装集，所以它只能调用jQuery的方法，而get()方法返回的是一个DOM对象，所以它只能用DOM对象的方法。eq()方法与get()方法默认都是从0开始计数。
$("#test").get(0)等效于$("#test")[0]
在IE浏览器中运行本示例，首先显示如图4.4所示的页面，单击“若干年后”按钮，将显示如图4.5所示的页面。
图4.4 单击按钮前
图4.5 单击按钮后
类名选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中，一个元素可以有多个CSS类，一个CSS类又可以匹配多个元素，如果在元素中有一个匹配的类的名称就可以被类名选择器选取到。
类名选择器很好理解，在大学的时候大部分人一定都选过课，可以把CSS类名理解为课程名称，元素理解成学生，学生可以选择多门课程，而一门课程又可以被多名学生所选择。CSS类与元素的关系既可以是多对多的关系，也可以是一对多或多对一的关系。简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素。
类名选择器的使用方法如下：
$(".class");
其中，class为要查询元素所用的CSS类名。例如，要查询使用CSS类名为word_orange的元素，可以使用下面的jQuery代码：
$(".word_orange");
【例4.3】 在页面中，首先添加两个<div>标记，并为其中的一个设置CSS类，然后通过jQuery的类名选择器选取设置了CSS类的<div>标记，并设置其CSS样式。 （实例位置：光盘\TM\sl\4\3）
（1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加两个<div>标记，一个使用CSS类myClass，另一个不设置CSS类，代码如下：
<div class="myClass">注意观察我的样式</div>
<div>我的样式是默认的</div>
这里添加了两个<div>标记是为了对比效果，默认的背景颜色都是蓝色的，文字颜色都是黑色的。
（3）在引入jQuery库的代码下方编写jQuery代码，实现按CSS类名选取DOM元素，并更改其样式（这里更改了背景颜色和文字颜色），具体代码如下：
<script type="text/javascript">
$(document).ready(function() {
var $myClass = $(".myClass"); //选取DOM元素
$myClass.css("background-color","#C50210"); //为选取的DOM元素设置背景颜色
$myClass.css("color","#FFF"); //为选取的DOM元素设置文字颜色
});
</script>
在上面的代码中，只为其中的一个<div>标记设置了CSS类名称，但是由于程序中并没有名称为myClass的CSS类，所以这个类是没有任何属性的。类名选择器将返回一个名为myClass的jQuery包装集，利用css()方法可以为对应的div元素设定CSS属性值，这里将元素的背景颜色设置为深红色，文字颜色设置为白色。
类名选择器也可能会获取一组jQuery包装集，因为多个元素可以拥有同一个CSS样式。
在IE浏览器中运行本示例，将显示如图4.6所示的页面。其中，左面的DIV为更改样式后的效果，右面的DIV为默认的样式。由于使用了$(document).ready()方法，所以选择元素并更改样式在DOM元素加载就绪时就已经自动执行完毕。
图4.6 通过类名选择器选择元素并更改样式
复合选择器将多个选择器（可以是ID选择器、元素选择或是类名选择器）组合在一起，两个选择器之间以逗号“，”分隔，只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集，利用jQuery索引器可以取得集合中的jQuery对象。
多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素，而是将每个选择器匹配的元素合并后一起返回。
复合选择器的使用方法如下：
$(" selector1,selector2,selectorN");
selector1：一个有效的选择器，可以是ID选择器、元素选择器或是类名选择器等。
selector1：另一个有效的选择器，可以是ID选择器、元素选择器或是类名选择器等。
selectorN：（可选择）任意多个选择器，可以是ID选择器、元素选择器或是类名选择器等。
例如，要查询文档中的全部的<span>标记和使用CSS类myClass的<div>标记，可以使用下面的jQuery代码：
$(" span,div.myClass");
【例4.4】 在页面添加3种不同元素并统一设置样式。使用复合选择器筛选<div>元素和id属性值为span的元素，并为它们添加新的样式。 （实例位置：光盘\TM\sl\4\4）
（1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加一个<p>标记、一个<div>标记、一个ID为span的<span>标记和一个按钮，并为除按钮以为外的3个标记指定CSS类名，代码如下：
<p class="default">p元素</p>
<div class="default">div元素</div>
<span class="default" id="span">ID为span的元素</span>
<input type="button" value="为div元素和ID为span的元素换肤" />
（3）在引入jQuery库的代码下方编写jQuery代码，实现单击按钮来获取全部<div>元素和id属性值为span的元素，并修改它们的内容，具体代码如下：
<script type="text/javascript">
$(document).ready(function() {
$("input[type=button]").click(function(){ //绑定按钮的单击事件
$("div,#span").addClass("change"); //添加所使用的CSS类
});
});
</script>
运行本示例，将显示如图4.7所示的页面，单击“为div元素和ID为span的元素换肤”按钮，将为div元素和ID为span的元素换肤，如图4.8所示。
图4.7 单击按钮前
图4.8 单击按钮后
所谓的通配符，就是指符号“*”，它代表着页面上的每一个元素，也是说如果使用$("*")将取得页面上所有的DOM元素集合的jQuery包装集。通配符选择器比较好理解，这里就不再给予示例程序。