Jquery学习笔记(一)
当鼠标移动到行上时其背景色改变，但当鼠标移开该行时背景色恢复为原状。
如
1。一开始实现表格
代码
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 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>Jquery学习笔记一</title>
21 <style>
22 th {
23 background:#0066FF;
24 color:#FFFFFF;
25 line-height:20px;
26 height:30px;
27 }
28
29 td {
30 padding:6px 11px;
31 border-bottom:1px solid #95bce2;
32 vertical-align:top;
33 text-align:center;
34 }
35
36 td * {
37 padding:6px 11px;
38 }
39
40
41
42 tr.alt td {
43 background:#ecf6fc; /*这行将给所有的tr加上背景色*/
44 }
45
46 tr.over td {
47 background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/
48 }
49
50 .click{background:yellow;}
51
52
53 </style>
54 </head>
55
56 <body>
57 <table id="tbl" width="50%" border="0" cellspacing="0" cellpadding="0">
58 <!--用class="stripe"来标识需要使用该效果的表格-->
59 <tr>
60 <th>姓名</th>
61 <th>年龄</th>
62 <th>QQ</th>
63 <th>Email</th>
64 </tr>
71 <tr>
72 <td>XXXX</td>
73 <td>23</td>
74 <td>250214XXX</td>
75 <td>zhushucXXXg813@gmail.com</td>
76 </tr>
77 <tr>
78 <td>XXXX</td>
79 <td>23</td>
80 <td>250214XXX</td>
81 <td>zhushucXXXg813@gmail.com</td>
82 </tr>
83 <tr>
84 <td>XXXX</td>
85 <td>23</td>
86 <td>250214XXX</td>
87 <td>zhushucXXXg813@gmail.com</td>
88 </tr>
89 <tr>
90 <td>XXXX</td>
91 <td>23</td>
92 <td>250214XXX</td>
93 <td>zhushucXCXg813@gmail.com</td>
94 </tr>
95 <tr>
96 <td>XXXX</td>
97 <td>23</td>
98 <td>250214511</td>
99 <td>zhushucXXXg813@gmail.com</td>
100 </tr>
101 <tr>
102 <td>XXXX</td>
103 <td>23</td>
104 <td>250214XXX</td>
105 <td>zhushucXXXg813@gmail.com</td>
106 </tr>
107 </table>
108 </body>
109 </html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>Jquery学习笔记一</title>
21 <style>
22 th {
23 background:#0066FF;
24 color:#FFFFFF;
25 line-height:20px;
26 height:30px;
27 }
28
29 td {
30 padding:6px 11px;
31 border-bottom:1px solid #95bce2;
32 vertical-align:top;
33 text-align:center;
34 }
35
36 td * {
37 padding:6px 11px;
38 }
39
40
41
42 tr.alt td {
43 background:#ecf6fc; /*这行将给所有的tr加上背景色*/
44 }
45
46 tr.over td {
47 background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/
48 }
49
50 .click{background:yellow;}
51
52
53 </style>
54 </head>
55
56 <body>
57 <table id="tbl" width="50%" border="0" cellspacing="0" cellpadding="0">
58 <!--用class="stripe"来标识需要使用该效果的表格-->
59 <tr>
60 <th>姓名</th>
61 <th>年龄</th>
62 <th>QQ</th>
63 <th>Email</th>
64 </tr>
71 <tr>
72 <td>XXXX</td>
73 <td>23</td>
74 <td>250214XXX</td>
75 <td>zhushucXXXg813@gmail.com</td>
76 </tr>
77 <tr>
78 <td>XXXX</td>
79 <td>23</td>
80 <td>250214XXX</td>
81 <td>zhushucXXXg813@gmail.com</td>
82 </tr>
83 <tr>
84 <td>XXXX</td>
85 <td>23</td>
86 <td>250214XXX</td>
87 <td>zhushucXXXg813@gmail.com</td>
88 </tr>
89 <tr>
90 <td>XXXX</td>
91 <td>23</td>
92 <td>250214XXX</td>
93 <td>zhushucXCXg813@gmail.com</td>
94 </tr>
95 <tr>
96 <td>XXXX</td>
97 <td>23</td>
98 <td>250214511</td>
99 <td>zhushucXXXg813@gmail.com</td>
100 </tr>
101 <tr>
102 <td>XXXX</td>
103 <td>23</td>
104 <td>250214XXX</td>
105 <td>zhushucXXXg813@gmail.com</td>
106 </tr>
107 </table>
108 </body>
109 </html>
2、鼠标移入移除
实现鼠标移向行行的背景颜色改变，鼠标移出行行的背景颜色恢复
代码
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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>Jquery学习</title>
6 <script type="text/javascript" src="jquery.js"></script>
7 <style type="text/css">
8 <!--
9 th{
10 line-height:25px;
11 background-color:blue;
12 color:white;
13 }
14 td{
15 border-bottom: solid 1px Black;
16 line-height:25px;
17 padding:6px 11px;
18 text-align:center;
19 }
20
21
22 tr.alt td {
23 background:#ecf6fc; /*这行将给所有的tr加上背景色*/
24 }
25
26 .over {
27 background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/
28 }
29 -->
30 </style>
31 <script type="text/javascript">
32 $(document).ready(function(){
33 $("#tbl tr").mouseover(function(){$(this).addClass("over")}).mouseout(function(){$(this).removeClass("over")})
35 });
36 </script>
37 </head>
38 <body>
39
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>Jquery学习</title>
6 <script type="text/javascript" src="jquery.js"></script>
7 <style type="text/css">
8 <!--
9 th{
10 line-height:25px;
11 background-color:blue;
12 color:white;
13 }
14 td{
15 border-bottom: solid 1px Black;
16 line-height:25px;
17 padding:6px 11px;
18 text-align:center;
19 }
20
21
22 tr.alt td {
23 background:#ecf6fc; /*这行将给所有的tr加上背景色*/
24 }
25
26 .over {
27 background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/
28 }
29 -->
30 </style>
31 <script type="text/javascript">
32 $(document).ready(function(){
33 $("#tbl tr").mouseover(function(){$(this).addClass("over")}).mouseout(function(){$(this).removeClass("over")})
35 });
36 </script>
37 </head>
38 <body>
39
40 <table id="tbl" width="50%" border="0" cellspacing="0" cellpadding="0">
41 <!--用class="stripe"来标识需要使用该效果的表格-->
42 <tr>
43 <th>姓名</th>
44 <th>年龄</th>
45 <th>QQ</th>
46 <th>Email</th>
47 </tr>
48 <tr>
49 <td>XXXX</td>
50 <td>23</td>
51 <td>250214XXX</td>
52 <td>zhushucXXXg813@gmail.com</td>
53 </tr>
54 <tr>
55 <td>XXXX</td>
56 <td>23</td>
57 <td>250214XXX</td>
58 <td>zhushucxxxg813@gmail.com</td>
59 </tr>
60 <tr>
61 <td>XXXX</td>
62 <td>23</td>
63 <td>250214xxx</td>
64 <td>zhushucxxxg813@gmail.com</td>
65 </tr>
66 <tr>
67 <td>XXXX</td>
68 <td>23</td>
69 <td>250214xxx</td>
70 <td>zhushucxxxg813@gmail.com</td>
71 </tr>
72 <tr>
73 <td>XXXX</td>
74 <td>23</td>
75 <td>250214xxx</td>
76 <td>zhushucxxxg813@gmail.com</td>
77 </tr>
78 <tr>
79 <td>XXXX</td>
80 <td>23</td>
81 <td>250214xxx</td>
82 <td>zhushucxxxg813@gmail.com</td>
83 </tr>
84 </table>
85 </body>
86 </html>
87
41 <!--用class="stripe"来标识需要使用该效果的表格-->
42 <tr>
43 <th>姓名</th>
44 <th>年龄</th>
45 <th>QQ</th>
46 <th>Email</th>
47 </tr>
48 <tr>
49 <td>XXXX</td>
50 <td>23</td>
51 <td>250214XXX</td>
52 <td>zhushucXXXg813@gmail.com</td>
53 </tr>
54 <tr>
55 <td>XXXX</td>
56 <td>23</td>
57 <td>250214XXX</td>
58 <td>zhushucxxxg813@gmail.com</td>
59 </tr>
60 <tr>
61 <td>XXXX</td>
62 <td>23</td>
63 <td>250214xxx</td>
64 <td>zhushucxxxg813@gmail.com</td>
65 </tr>
66 <tr>
67 <td>XXXX</td>
68 <td>23</td>
69 <td>250214xxx</td>
70 <td>zhushucxxxg813@gmail.com</td>
71 </tr>
72 <tr>
73 <td>XXXX</td>
74 <td>23</td>
75 <td>250214xxx</td>
76 <td>zhushucxxxg813@gmail.com</td>
77 </tr>
78 <tr>
79 <td>XXXX</td>
80 <td>23</td>
81 <td>250214xxx</td>
82 <td>zhushucxxxg813@gmail.com</td>
83 </tr>
84 </table>
85 </body>
86 </html>
87
