1.基本過濾選擇器介紹
基本過濾器：
- :first 獲取數組中第一個元素
- :last 獲取數組中最后一個
- :eq(selector) 獲取指定索引
- :gt(index) 大於指定索引
- :lt(index) 小於指定索引
- :even 偶數，從0開始計數（0、2、4即1/3/5行）
- :odd 奇數
- :not(selector) 去除所有與指定選擇器匹配的元素
- :header 獲得所有標題元素
- :animated 獲得所有動畫
- :focus 獲得焦點
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>03-基本過濾選擇器.html</title>
6 <!-- 引入jQuery -->
7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
8 <script src="./script/assist.js" type="text/javascript"></script>
9 <link rel="stylesheet" type="text/css" href="./css/style.css" />
10 <script type="text/javascript">
11 $(function(){ 12 // <input type="button" value="選擇第一個div元素." id="btn1"/>
13 $("#btn1").click(function(){ 14 $("div:first").css("background-color","red"); 15 }); 16 // <input type="button" value="選擇最后一個div元素." id="btn2"/>
17 $("#btn2").click(function(){ 18 $("div:last").css("background-color","red"); 19 }); 20 // <input type="button" value="選擇class不為one的 所有div元素." id="btn3"/>
21 $("#btn3").click(function(){ 22 $("div:not('.one')").css("background-color","red"); 23 }); 24 // <input type="button" value="選擇索引值為偶數 的div元素." id="btn4"/>
25 $("#btn4").click(function(){ 26 $("div:even").css("background-color","red"); 27 }); 28 // <input type="button" value="選擇索引值為奇數 的div元素." id="btn5"/>
29 $("#btn5").click(function(){ 30 $("div:odd").css("background-color","red"); 31 }); 32 // <input type="button" value="選擇索引值等於3的元素." id="btn6"/>
33 $("#btn6").click(function(){ 34 $("div:eq(3)").css("background-color","red"); 35 }); 36 // <input type="button" value="選擇索引值大於3的元素." id="btn7"/>
37 $("#btn7").click(function(){ 38 $("div:gt(3)").css("background-color","red"); 39 }); 40 // <input type="button" value="選擇索引值小於3的元素." id="btn8"/>
41 $("#btn8").click(function(){ 42 $("div:lt(3)").css("background-color","red"); 43 }); 44 // <input type="button" value="選擇所有的標題元素." id="btn9"/>
45 $("#btn9").click(function(){ 46 $(":header").css("background-color","red"); 47 }); 48 // <input type="button" value="選擇當前正在執行動畫的所有元素." id="btn10"/>
49 $("#btn10").click(function(){ 50 $(":animated").css("background-color","red"); 51 }); 52 // <input type="text" value="請輸入賬號" defaultValue="請輸入賬號" /> 53 // <input type="text" value="請輸入密碼" defaultValue="請輸入密碼"/> 54 //給文本框綁定獲取和失去焦點的事件 55 //on支持一個函數可以綁定多個事件
56 $("input[type='text']").on("blur focus",function(){ 57 var defaultValue = $(this).attr("defaultValue"); 58 if($(this).is(":focus")){ 59 if($(this).val() == defaultValue){ 60 $(this).val(""); 61 } 62 } else { 63 if($(this).val() == "") { 64 $(this).val(defaultValue); 65 } 66 } 67 }); 68 }); 69 </script>
70 </head>
71 <body>
72 <h3>基本過濾選擇器.</h3>
73 <button id="reset">手動重置頁面元素</button>
74 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">點擊下列按鈕時先自動重置頁面</label><br /><br />
75
76 <input type="button" value="選擇第一個div元素." id="btn1"/>
77 <input type="button" value="選擇最后一個div元素." id="btn2"/>
78 <input type="button" value="選擇class不為one的 所有div元素." id="btn3"/>
79 <input type="button" value="選擇索引值為偶數 的div元素." id="btn4"/>
80 <input type="button" value="選擇索引值為奇數 的div元素." id="btn5"/>
81 <input type="button" value="選擇索引值等於3的元素." id="btn6"/>
82 <input type="button" value="選擇索引值大於3的元素." id="btn7"/>
83 <input type="button" value="選擇索引值小於3的元素." id="btn8"/>
84 <input type="button" value="選擇所有的標題元素." id="btn9"/>
85 <input type="button" value="選擇當前正在執行動畫的所有元素." id="btn10"/>
86 <input type="text" value="請輸入賬號" defaultValue="請輸入賬號" />
87 <input type="text" value="請輸入密碼" defaultValue="請輸入密碼"/>
88
89 <br /><br />
90
91 <!-- 測試的元素 -->
92 <div class="one" id="one" >
93 id為one,class為one的div 94 <div class="mini">class為mini</div>
95 </div>
96
97 <div class="one" id="two" title="test" >
98 id為two,class為one,title為test的div. 99 <div class="mini" title="other">class為mini,title為other</div>
100 <div class="mini" title="test">class為mini,title為test</div>
101 </div>
102
103 <div class="one">
104 <div class="mini">class為mini</div>
105 <div class="mini">class為mini</div>
106 <div class="mini">class為mini</div>
107 <div class="mini"></div>
108 </div>
109
110
111
112 <div class="one">
113 <div class="mini">class為mini</div>
114 <div class="mini">class為mini</div>
115 <div class="mini">class為mini</div>
116 <div class="mini" title="tesst">class為mini,title為tesst</div>
117 </div>
118
119
120 <div style="display:none;" class="none">style的display為"none"的div</div>
121
122 <div class="hide">class為"hide"的div</div>
123
124 <div>
125 包含input的type為"hidden"的div<input type="hidden" size="8"/>
126 </div>
127
128
129 <span id="mover">正在執行動畫的span元素.</span>
130
131 </body>
132 </html>