以下內(nèi)容均是來自《鋒利的jQuery》，發(fā)到這里，純屬做個筆記，方便查閱。
直接看代碼：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <title></title>
6 <style type="text/css">
7 div,span,p {
8 width: 140px;
9 height: 140px;
10 margin: 5px;
11 background: #aaa;
12 border: #000 1px solid;
13 float: left;
14 font-size: 17px;
15 font-family: Verdana;
16 }
17 div.mini {
18 width: 55px;
19 height: 55px;
20 background-color: #aaa;
21 font-size: 12px;
22
23 }
24 div.hide {
25 display: none;
26 }
27 </style>
28 <script type="text/javascript" src="jquery-1.3.1.js"></script>
29 <script type="text/javascript">
30 $(document).ready(
31 function() {
32 //改變id為one的元素的背景色 必須是單引號
33 //$('#one').css('background','#bfa');
34
35 //改變class為mini的所有元素背景色
36 //$('.mini').css('background','red');
37
38 //改變標簽為div的所有元素背景色
39 //$('div').css('background','red');
40
41 //改變所有元素背景色
42 //$('*').css('background','red');
43
44 //改變<span>元素和id為two的元素的所有元素背景色
45 //$('span,#two').css('background','red');
46
47 //層次選擇器
48 //1.改變body里面所有<div>的背景色
49 //$('body div').css('background','red');
50
51 //2.改變body內(nèi)子元素div的背景色
52 //$('body>div').css('background','green');
53
54 //3.改變id為one的元素的下一個兄弟div元素的背景色
55 //$('#one + div').css('background','yellow');
56
57 //4.改變id為two的元素后面所有div兄弟元素的背景色
58 //$('#two ~ div').css('background','blue');
59
60 //上面3的替代方法
61 //$('#one').next('div').css('background','gray');
62
63 //上面4的替代
64 //$('#two').nextAll('div').css('background','gray');
65
66 // 3過濾選擇器
67 //3.1基本過濾選擇器
68
69 //1改變第一個div的顏色
70 // $('div:first').css('background','red');
71 //
72 // // 2改變最后一個div的顏色
73 // $('div:last').css('background','yellow');
74
75 //3改變所有class不為one的div的背景色
76 //$('div:not(.one)').css('background','yellow');
77
78 //4改變索引值為偶數(shù)的div的背景色 計數(shù)從0開始
79 //$('div:even').css('background','red');
80
81 //5改變索引值為奇數(shù)的div的背景色
82 //$('div:odd').css('background','red');
83
84 //6改變索引值為3的div的背景色
85 //$('div:eq(3)').css('background','red');
86
87 //7改變索引值大于3的div的背景色
88 //$('div:gt(3)').css('background','red');
89
90 //8改變索引值小于3的div的背景色
91 //$('div:lt(3)').css('background','red');
92
93 //9改變所有標題元素的
94 //$(':header').css('background','red');
95
96 //10改變所有標題元素的
97 //$(':animated').css('background','red');
98
99 //3.2內(nèi)容過濾選擇器
100 //1改變內(nèi)容包含di的div元素的背景色
101 //$('div:contains(di)').css('background','red');
102
103 //2改變不包含子元素或者文本的空div元素的背景色
104 //$('div:empty').css('background','red');
105
106 //3改變含有class為mini的子元素的div元素的背景色
107 //$('div:has(.mini)').css('background','red');
108
109 //4改變含有子元素或者文本元素的元素的背景色
110 //$('div:parent').css('background','red');
111
112 //3.3可見性過濾選擇器
113 //1改變所有可見元素的背景色
114 //$('div:visible').css('background','red');
115
116 //2將不可見元素3秒顯示出來
117 //$('div:hidden').show(3000);
118
119
120 //3.4 屬性過濾選擇器
121 //1改變含有title屬性的div元素的背景色
122 //$('div[title]').css('background','red');
123
124 //2改變屬性值等于test的div元素的背景色
125 //$('div[title=test]').css('background','red');
126
127 //3改變title值不等于tets的div元素的背景色
128 //$('div[title!=test]').css('background','red');
129
130 //4改變title以te開頭的div元素的背景色
131 //$('div[title^=te]').css('background','red');
132
133 //5.改變title以est結尾的div元素的背景色
134 //$('div[title$=est]').css('background','red');
135
136 //6.改變title含有es的div元素的背景色
137 //$('div[title*=es]').css('background','red');
138
139 //7改變含有id屬性，并且title屬性含有es的div元素的背景色
140 //$('div[id][title*=es]').css('background','red');
141
142 //3.5子元素過濾選擇器
143 //1改變每個class為one的div元素的第二個子元素的背景色 必須空格
144 //$('div.one :nth-child(2)').css('background','red');
145
146 //2改變每個class為one的div元素的第一個子元素的背景色
147 //$('div.one :first-child').css('background','red');
148
149 //3.改變每個class為one的div元素的最后一個子元素的背景色
150 //$('div :last-child').css('background','red');
151
152 //4.如果class為one的div元素只有一個子元素，那么改變這個子元素的背景色
153 //$('div :only-child').css('background','red');
154
155 }
156
157 );
158 </script>
159 </head>
160 <body>
161
162 <h1>jQuery選擇器</h1>
163 <div class="one" id="one">
164 id為one,class為one的div
165 <div class="mini">class為mini</div>
166 </div>
167 <div class="one" id="two" title="test">
168 id為two,class為one,title為test的div
169 <div class="mini" title="other">class為mini,title為other</div>
170 <div class="mini" title="test">class為mini,title為test</div>
171 </div>
172 <div class="one">
173 <div class="mini">class為mini</div>
174 <div class="mini">class為mini</div>
175 <div class="mini">class為mini</div>
176 <div class="mini" title="tesst">class為mini,title為tesst</div>
177 </div>
178 <div style="display:none;" class="none">style的display為none的div</div>
179 <div class="hide">class為hide的div</div>
180 <div>
181 包含的input的type為hidden的div<input type="hidden" size="8"/>
182 </div>
183 <span id="mover">正在執(zhí)行動畫的span</span>
184
185 </body>
186 </html>
posted on 2011-06-17 16:11
wawlian 閱讀(908)
評論(0) 編輯 收藏 所屬分類:
jQuery