當前位置：
首頁 >
jQuery基本过滤选择器
發布時間：2024/7/19
43
豆豆
生活随笔
收集整理的這篇文章主要介紹了
jQuery基本过滤选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3 <html>
4 <head>
5 <!-- jQuery基本過濾選擇器 -->
6 <!--
7 :first 選取第一個元素 單個元素 #("div:first") 選取所有div中的第一個div元素
8 :last 選取最后一個元素 單個元素 $("div:last") 選取所有div中的最后一個div元素
9 :not(selector) 去除所有與給定選擇器匹配的元素 集合元素 $("input:not(.myClass)") 選取class不是myClass的input元素
10 :even 選取索引是偶數的所有元素，索引從0開始 集合元素 $("input:even") 選取索引是偶數的input元素
11 :odd 選取索引是奇數的所有元素，索引從0開始 集合元素 $("input:odd") 選取索引是奇數的input元素
12 :eq(index) 選取索引等于index的元素（index從0開始） 單個元素 $("input:eq(1)") 選取索引等于1的input元素
13 :gt(index) 選取索引大于index的元素（index從0開始） 集合元素 $("input:gt(1)") 選取索引大于1的input元素（注：大于1 而不包括1）
14 :lt(index) 選育索引小與index的元素（index從0開始） 集合元素 $("input:lt(1)") 選取索引小于1的input元素（注：小于1 而不包括1）
15 :header 選取所有的標題元素，例如h1,h2,h3等等 集合元素 $(":header") 選取網頁中所有的<h1>,<h2>,<h3>……
16 :animated 選取當前正在執行動畫的所有元素 集合元素 $("div:animated") 選取正在執行動畫的div元素
17 :focus 選取當前獲取焦點的元素 集合元素 $(":focus") 選取當前獲取焦點的元素
18 -->
19 <meta http-equiv="pragma" content="no-cache">
20 <meta http-equiv="cache-control" content="no-cache">
21 <meta http-equiv="expires" content="0">
22 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
23 <meta http-equiv="description" content="This is my page">
24 <script type="text/javascript" src="../../js/jquery.js"></script>
25 <style type="text/css">
26 div,span,p{
27 width:140px;
28 height:140px;
29 margin:5px;
30 background:#aaa;
31 border:#000 1px solid;
32 float:left;
33 font-size:17px;
34 font_family:Verdana;
35 }
36 div.mini{
37 width:55px;
38 height:55px;
39 background-color:#aaa;
40 font-size:12px;
41 }
42 div.hide{
43 display:none;
44 }
45 </style>
46
47 <script type="text/javascript" >
48
49 //選取第一個div元素
50 function test1(){
51 $("div:first").css("background","#bbffaa");
52 }
53
54 //選取最后第一個div元素
55 function test2(){
56 $("div:last").css("background","#808000");
57 }
58
59 //選取class不為one的div元素 多個用 , 隔開 $("div:not(.one,.two)")
60 function test3(){
61 $("div:not(.one)").css("background","#00ff00");
62 }
63
64 //選取索引值為偶數的div 下標從0開始 0算偶數
65 function test4(){
66 $("div:even").css("background","00ff00");
67 }
68
69 //選取索引值為奇數的div 下標從0開始 0算偶數
70 function test5(){
71 $("div:odd").css("background","00ff00");
72 }
73
74 //選取索引值為3的div 下標從0開始 0算偶數
75 function test6(){
76 $("div:eq(3)").css("background","00ff00");
77 }
78
79 //選取索引值大于3的div 下標從0開始 0算偶數 不包括3
80 function test7(){
81 $("div:gt(3)").css("background","00ff00");
82 }
83
84 //選取索引值小于3的div 下標從0開始 0算偶數 不包括3
85 function test8(){
86 $("div:lt(3)").css("background","00ff00");
87 }
88
89 //選取所有標題元素 <h1> <h2> <h3>
90 function test9(){
91 $(":header").css("background","00ff00");
92 }
93
94 //改變當前正在執行動畫的元素 的背景色 ？？？
95 function test10(){
96 $(":animated").css("background","00ff00");
97 }
98
99 //改變當前獲取焦點的背景色
100 function test11(){
101 $(":focus").css("background","00ff00");
102 }
103 </script>
104 </head>
105 <body>
106
107 <div id="one" class="one">
108 id為one class為one的div
109 <div class="mini">class為mini</div>
110 </div>
111
112 <div class="one" id="two" title="test">
113 id為two class為one title為test的div
114 <div class="mini" title="other">class為mini title為other</div>
115 <div class="mini" title="test">class為mini title為test</div>
116 </div>
117
118 <div class="one">
119 <div class="mini">class為mini</div>
120 <div class="mini">class為mini</div>
121 <div class="mini">class為mini</div>
122 <div class="mini"></div>
123 </div>
124
125 <div class="one">
126 <h1>fsdfds</h1>
127 <div class="mini">class為mini</div>
128 <div class="mini">class為mini</div>
129 <div class="mini">class為mini</div>
130 <div class="mini" title="tesst">class為mini title為tesst</div>
131 </div>
132
133 <div style="display:none;" class="none">
134 style為display class為none的div
135 </div>
136
137 <div class="hide">class為hide的div</div>
138
139
140 <div>
141 包涵input的type為hidden的div<input type="hidden" size="8"/>
142 </div>
143
144 <span id="mover">正在執行動畫的span元素</span>
145
146
147 <br>
148 <input type="button" onclick="test1()" value="改變第一個div元素的背景色"/>
149 <input type="button" onclick="test2()" value="改變最后一個div元素的背景色"/>
150 <input type="button" onclick="test3()" value="改變class不為one的div元素的背景色"/>
151 <input type="button" onclick="test4()" value="改變索引值為偶數的div元素的背景色"/>
152 <input type="button" onclick="test5()" value="改變索引為奇數的div元素的背景色"/>
153 <input type="button" onclick="test6()" value="改變索引值等于3的div元素的背景色"/>
154 <input type="button" onclick="test7()" value="改變索引值大于3的div元素的背景色"/>
155 <input type="button" onclick="test8()" value="改變索引值小于3的div元素的背景色"/>
156 <input type="button" onclick="test9()" value="改變所有的標題元素，例如<h1>,<h2>,<h2>這些元素的背景色"/>
157 <input type="button" onclick="test10()" value="改變當前正在執行動畫的元素的背景色"/>
158 <input type="button" onclick="test11()" value="改變當前獲取焦點的背景色"/>
159
160
161 </body>
162 </html>
?
轉載于:https://www.cnblogs.com/nwme/p/5374476.html
總結
以上是生活随笔為你收集整理的jQuery基本过滤选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 复制文件，并重命名
- 下一篇： Repository 返回 IQuery