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 :first 选取第一个元素 单个元素 #("div:first") 选取所有div中的第一个div元素 8 :last 选取最后一个元素 单个元素 $("div:last") 选取所有div中的最后一个div元素 9 :not(selector) 去除所有与给定选择器匹配的元素 集合元素 $("input:not(.myClass)") 选取class不是myClass的input元素 10 :even 选取索引是偶数的所有元素，索引从0开始 集合元素 $("input:even") 选取索引是偶数的input元素 11 :odd 选取索引是奇数的所有元素，索引从0开始 集合元素 $("input:odd") 选取索引是奇数的input元素 12 :eq(index) 选取索引等于index的元素（index从0开始） 单个元素 $("input:eq(1)") 选取索引等于1的input元素 13 :gt(index) 选取索引大于index的元素（index从0开始） 集合元素 $("input:gt(1)") 选取索引大于1的input元素（注：大于1 而不包括1） 14 :lt(index) 选育索引小与index的元素（index从0开始） 集合元素 $("input:lt(1)") 选取索引小于1的input元素（注：小于1 而不包括1） 15 :header 选取所有的标题元素，例如h1,h2,h3等等 集合元素 $(":header") 选取网页中所有的<h1>,<h2>,<h3>…… 16 :animated 选取当前正在执行动画的所有元素 集合元素 $("div:animated") 选取正在执行动画的div元素 17 :focus 选取当前获取焦点的元素 集合元素 $(":focus") 选取当前获取焦点的元素 18 --> 19 <meta http-equiv="pragma" content="no-cache"> 20 <meta http-equiv="cache-control" content="no-cache"> 21 <meta http-equiv="expires" content="0"> 22 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 23 <meta http-equiv="description" content="This is my page"> 24 <script type="text/javascript" src="../../js/jquery.js"></script> 25 <style type="text/css"> 26 div,span,p{ 27 width:140px; 28 height:140px; 29 margin:5px; 30 background:#aaa; 31 border:#000 1px solid; 32 float:left; 33 font-size:17px; 34 font_family:Verdana; 35 } 36 div.mini{ 37 width:55px; 38 height:55px; 39 background-color:#aaa; 40 font-size:12px; 41 } 42 div.hide{ 43 display:none; 44 } 45 </style> 46 47 <script type="text/javascript" > 48 49 //选取第一个div元素 50 function test1(){ 51 $("div:first").css("background","#bbffaa"); 52 } 53 54 //选取最后第一个div元素 55 function test2(){ 56 $("div:last").css("background","#808000"); 57 } 58 59 //选取class不为one的div元素 多个用 , 隔开 $("div:not(.one,.two)") 60 function test3(){ 61 $("div:not(.one)").css("background","#00ff00"); 62 } 63 64 //选取索引值为偶数的div 下标从0开始 0算偶数 65 function test4(){ 66 $("div:even").css("background","00ff00"); 67 } 68 69 //选取索引值为奇数的div 下标从0开始 0算偶数 70 function test5(){ 71 $("div:odd").css("background","00ff00"); 72 } 73 74 //选取索引值为3的div 下标从0开始 0算偶数 75 function test6(){ 76 $("div:eq(3)").css("background","00ff00"); 77 } 78 79 //选取索引值大于3的div 下标从0开始 0算偶数 不包括3 80 function test7(){ 81 $("div:gt(3)").css("background","00ff00"); 82 } 83 84 //选取索引值小于3的div 下标从0开始 0算偶数 不包括3 85 function test8(){ 86 $("div:lt(3)").css("background","00ff00"); 87 } 88 89 //选取所有标题元素 <h1> <h2> <h3> 90 function test9(){ 91 $(":header").css("background","00ff00"); 92 } 93 94 //改变当前正在执行动画的元素 的背景色 ？？？ 95 function test10(){ 96 $(":animated").css("background","00ff00"); 97 } 98 99 //改变当前获取焦点的背景色 100 function test11(){ 101 $(":focus").css("background","00ff00"); 102 } 103 </script> 104 </head> 105 <body> 106 107 <div id="one" class="one"> 108 id为one class为one的div 109 <div class="mini">class为mini</div> 110 </div> 111 112 <div class="one" id="two" title="test"> 113 id为two class为one title为test的div 114 <div class="mini" title="other">class为mini title为other</div> 115 <div class="mini" title="test">class为mini title为test</div> 116 </div> 117 118 <div class="one"> 119 <div class="mini">class为mini</div> 120 <div class="mini">class为mini</div> 121 <div class="mini">class为mini</div> 122 <div class="mini"></div> 123 </div> 124 125 <div class="one"> 126 <h1>fsdfds</h1> 127 <div class="mini">class为mini</div> 128 <div class="mini">class为mini</div> 129 <div class="mini">class为mini</div> 130 <div class="mini" title="tesst">class为mini title为tesst</div> 131 </div> 132 133 <div style="display:none;" class="none"> 134 style为display class为none的div 135 </div> 136 137 <div class="hide">class为hide的div</div> 138 139 140 <div> 141 包涵input的type为hidden的div<input type="hidden" size="8"/> 142 </div> 143 144 <span id="mover">正在执行动画的span元素</span> 145 146 147 <br> 148 <input type="button" onclick="test1()" value="改变第一个div元素的背景色"/> 149 <input type="button" onclick="test2()" value="改变最后一个div元素的背景色"/> 150 <input type="button" onclick="test3()" value="改变class不为one的div元素的背景色"/> 151 <input type="button" onclick="test4()" value="改变索引值为偶数的div元素的背景色"/> 152 <input type="button" onclick="test5()" value="改变索引为奇数的div元素的背景色"/> 153 <input type="button" onclick="test6()" value="改变索引值等于3的div元素的背景色"/> 154 <input type="button" onclick="test7()" value="改变索引值大于3的div元素的背景色"/> 155 <input type="button" onclick="test8()" value="改变索引值小于3的div元素的背景色"/> 156 <input type="button" onclick="test9()" value="改变所有的标题元素，例如<h1>,<h2>,<h2>这些元素的背景色"/> 157 <input type="button" onclick="test10()" value="改变当前正在执行动画的元素的背景色"/> 158 <input type="button" onclick="test11()" value="改变当前获取焦点的背景色"/> 159 160 161 </body> 162 </html>