jquery学习系列8(过滤选择器)
生活随笔
收集整理的這篇文章主要介紹了
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>
轉載于:https://www.cnblogs.com/aspneteye/articles/2039068.html
總結
以上是生活随笔為你收集整理的jquery学习系列8(过滤选择器)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用ISA Server做***路由代替专
- 下一篇： Web Client Software