jQuery学习（二） jQuery选择器
文章来源：365jz.com 点击数：758 更新时间：2009-09-17 10:13 参与评论
jQuery选择器$()是jQuery的核心部分，他能够精确查找页面中的元素。
$()函数不需要像普通的JavaScript代码来遍历一组元素，它能够帮我们自动遍历，下面来看看jQuery常用的选择器。
- CSS选择器类型
- 标签形式：$('p'),这将获得页面中所有的p元素，可以在jQuery中这样写：$('p').addClass('.para'),这样就为整个页面的p元素都添加了样式类.para。
- CSS的ID选择器形式：$('#thisid'),将会获得id='thisid'的元素,同样可以通过addClass()方法为该元素添加样式规则。
- 类似CSS的类选择器形式：$('.content'),将会得到class="content"的所有元素(比如<div class="content"></div>)。
- XPath选择器类型
3. 自定义选择器
对于各种的CSS和XPath选择器，jQuery加入了它自定义的选择器，大部分的自定义选择器能让我们在一个队列外选择一些元素。它的语法和CSS伪类语法类似（不知道Learning Jquery这本书为什么不把这种形式也归结到CSS类型选择器中），即选择器以冒号开头。例如我们想从一组匹配选择带有horziontal类的div中选择第二项，可以这样写：
$('div.horziontal:eq(1)'); //eq(1)是获得第二项
通过上述3种jQuery选择器，我们很容易就能找到页面中的元素，而且代码也不会长。这样就很利于我们操作页面元素，也节省了时间。
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4 <title></title>
5
<style type="text/css">
6
html, body
7
{
8 margin: 0;
9 padding: 0;
10
}
11 body
12 {
13 font-family: Arial, Verdana, sans-serif;
14 font-size: 12px;
15 color: #000;
16 background: #fff;
17 }
18 li
19 {
20 padding-top: 10px;
21 padding-left: 6px;
22 }
23 .horizontal
24 {
25 float: left;
26 list-style: none;
27 margin: 10px;
28 }
29 .sub-level
30 {
31 background: #ffc;
32 }
33 a
34 {
35 color: #00f;
36 }
37 a.mailto
38 {
39 color: #f00;
40 }
41 a.pdflink
42 {
43 color: #090;
44 }
45 a.mysite
46 {
47 text-decoration: none;
48 border-bottom: 1px dotted #00f;
49 }
50 .table-heading
51 {
52 background-color: #ff0;
53 }
54 th
55 {
56 text-align: left;
57 }
58 .odd
59 {
60 background-color: #ffc;
61 }
62 .even
63 {
64 background-color: #cef;
65 }
66 .highlight
67 {
68 color: #f00;
69 font-weight: bold;
70 }
71 td
72 {
73 color:#fff;
74 }
75 .table_header
76 {
77 background:red;
78 color:Blue;
79 font-size:14px;
80 }
81 .table_odd
82 {
83 background:#333;
84 }
85 .table_even
86 {
87 background:#666;
88
89 }
90 .high
91 {
92 color:Red;
93 font-weight:bold;
94 }
95
</style>
96
97 <script type="text/javascript" src="Scripts/jQuery.1.2.6.zh-cn-vsdoc.js"></script>
98
99 <script type="text/javascript">
100 $(document).ready(function() {
101 $('#selected-plays>li').addClass('horizontal'); //这里>号是jQuery的子选择符，#selected-plays>li 的意思就是id为selected-plays的直接子代（而二代以下不会算进来）
102 $('#selected-plays li:not(.horizontal)').addClass('sub-level'); //#selected-plays li给#selected-plays底下的所有li（包括二代，三代等）添加样式，但不包括li样式为horizontal的，在这里也就是为非直接子代添加样式，因为上面已经为直接子代添加了horizontal样式
103
104 });
105 $(document).ready(function(event) {
106 //^相当于正则表达式中的开始，$则相当于结尾
107 $('a[@href^="mailto:"]').addClass('mailto');//给a标签中包含href属性的，并且href以maito:开头的添加样式
108 $('a[@href$=".pdf"]').addClass('pdflink'); //给a标签中包含href属性的，并且href以.pdf结尾的添加样式
109 $('a[@href*="mysite"]').addClass('mysite'); //给a标签中包含href属性的，并且href中包含mysite的添加样式
110 });
111 $(document).ready(function() {
112 $('th').parent().addClass('table-heading');//包含th的tr添加样式
113 $('tr:not([th]):odd').addClass('table_odd');//冒号相当于CSS中的伪类给不包含th的tr的偶数行添加样式
114 $('tr:not([th]):even').addClass('table_even'); //给不包含th的tr的奇数行添加样式
115 $('td:contains("Henry")').siblings().addClass('high'); //给td中包含Henry字符的兄弟元素添加样式
116 });
117 </script>
118
119</head>
120<body>
121 <ul id="selected-plays">
122 <li>Comedies
123 <ul>
124 <li><a href="http://www.mysite.com/asyoulikeit/">As You Like It</a></li>
125 <li>All's Well That Ends Well</li>
126 <li>A Midsummer Night's Dream</li>
127 <li>Twelfth Night</li>
128 </ul>
129 </li>
130 <li>Tragedies
131 <ul>
132 <li><a href="hamlet.pdf">Hamlet</a></li>
133 <li>Macbeth</li>
134 <li>Romeo and Juliet</li>
135 </ul>
136 </li>
137 <li>Histories
138 <ul>
139 <li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)
140 <ul>
141 <li>Part I</li>
142 <li>Part II</li>
143 </ul>
144 <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
145 <li>Richard II</li>
146 </ul>
147 </li>
148 </ul>
149 <table>
150 <tr>
151 <th>
152 Like
153 </th>
154 <th>
155 Name
156 </th>
157 </tr>
158 <tr>
159 <td>
160 All's Well that Ends Well
161 </td>
162 <td>
163 Comedy
164 </td>
165 </tr>
166 <tr>
167 <td>
168 Hamlet
169 </td>
170 <td>
171 Tragedy
172 </td>
173 </tr>
174 <tr>
175 <td>
176 Macbeth
177 </td>
178 <td>
179 Tragedy
180 </td>
181 </tr>
182 <tr>
183 <td>
184 Romeo and Juliet
185 </td>
186 <td>
187 Tragedy
188 </td>
189 </tr>
190 <tr>
191 <td>
192 Henry IV, Part I
193 </td>
194 <td>
195 History
196 </td>
197 </tr>
198 <tr>
199 <td>
200 Henry V
201 </td>
202 <td>
203 History
204 </td>
205 </tr>
206 </table>
207</body>
208</html>
209
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<title></title>5
<style type="text/css">
6
html, body7
{
8
margin: 0;9
padding: 0;10
}11
body12
{13
font-family: Arial, Verdana, sans-serif;14
font-size: 12px;15
color: #000;16
background: #fff;17
}18
li19
{20
padding-top: 10px;21
padding-left: 6px;22
}23
.horizontal24
{25
float: left;26
list-style: none;27
margin: 10px;28
}29
.sub-level30
{31
background: #ffc;32
}33
a34
{35
color: #00f;36
}37
a.mailto38
{39
color: #f00;40
}41
a.pdflink42
{43
color: #090;44
}45
a.mysite46
{47
text-decoration: none;48
border-bottom: 1px dotted #00f;49
}50
.table-heading51
{52
background-color: #ff0;53
}54
th55
{56
text-align: left;57
}58
.odd59
{60
background-color: #ffc;61
}62
.even63
{64
background-color: #cef;65
}66
.highlight67
{68
color: #f00;69
font-weight: bold;70
}71
td72
{73
color:#fff;74
}75
.table_header76
{77
background:red;78
color:Blue;79
font-size:14px;80
}81
.table_odd82
{83
background:#333;84
}85
.table_even86
{87
background:#666;88
89
}90
.high91
{92
color:Red;93
font-weight:bold;94
}95
</style>96
97
<script type="text/javascript" src="Scripts/jQuery.1.2.6.zh-cn-vsdoc.js"></script>98
99
<script type="text/javascript">100
$(document).ready(function() {101
$('#selected-plays>li').addClass('horizontal'); //这里>号是jQuery的子选择符，#selected-plays>li 的意思就是id为selected-plays的直接子代（而二代以下不会算进来）102
$('#selected-plays li:not(.horizontal)').addClass('sub-level'); //#selected-plays li给#selected-plays底下的所有li（包括二代，三代等）添加样式，但不包括li样式为horizontal的，在这里也就是为非直接子代添加样式，因为上面已经为直接子代添加了horizontal样式103
104
});105
$(document).ready(function(event) {106
//^相当于正则表达式中的开始，$则相当于结尾107
$('a[@href^="mailto:"]').addClass('mailto');//给a标签中包含href属性的，并且href以maito:开头的添加样式108
$('a[@href$=".pdf"]').addClass('pdflink'); //给a标签中包含href属性的，并且href以.pdf结尾的添加样式109
$('a[@href*="mysite"]').addClass('mysite'); //给a标签中包含href属性的，并且href中包含mysite的添加样式110
});111
$(document).ready(function() {112
$('th').parent().addClass('table-heading');//包含th的tr添加样式113
$('tr:not([th]):odd').addClass('table_odd');//冒号相当于CSS中的伪类给不包含th的tr的偶数行添加样式114
$('tr:not([th]):even').addClass('table_even'); //给不包含th的tr的奇数行添加样式115
$('td:contains("Henry")').siblings().addClass('high'); //给td中包含Henry字符的兄弟元素添加样式116
});117
</script>118
119
</head>120
<body>121
<ul id="selected-plays">122
<li>Comedies123
<ul>124
<li><a href="http://www.mysite.com/asyoulikeit/">As You Like It</a></li>125
<li>All's Well That Ends Well</li>126
<li>A Midsummer Night's Dream</li>127
<li>Twelfth Night</li>128
</ul>129
</li>130
<li>Tragedies131
<ul>132
<li><a href="hamlet.pdf">Hamlet</a></li>133
<li>Macbeth</li>134
<li>Romeo and Juliet</li>135
</ul>136
</li>137
<li>Histories138
<ul>139
<li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)140
<ul>141
<li>Part I</li>142
<li>Part II</li>143
</ul>144
<li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>145
<li>Richard II</li>146
</ul>147
</li>148
</ul>149
<table>150
<tr>151
<th>152
Like153
</th>154
<th>155
Name156
</th>157
</tr>158
<tr>159
<td>160
All's Well that Ends Well161
</td>162
<td>163
Comedy164
</td>165
</tr>166
<tr>167
<td>168
Hamlet169
</td>170
<td>171
Tragedy172
</td>173
</tr>174
<tr>175
<td>176
Macbeth177
</td>178
<td>179
Tragedy180
</td>181
</tr>182
<tr>183
<td>184
Romeo and Juliet185
</td>186
<td>187
Tragedy188
</td>189
</tr>190
<tr>191
<td>192
Henry IV, Part I193
</td>194
<td>195
History196
</td>197
</tr>198
<tr>199
<td>200
Henry V201
</td>202
<td>203
History204
</td>205
</tr>206
</table>207
</body>208
</html>209
Tag标签: jQuery
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
