jQuey常用选择器（一）

jQuey常用选择器（一）

以下内容均是来自《锋利的jQuery》，发到这里，纯属做个笔记，方便查阅。
直接看代码：

   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内子元素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改变索引值为偶数的div的背景色    计数从0开始
 79                   // $('div:even').css('background','red');
 80 
 81                   // 5改变索引值为奇数的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内容过滤选择器
100                   // 1改变内容包含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 " > 正在执行动画的span </ span >
184 
185  </ body >
186  </ html >