jQuery - 选择器（一）

时间：2010-09-27 来源：千叶红枫

jQuery 选择器是使用jQuery的基础。

jQuery中通过选择器获取的值是一个Object（能否叫jQuery对象？咱暂且这么叫吧！）。

jQuery选择器分类：

基本：

全部选择器（“*”）

ID选择器（“#id”）

Class选择器（“.class”）

元素选择器（“element”）

组选择器（“selector1,selector2,selector3...selectorN”）

这些是基本选择器，这里需要注意的是通过ID选择器返回的是具有ID属性的jQuery对象（叫DOM对象，有些不妥当，$("#id")显然和document.getElementById("id")不相等，也许我这样比较本身就有问题），其余选择器返回的是一个jQuery数组对象并且可以像访问数组那样使用下标访问，下标是以0开始的。

使用ID选择器的例子：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2  <HTML>
 3  <HEAD>
 4   <style>
 5     div{
 6         width:50px;
 7         height:50px;
 8         border:1px solid red;
 9         float:left;
10         margin:10px;
11     }
12   </style>
13   <script type="text/javascript" src="jquery/jquery.js"></script>
14   <script language="javascript">
15     $(document).ready(
16         function(){
17             $("#div2").css("border","1px solid blue");
18         }
19     )
20   </script>
21  </HEAD>
22 
23  <BODY>
24     <div id="div1">div1</div>
25     <div id="div2">div2</div>
26  </BODY>
27  </HTML>
28

显示结果：

使用组选择器的列子：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2  <HTML>
 3  <HEAD>
 4   <style>
 5     div,p,span{
 6         width:50px;
 7         height:50px;
 8         border:1px solid red;
 9         float:left;
10         margin:10px;
11     }
12   </style>
13   <script type="text/javascript" src="jquery/jquery.js"></script>
14   <script language="javascript">
15     $(document).ready(
16         function(){
17             $("#div2,span,p.p1class").css("border","1px solid blue");
18         }
19     )
20   </script>
21  </HEAD>
22 
23  <BODY>
24     <div id="div1">div1</div>
25     <div id="div2">div2</div>
26     <p class="p1class">p1class</p>
27     <p class="p2class">p2class</p>
28     <span>span</span>
29  </BODY>
30 </HTML>

显示结果：

在使用组选择器时需要注意顺序的问题：返回的结果不是选择器中的排列顺序而是符合选择条件的对象在文档流中的顺序。

官网上的一个例子：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2  <HTML>
 3  <HEAD>
 4   <style>
 5     b{
 6         color:red;
 7         font-size:16px;
 8         display:block;
 9         clear:left; }
10     div,span,p{
11         width: 40px;
12         height: 40px;
13         float:left;
14         margin: 10px;
15         background-color: blue; 
16         padding:3px;
17         color:white; }
18   </style>
19   <script type="text/javascript" src="jquery/jquery.js"></script>
20   <script language="javascript">
21     $(document).ready(
22         function(){
23             var list = $("div,p,span").map(
24                 function()
25                 {
26                     return this.tagName;
27                 }).get().join(", ");
28             $("b").append(document.createTextNode(list)
29             );
30         }
31     )
32   </script>
33  </HEAD>
34 
35  <BODY>
36     <span>span</span>
37     <p>p</p>
38     <p>p</p>
39     <div>div</div>
40     <span>span</span>
41     <p>p</p>
42     <div>div</div>
43     <b></b>
44  </BODY>
45  </HTML>
46

显示结果：