基本选择器学习：
代码如下：
1 <%@ page language="java" import="java.util.*" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 <html> 5 <head> 6 <title>11</title> 7 <script type="text/javascript" src="js/jquery-1.11.0.js"> 8 </script> 9 <script language="javascript"> 10 $(document).ready(function() 11 { 12 alert("欢迎来到层级选择器学习界面"); 13 //*************改变第一个和最后一个div的背景色为#ff00ff******* 14 $("#bt1").click(function() 15 { 16 $("div").first().css("background","ff00ff"); 17 //两种方法一样 18 //$("div:first").css("background","ff00ff"); 19 $("div:last").css("background","ff00ff"); 20 }); 21 //*************改变id不为div1的所有div的背景色为#ff0001******* 22 $("#bt2").click(function() 23 { 24 //先选择div，然后再过滤 25 $("div:not(#div1)").css("background","#ff0001"); 26 }); 27 //*************改变索引值为偶数的div背景色为#ff00aa，偶数的为#aa00bb******* 28 $("#bt3").click(function() 29 { 30 //先选择div，然后再过滤 31 $("div:even").css("background","#ff00aa"); 32 $("div:odd").css("background","#aa00bb"); 33 }); 34 35 }); 36 37 //****************************************************** 38 </script> 39 </head> 40 <body> 41 <input type="button" id="bt1" value="改变第一个和最后一个div的背景色为#ff00ff" ></input> 42 <input type="button" id="bt2" value="改变id不为div1的所有div的背景色为#ff0001" ></input> 43 <input type="button" id="bt3" value="改变索引值为偶数的div背景色为#ff00aa，偶数的为#aa00bb" ></input> 44 <br/><br/> 45 <div id="div1" style="background:grey;border:1px solid;20%;height:30%;float:left;">div1</div> 46 <div id="div2" style="background:white;border:1px solid;20%;height:30%;float:left;"> 47 div2 48 <p>p1第一段</p> 49 <p>p2第二段</p> 50 <div id="div2_01" style="background:white;border:1px solid;20%;height:30%;float:left;">div2_01</div> 51 </div> 52 <div id="div3" style="background:grey;border:1px solid;20%;height:30%;float:left;">div3</div> 53 <br> 54 </body> 55 </html>
动画效果的背景控制：
1 <%@ page language="java" import="java.util.*" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 <html> 5 <head> 6 <title>11</title> 7 <script type="text/javascript" src="js/jquery-1.11.0.js"> 8 </script> 9 </head> 10 <body> 11 <h1>第一个table</h1> 12 <table border="1px" width="20%" > 13 <tr><td>1.1</td><td>1.2</td></tr> 14 <tr><td>2.1</td><td>2.2</td></tr> 15 <tr><td>3.1</td><td>3.2</td></tr> 16 </table> 17 <h1>第二个table</h1> 18 <table width="20%"> 19 <tr><td>1.1</td><td>1.2</td></tr> 20 <tr><td>2.1</td><td>2.2</td></tr> 21 <tr><td>3.1</td><td>3.2</td></tr> 22 </table> 23 <input type="button" value="改变动画效果的背景色为grey" id="move" > </input> 24 <div id="mover" background="grey">动画</div> 25 <script language="javascript"> 26 $("table:eq(0) tr:even").css("background","#ff00a0"); 27 $("table:eq(0) tr:odd").css("background","silver"); 28 $("table:eq(1) tr:eq(0)").css("background","yellow"); 29 $("table:eq(1) tr:gt(1)").css("background","pink"); 30 $(":header").css("background","silver"); 31 function ca() 32 { 33 $("#mover").slideToggle("fast",ca); 34 } 35 ca(); 36 $("#move").click( 37 function() 38 { 39 $(":animated").css("background", "pink") 40 }); 41 42 //****************************************************** 43 </script> 44 </body> 45 </html>