这是《jQuery入门教程笔记》系列2，在第2篇里面将开始讲述jQuery很重要的一种东西，那就是选择器，这篇先从基本选择器讲起。
下面是基本选择器的语法表格：
选择器
功能
返回值
| #id
|
根据给定的ID匹配一个元素
|
单个元素
|
| element
|
根据给定元素名匹配所有元素
|
元素集合
|
| .class
|
根据给定的类匹配元素
|
元素集合
|
| *
|
匹配所有元素
|
元素集合
|
| selector1,selectorN
|
将每一个选择器匹配到的元素合并后一起返回
|
元素集合
|
下面是基本选择器的示例，该示例我是在原书（[《jQuery权威指南》](http://item.tmall.com/item.htm?id=10862959121&prc=1&ali_trackid=2:mm_13275160_0_0:1314978130_3z4_1193337051)）的基础上修改的，为了更好的来理解没有方式的选择器是如何工作的，建议各位新手依次把下面代码中的所有选择器用法先注释掉，然后一条一条，一个一个的来实验，然后观察效果如何。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>chap2-2</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.20" />
<script language="javascript" type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style type="text/css">
body{
font-size:12px;
text-align:center;
}
.clsFrame{
width:300px;
height:100px;
float:left;
}
.clsFrame div,span{
display:none;
float:left;
width:65px;
height:65px;
border:solid 1px #ccc;
margin:8px;
}
.clsOne{
background-color:#eee;
}
</style>
<script type="text/javascript">
$(function(){ //ID匹配元素
$("#divOne").css("display","block");
//$("#divOnei").css("display","block");
});
/*$(function(){ //元素名匹配元素
$("div span").css("display","block");
});
$(function(){ //类匹配元素
$(".clsFrame .clsOne").css("display","block");
});*/
$(function(){ //合并匹配元素
$("#divOne,span").css("display","block");
});
</script>
</head>
<body>
<div class="clsFrame">
<div id="divOne">ID</div>
<div class="clsOne">CLASS</div>
<span>SPAN</span>
</div>
<div class="clsFrame">
<div id="divOnei">ID</div>
<div class="clsOne">CLASS</div>
<span>SPAN</span>
</div>
</body>
</html>
|