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         #id             根据给定的id匹配一个元素                      单个元素         #("#test")          选取id为test的元素
  8         .class          根据给定的类名匹配元素                           集合元素      $(".test")          选取所有class为test的元素
  9         element         根据给定的元素名匹配元素                      集合元素      $("p")                 选取所有的<p>元素
 10         *                匹配所有元素                                                                 集合元素      $("*")                             选取所有的元素
 11         selector1,
 12         selector2, 
 13         ....,selectorN     将每一个选择器匹配到的元素合并后一起返回      集合元素      $("div,span,p.myClass") 选取所有<div>,<span>,和拥有class为myClass的<p>标签的一组元素
 14     
 15      -->
 16     <meta http-equiv="pragma" content="no-cache">
 17     <meta http-equiv="cache-control" content="no-cache">
 18     <meta http-equiv="expires" content="0">    
 19     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 20     <meta http-equiv="description" content="This is my page">
 21     <script type="text/javascript"  src="../../js/jquery.js"></script>
 22     <style type="text/css">
 23         div,span,p{
 24             width:140px;
 25             height:140px;
 26             margin:5px;
 27             background:#aaa;
 28             border:#000 1px solid;
 29             float:left;
 30             font-size:17px;
 31             font_family:Verdana;
 32         }
 33         div.mini{
 34             width:55px;
 35             height:55px;
 36             background-color:#aaa;
 37             font-size:12px;
 38         }
 39         div.hide{
 40             display:none;
 41         }    
 42     </style>
 43     
 44     <script type="text/javascript" >
 45         
 46         //根据id选择元素
 47         function test1(){
 48             $("#one").css("background","#bbffaa");
 49         }
 50         
 51         //根据class选择元素
 52         function test2(){
 53             $(".mini").css("background","#808000");
 54         }
 55 
 56         //根据标签选择元素
 57         function test3(){
 58             $("div").css("background","#00ff00");
 59         }
 60             
 61         //改变所有元素的背景色    
 62         function test4(){
 63             $("*").css("background","#ff00ff");
 64         }    
 65         
 66         //将每一个匹配到的选择器集合返回
 67         function test5(){
 68             $("span,#two").css("background","#008080");
 69         }
 70         
 71     </script>
 72   </head>
 73   <body>
 74   
 75   <div id="one" class="one">
 76           id为one  class为one的div
 77           <div class="mini">class为mini</div>
 78       </div>
 79   
 80       <div class="one"  id="two"  title="test">
 81            id为two class为one title为test的div
 82            <div class="mini"  title="other">class为mini  title为other</div>
 83            <div class="mini"  title="test">class为mini  title为test</div>
 84       </div>
 85   
 86       <div class="one">
 87           <div class="mini">class为mini</div>
 88           <div class="mini">class为mini</div>
 89           <div class="mini">class为mini</div>
 90           <div class="mini"></div>
 91       </div>
 92   
 93       <div class="one">
 94           <div class="mini">class为mini</div>
 95           <div class="mini">class为mini</div>
 96           <div class="mini">class为mini</div>
 97           <div class="mini" title="tesst">class为mini title为tesst</div>
 98       </div>
 99   
100       <div style="display:none;"  class="none">
101           style为display class为none的div
102       </div>
103   
104     <div class="hide">class为hide的div</div>  
105   
106   
107       <div>
108           包涵input的type为hidden的div<input  type="hidden"  size="8"/>
109       </div>
110       
111       <span id="mover">正在执行动画的span元素</span>
112       
113       <br>
114       <input type="button" onclick="test1()"  value="改变id为noe的元素的背景色"/>
115       <input type="button" onclick="test2()"  value="改变class为mini的所有元素的背景色"/>
116       <input type="button" onclick="test3()"  value="改变元素名是<div>的所有元素的背景色"/>
117       <input type="button" onclick="test4()"  value="改变所有元素的背景色"/>
118       <input type="button" onclick="test5()"  value="改变所有的<span>元素和id为two的元素的背景色"/>
119   </body>
120 </html>

 

posted on 2016-04-10 16:31  奈文摩尔ゞ  阅读(296)  评论(0编辑  收藏  举报