JQuery中基础过滤选择器用法实例分析

这篇文章主要介绍了JQuery中基础过滤选择器用法,涉及jQuery属性选择及样式操作的相关技巧,需要的朋友可以参考下

本文实例讲述了JQuery中基础过滤选择器用法。分享给大家供大家参考。具体如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
6. <title>基础过滤选择器</title> 
7. <style type="text/css"> 
8. #main{ 
9. width:600px; 
10. border:1px solid green; 
11. margin:auto; 
12. padding:10px; 
13. } 
14. #tbl{ 
15. border-collapse:collapse; 
16. border-top:1px solid red; 
17. border-left:1px solid red; 
18. margin:auto; 
19. } 
20. #tbl td{ 
21. width:60px; 
22. height:60px; 
23. border-collapse:collapse; 
24. border-bottom:1px solid red; 
25. border-right:1px solid red; 
26. } 
27. </style> 
28. <script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
29. <script type="text/javascript"> 
30. $(function () { 
31. //=============举例1======================== 
32. //:first 说明: 匹配找到的第一个元素 
33. //....<1>修改第一个单元格的背景色 
34. //var $tds = $("#tbl td:first"); 
35. //$tds.css("backgroundColor", "blue"); 
36. //....<2>修改第一行的背景色 
37. //var $trs = $("#tbl tr:first"); 
38. //$trs.css("backgroundColor", "blue"); 
39. //=============举例2======================== 
40. //:last 说明: 匹配找到的最后一个元素.与 :first 相对应. 
41. //...<1>修改随后一个单元格的背景色 
42. //var $tds = $("#tbl td:last"); 
43. //$tds.css("backgroundColor", "blue"); 
44. //=============举例3======================== 
45. //:not(selector) 去除所有与给定选择器匹配的元素.有点类似于”非” 
46. //...<1>把所有class不为tdClass的列的文本进行修改 
47. //var $tds = $("#tbl td:not(.tdClass)"); 
48. //$tds.text("Not tdClass"); 
49. //=============举例4======================== 
50. //:even 说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的. 
51. //例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0. 
52. //...<1>把索引值为偶数的行变成黄色 
53. //var $trs = $("#tbl tr:even"); 
54. //$trs.css("backgroundColor", "yellow"); 
55. //=============举例5======================== 
56. //: odd 说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数. 
57. //var $trs = $("#tbl tr:odd"); 
58. //$trs.css("backgroundColor", "yellow"); 
59. //=============举例6======================== 
60. //:eq(index) 说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数. 
61. //...<1>设置第二个单元格的背景色 
62. //var $tds = $("#tbl td:eq(1)"); 
63. //$tds.css("backgroundColor", "gray"); 
64. //=============举例6======================== 
65. //:gt(index) 说明: 匹配所有大于给定索引值的元素. 
66. //...<1>把下标索引大于1的所有单元格背景色设置为灰色 
67. //var $tds = $("#tbl td:gt(1)"); 
68. //$tds.css("backgroundColor", "gray"); 
69. //=============举例7======================== 
70. //:lt(index) 说明: 匹配所有小于给定索引值的元素. 
71. //...<1>把下标索引小于3的所有单元格背景色设置为灰色 
72. var $tds = $("#tbl td:lt(3)"); 
73. $tds.css("backgroundColor", "gray"); 
74. //=============举例8======================== 
75. //:header(固定写法) 说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素. 
76. //...<1>把所有的h标签背景色进行修改 
77. var $hs = $(":header"); 
78. $hs.css("backgroundColor", "gold"); 
79. //=============举例8======================== 
80. //slice 获取下标范围内元素 
81. var $trs = $("#tbl tr").slice(1, 3); 
82. $trs.css("backgroundColor", "gold"); 
83. }); 
84. </script> 
85. </head> 
86. <body> 
87. <div id="main"> 
88. <h1>我是h1</h1> 
89. <h2>我是h2</h2> 
90. <h3>我是h3</h3> 
91. <table id="tbl"> 
92. <tr> 
93. <td>1</td><td>1</td><td>1</td> 
94. </tr> 
95. <tr> 
96. <td class="tdClass">2</td><td>2</td><td>2</td> 
97. </tr> 
98. <tr> 
99. <td>3</td><td>3</td><td>3</td> 
100. </tr> 
101. <tr> 
102. <td>4</td><td>4</td><td class="tdClass">4</td> 
103. </tr> 
104. <tr> 
105. <td>5</td><td>5</td><td>5</td> 
106. </tr> 
107. <tr> 
108. <td>6</td><td>6</td><td class="tdClass">6</td> 
109. </tr> 
110. </table> 
111. </div> 
112. </body> 
113. </html> 

希望本文所述对大家的jQuery程序设计有所帮助。