标签：
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <title>Insert title here</title> 8 <script src="../js/jquery-1.11.3.js" type="text/javascript"></script> 9 <script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script> 10 <script language="javascript"> 11 document.ready(function() { 12 $("#b1").click(function(){ 13 $("div:first").css("background-color","red"); 14 }); 15 $("#b2").click(function(){ 16 $("div:last").css("background-color","red"); 17 }); 18 $("#b3").click(function(){ 19 $("div:not(.one)").css("background-color","red"); 20 }); 21 $("#b4").click(function(){ 22 $("div:even").css("background-color","red"); 23 }); 24 $("#b5").click(function(){ 25 $("div:odd").css("background-color","red"); 26 }); 27 $("#b6").click(function(){ 28 $("div:gt(3)").css("background-color","red"); 29 }); 30 $("#b7").click(function(){ 31 $("div:eq(3)").css("background-color","red"); 32 }); 33 $("#b8").click(function(){ 34 $("div:it(3)").css("background-color","red"); 35 }); 36 }); 37 </script> 38 </head> 39 <body> 40 <input type="button" value="改变第一个div的背景色" id="b1" /> 41 <input type="button" value="改变最后一个div的背景色" id="b2" /> 42 <input type="button" value="改变class不为one的所有div的背景色" id="b3" /> 43 <input type="button" value="改变索引值为偶数的div的背景色" id="b4" /> 44 <input type="button" value="改变索引值为基数的div的背景色" id="b5" /> 45 <input type="button" value="改变索引值大于3的div的背景色" id="b6" /> 46 <input type="button" value="改变索引值等于3的div的背景色" id="b7" /> 47 <input type="button" value="改变索引值小于3的div的背景色" id="b8" /> 48 <input type="button" value="改变所有标题元素的背景色" id="b9" /> 49 50 <h2>h2</h2> 51 <h5>h5</h5> 52 <h3>h3</h3> 53 <div class="one">div1</div> 54 <div class="one">div2</div> 55 <div>div3</div> 56 <div>div4</div> 57 <div>div5</div> 58 <div>div6</div> 59 <div>div7</div> 60 <div class="one">div8</div> 61 <div>div9</div> 62 63 <input type="button" value="增加动画效果" id="b10" /> 64 <br> 65 <div id="mover">动画</div> 66 </body> 67 </html>
标签：
原文地址：http://www.cnblogs.com/tingbogiu/p/4691322.html
