jquery学习系列8(过滤选择器)
1.过滤器
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title></title>
4
5 <script language="javascript" src="js/jquery-1.5.js"></script>
6
7 <script language="javascript">
8 $(function() {
9 $("#tb tr:first").css("fontSize", "30"); //fontSize第一个字符f必须小写否则有时候会不显示效果.第一行字体大小30
10 $("#tb tr:last").css("color", "red").css("fontSize", "25"); //最后一行字体颜色red,字体大小25
11 $("#tb td:first").css("width", "150"); //第一列宽度150
12 $("#tb tr:gt(0):lt(3)").css("color", "blue")//第2行到第4行背景色为blue(大于0小于3这个0表示没有取数据时的索引0即第一行。3表示取数据后新组合的索引3即新组合的第4行)
13 $("#tb tr:gt(0):even").css("background", "yellow"); //除去第一行奇数行的背景色为yellow。gt(0)表示大于0从第二行开始算起。even表示奇数行
14 $("#tb tr:gt(0):odd").css("background", "#0011ff"); //除去第一行偶数行的背景色为#0011ff。gt(0)表示大于0从第二行开始算起。odd表示偶数行
15 })
16 </script>
17
18 </head>
19 <body>
20 <table id="tb">
21 <tr>
22 <td>
23 姓名
24 </td>
25 <td>
26 成绩
27 </td>
28 </tr>
29 <tr>
30 <td>
31 aa
32 </td>
33 <td>
34 100
35 </td>
36 </tr>
37 <tr>
38 <td>
39 bb
40 </td>
41 <td>
42 23
43 </td>
44 </tr>
45 <tr>
46 <td>
47 cc
48 </td>
49 <td>
50 35
51 </td>
52 </tr>
53 <tr>
54 <td>
55 dd
56 </td>
57 <td>
58 56
59 </td>
60 </tr>
61 <tr>
62 <td>
63 ee
64 </td>
65 <td>
66 79
67 </td>
68 </tr>
69 <tr>
70 <td>
71 平均分
72 </td>
73 <td>
74 78
75 </td>
76 </tr>
77 </table>
78 </body>
79 </html>
2.相对定位
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title></title>
4
5 <script language="javascript" src="js/jquery-1.5.js">
6 </script>
7
8 <script language="javascript">
9 $(function() {
10 $("#div1").click(function() {
11 //$(a,b)两个参数的话第二个参数就是那个相对元素
12 $("ul", $(this)).css("background", "red"); //this表示当前单击的那个ul不写this的话两个ul都变成red了。
13 })
14 })
15
16 //相对定位
17 $(function() {
18 $("#tb1 tr").click(function() {
19 $("td", $(this)).css("background", "blue");
20 })
21 })
22 </script>
23
24 </head>
25 <body>
26 <div id="div1">
27 <ul>
28 <li>aa</li>
29 <li>bb</li>
30 <li>cc</li>
31 <li>dd</li>
32 </ul>
33 </div>
34 <div>
35 <ul>
36 <li>aaaaaaaaaaaaaaa</li>
37 <li>bbbbbbbbbbbbb</li>
38 <li>cddddddddddddddc</li>
39 <li>dddddddddddddddd</li>
40 </ul>
41 </div>
42 <table id="tb1">
43 <tr>
44 <td>
45 aa
46 </td>
47 <td>
48 bb
49 </td>
50 </tr>
51 <tr>
52 <td>
53 aa
54 </td>
55 <td>
56 bb
57 </td>
58 </tr>
59 <tr>
60 <td>
61 aa
62 </td>
63 <td>
64 bb
65 </td>
66 </tr>
67 </table>
68 </body>
69 </html>
