在上一节中我们给大家简单的介绍了一下Jquery的使用与历史，同时对其使用进行了描述，今天我们接着上一节的内容来讲，在Jquery中对css选择器的支持是非常优秀的，它可以很好的支持css中的语法，在WEB开发中我们经常会使用到的一个常见的应用，就是光标移动到某一个物件后，发生一个响应，这在以住的javascript中写起来是非常麻烦的，今天我们就写一个简单的例子给大家学习一下。
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2: <html>
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
5: <title>JQuery测试</title>
6: <style type="text/css">
7: .red
8: {
9: background-color: red;
10: }
11: .blue
12: {
13: color: blue;
14: }
15: .green
16: {
17: color: green;
18: }
19: </style>
20: <script type="text/javascript" src="lib/jquery/jquery.js">
21: </script>
22: <script type="text/javascript">
23: $(document).ready(function(){
24: //在文档载入成功后，将id为orderedlist的对象
25: //加入red这个css的样式
26: $("#orderedlist").addClass("red");
27:
28: //为orderedlist下的子节点li加入样式blue
29: $("#orderedlist>li").addClass("blue");
30:
31: //为了使例子再复杂一点儿，我们实现了将
32: //鼠标移上后变色的功能
33:
34: $("#orderedlist>li").hover(
35: function(){
36: $(this).addClass("green");
37: },
38: function(){
39: $(this).removeClass("green");
40: });
41:
42:
43: //如果再复杂的话，只让其最后一个节点生效的话
44: $("#orderedlist>li:last").hover(function(){
45: $(this).addClass("green");
46: }, function(){
47: $(this).removeClass("green");
48: });
49: });
50:
51: </script>
52: </head>
53: <body>
54: <div>
55: <ol id="orderedlist">
56: <li>
57: First element
58: </li>
59: <li>
60: Second element
61: </li>
62: <li>
63: Third element
64: </li>
65: </ol>
66: </div>
67: </body>
68: </html>
在日常开发中，我们还经常使用到的一个功能就是递归查找某个节点下面的子节点并对其进行操作，这一点儿jquery做的也非常的棒，它支持一种find()方法可以帮我们递归查找，我们废话少说直接上个例子看一看，一个好的例子相信大家一看就明白了，不过在使用jquery时也许最让大家头痛的不是它的语法，而是它使用到了大量的匿名函数这一点也是javascript的特点，这个就需要大家慢慢适应了。
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2: <html>
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5: <title>JQuery测试</title>
6: <style type="text/css">
7: .red
8: {
9: background-color: red;
10: }
11: .blue
12: {
13: color: blue;
14: }
15: .green
16: {
17: color: green;
18: }
19: </style>
20: <script type="text/javascript" src="lib/jquery/jquery.js">
21: </script>
22: <script type="text/javascript">
23: $(document).ready(function(){
24: $("#orderedlist").find("li").each(function(i){
25: $(this).html($(this).html()+"测试"+i);
26: });
27:
28: });
29:
30: </script>
31: </head>
32: <body>
33: <div>
34: <ol id="orderedlist">
35: <li>
36: First element
37: </li>
38: <li>
39: Second element
40: </li>
41: <li>
42: Third element
43: </li>
44: </ol>
45: </div>
46: </body>
47: </html>
为了再一次的验证，jquery的高效与快捷，同时我们在以住学习中的知识总结一下，我们使用jquery来开发一个双色表格。
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2: <html>
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5: <title>JQuery测试</title>
6: <style type="text/css">
7: th
8: {
9: background:#0066FF;
10: color:#FFFFFF;
11: line-height:20px;
12: height:30px;
13: }
14: td
15: {
16: padding: 6px 11px;
17: border-bottom: 1px solid #95bce2;
18: vertical-align: top;
19: text-align: center;
20: }
21:
22: td *
23: {
24: padding: 6px 11px;
25: }
26:
27: tr.alt td {
28: background: #ecf6fc; /*这行将给所有的tr加上背景色*/
29: }
30:
31: tr.over td {
32: background: #bcd4ec; /*这个将是鼠标高亮行的背景色*/
33: }
34:
35: </style>
36: <script type="text/javascript" src="lib/jquery/jquery.js">
37: </script>
38: <script type="text/javascript">
39: $(document).ready(function(){
40:
41: //采用css类识别的方式来选择物件
42:
43: $(".stripe tr").mouseover(function(){
44: $(this).addClass("over");
45: });
46: $(".stripe tr").mouseout(function(){
47: $(this).removeClass("over");
48: });
49:
50: //还有一种简化的写法，就是链式写法，之所以可以这样写的原因
51: //是因为每一次jquery每一次操作后都返回一个当前对象
52: $(".stripe tr").mouseover(function(){
53: $(this).addClass("over");
54: }).mouseout(function(){
55: $(this).removeClass("over");
56: });
57:
58: });
59:
60: </script>
61: </head>
62: <body>
63: <div>
64: <table class="stripe" id="tabledemo" width="50%" border="0" cellspacing="0" cellpadding="0">
65: <!--用class="stripe"来标识需要使用该效果的表格-->
66: <thead>
67: <tr>
68: <th>
69: 姓名
70: </th>
71: <th>
72: 年龄
73: </th>
74: <th>
75: QQ
76: </th>
77: <th>
78: Email
79: </th>
80: </tr>
81: </thead>
82: <tbody>
83: <tr>
84: <td>
85: 楚广明
86: </td>
87: <td>
88: 30
89: </td>
90: <td>
91: XXXXXX
92: </td>
93: <td>
94: chu888chu888@yahoo.com.cn
95: </td>
96: </tr>
97: <tr>
98: <td>
99: 楚广明
100: </td>
101: <td>
102: 30
103: </td>
104: <td>
105: XXXXXX
106: </td>
107: <td>
108: chu888chu888@yahoo.com.cn
109: </td>
110: </tr>
111: <tr>
112: <td>
113: 楚广明
114: </td>
115: <td>
116: 30
117: </td>
118: <td>
119: XXXXXX
120: </td>
121: <td>
122: chu888chu888@yahoo.com.cn
123: </td>
124: </tr>
125: <tr>
126: <td>
127: 楚广明
128: </td>
129: <td>
130: 30
131: </td>
132: <td>
133: XXXXXX
134: </td>
135: <td>
136: chu888chu888@yahoo.com.cn
137: </td>
138: </tr>
139: <tr>
140: <td>
141: 楚广明
142: </td>
143: <td>
144: 30
145: </td>
146: <td>
147: XXXXXX
148: </td>
149: <td>
150: chu888chu888@yahoo.com.cn
151: </td>
152: </tr>
153: <tr>
154: <td>
155: 楚广明
156: </td>
157: <td>
158: 30
159: </td>
160: <td>
161: XXXXXX
162: </td>
163: <td>
164: chu888chu888@yahoo.com.cn
165: </td>
166: </tr>
167: </tbody>
168: </table>
169:
170: </div>
171: </body>
172: </html>
在上面的双色表格中我们使用的选择器是基于css类的选择器,其实我们也可以使用基于id的选择器，写法是基本上差不多的，具体写法可以看以下。
1: $("#tabledemo>tr")