jquery选择器，整理自《锋利的jquery》 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html>
  3 <head>
  4     <title>jquery-selector</title>
  5     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  6     <script type="text/javascript" src="jquery-1.3.1.js"></script>
  7     <style type="text/css">
  8         div,span,p{
  9             width: 140px;
 10             height: 140px;
 11             margin: 5px;
 12             background: #aaa;
 13             border: #000 1px solid;
 14             float: left;
 15             font-size: 17px;
 16             font-family: Verdana;
 17         }
 18         div.mini{
 19             width: 55px;
 20             height: 55px;
 21             background-color: #aaa;
 22             font-size: 12px;
 23         }
 24         div.hide{
 25             display: none;
 26         }
 27     </style>
 28     <script type="text/javascript">
 29     $(function(){
 30         /*
 31         基本选择器
 32         */
 33         //$("#one").css("background","#bbffaa");    
 34         //$(".mini").css("background","#bbffaa");    
 35         //$("div").css("background","#bbffaa");
 36         //$("*").css("background","#bbffaa");
 37         //$("span,#two").css("background","#bbffaa");
 38 
 39         /*
 40         层次选择器
 41         */
 42         //$("body div").css("background","#bbffaa");//改变body内所有div的颜色
 43         //$("body>div").css("background","#bbffaa");//改变body内子div的颜色
 44         //$(".one+div").css("background","#bbffaa");//改变class为one的下一个div兄弟元素的颜色
 45         //$(".one").next("div").css("background","#bbffaa");
 46         //$("#two~div").css("background","#bbffaa");//改变id为two的元素后面的所有div兄弟元素的颜色
 47         //$("#two").nextAll("div").css("background","#bbffaa");
 48         //$("#two").siblings("div").css("background","#bbffaa");
 49 
 50         /*
 51         过滤选择器
 52         */
 53         //基本过滤选择器
 54         //$("div:first").css("background","#bbffaa");//改变第一个div的颜色
 55         //$("div:last").css("background","#bbffaa");//改变最后一个div的颜色
 56         //$(".one:not(#one)").css("background","#bbffaa");//改变class为one但id不为one的元素的颜色
 57         //$("div:even").css("background","#bbffaa");//改变索引是偶数的所有div的颜色，索引从0开始
 58         //$("div:odd").css("background","#bbffaa");//改变索引是奇数的所有div的颜色，索引从0开始
 59         //$("div:eq(1)").css("background","#bbffaa");//改变索引为1的div的颜色，索引从0开始
 60         //$("div:gt(1)").css("background","#bbffaa");//改变索引大于1的div的颜色，索引从0开始
 61         //$("div:lt(1)").css("background","#bbffaa");//改变索引小于1的div的颜色，索引从0开始
 62         //:header 选取所有的标题元素
 63         //:animated 选取当前正在执行动画的所有元素
 64 
 65         //内容过滤选择器
 66         //$("div:contains('id为two')").css("background","#bbffaa");//改变含有文本‘id为two’的div的颜色
 67         //$("div:empty").css("background","#bbffaa");//改变不包含子元素或者文本为空的div的颜色
 68         //$("div:has('input')").css("background","#bbffaa");//改变含有input标签的div的颜色
 69         //$("div:parent").css("background","#bbffaa");//改变包含有子元素或者文本不为空的div的颜色
 70 
 71         //可见性过滤选择器
 72         //$("div:hidden").show(3000);//显示隐藏的div
 73         //$("div:visible").css("background","#bbffaa");//改变所有可见的div的颜色
 74 
 75         //属性过滤器
 76         //$("div[id]").css("background","#bbffaa");//改变含有id属性的div的颜色
 77         //$("div[id=one]").css("background","#bbffaa");//改变含有id值等于one的div的颜色
 78         //$("div[id!=one]").css("background","#bbffaa");//改变所有id值不等于one的div的颜色，包括没有id属性的div
 79         //$("div[id^=o]").css("background","#bbffaa");//改变id属性值以o开头的div的颜色
 80         //$("div[id$=e]").css("background","#bbffaa");//改变id属性值以e结尾的div的颜色
 81         //$("div[id*=o]").css("background","#bbffaa");//改变id属性值含有o的div的颜色
 82         //$("div[id][title=test]").css("background","#bbffaa");//改变含有id属性且title值等于test的div的颜色
 83 
 84         //子元素过滤器
 85         //$("div.one :nth-child(even)").css("background","#bbffaa");//改变class为one的div父元素下的偶数元素的颜色，索引从1开始.注意过滤器前的空格
 86         //$("div.one :first-child").css("background","#bbffaa");//改变class为one的div父元素下的第一个子元素的颜色
 87         //$("div.one :last-child").css("background","#bbffaa");//改变class为one的div父元素下的最后一个子元素的颜色
 88         //$("div.one :only-child").css("background","#bbffaa");//改变class为one的div父元素中拥有唯一子元素的颜色
 89 
 90         //表单对象属性过滤选择器
 91         //:enabled 选取所有可用的元素
 92         //:disabled 选取所有不可用的元素
 93         //:checked 选取所有被选中的元素（单选框，复选框）
 94         //:selected 选取所有被选中的选项元素
 95 
 96         /*
 97         表单选择器
 98         */
 99         //:input 选取所有的<input>、<textarea>、<select>、<button>元素
100         //:text 选取所有的单行文本框
101         //:password 选取所有的密码框
102         //:radio 选取所有的单选框
103         //:checkbox 选取所有哦的多选框
104         //:submit 选取所有的提交按钮
105         //:image 选取所有的图像提交按钮
106         //:reset 选取所有的重置按钮
107         //:button 选取所有的按钮
108         //:file 选取所有的上传域
109         //:hidden 选取所有的不可见元素
110     })
111     </script>
112 </head>
113 <body>
114     <div class="one" id="one">
115         id为one，class为one的div
116         <div class="mini">class为mini</div>
117     </div>
118     <div class="one" id="two" title="test">
119         id为two，class为one的div
120         <div class="mini" title="other">class为mini，title为other</div>
121         <div class="mini" title="test">class为mini，title为test</div>
122     </div>
123     <div class="one">
124         <div class="mini">class为mini</div>
125         <div class="mini">class为mini</div>
126         <div class="mini">class为mini</div>
127         <div class="mini"></div>
128     </div>
129     <div class="one">
130         <div class="mini">class为mini</div>
131         <div class="mini">class为mini</div>
132         <div class="mini">class为mini</div>
133         <div class="mini" title="test">class为mini，title为test</div>
134     </div>
135     <div style="display:none;" class="none">style的display为none的div</div>
136     <div class="hide">class为hide的div</div>
137     <div>
138         包含input的type为hidden的div
139         <input type="hidden" sizej="8"/>
140     </div>
141     <span id="mover">正在执行动画的span元素</span>
142 </body>
143 </html>

 

posted @ 2013-03-14 17:06  Kimi_1990  阅读(96)  评论(0)    收藏  举报