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>