1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>第2章示例2</title> 6 <style type="text/css"> 7 body { width:760px; } 8 div,p,h3,h1 { border:4px solid black; background-color:green; color:white; margin:6px; padding:5px; font:bold 14px/1 Arial,Helvetica,sans-serif; width:220px; float:left; } 9 div p { width:205px; border-width:2px; margin:5px 0; float:none; } 10 h1 { margin:6px 256px; } h3 { position:relative; margin-right:500px; } 11 div.top { height:65px; } 12 .clear { clear:both; } 13 div.hide { display:none; } p.hide { visibility:hidden; } 14 .highlight { background-color:gold; color:black; } 15 form { clear:both; } 16 button { font:bold 16px/1 Arial,Helvetica,sans-serif; margin:1px 3px; padding:2px; cursor:pointer; width:240px; } 17 </style> 18 <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> 19 <script type="text/javascript"> 20 $(document).ready(function(){ 21 $("button").click(function(){$("*").removeClass("highlight");}); 22 $("#btn1").click(function(){$("p:first").addClass("highlight");}); 23 $("#btn2").click(function(){$("p:last").addClass("highlight");}); 24 $("#btn3").click(function(){$("p:even").addClass("highlight");}); 25 $("#btn4").click(function(){$("p:odd").addClass("highlight");}); 26 $("#btn5").click(function(){$("p:eq(2)").addClass("highlight");}); 27 $("#btn6").click(function(){$("p:gt(2)").addClass("highlight");}); 28 $("#btn7").click(function(){$("p:lt(2)").addClass("highlight");}); 29 $("#btn8").click(function(){$("p:not(.clear)").addClass("highlight");}); 30 $("#btn9").click(function(){$(":header").addClass("highlight");}); 31 $("#btn10").click(function(){$(":animated").addClass("highlight");}); 32 $("#btn11").click(function(){var i=3; $("p:eq("+i+")").addClass("highlight");}); 33 $("#btn12").click(function(){$("p:not(:lt(1),:gt(3))").addClass("highlight");}); 34 function swing() { 35 $("h3").animate({left:"500"},7000) 36 .animate({left:"0"},7000, swing); 37 } 38 swing(); 39 }); 40 </script> 41 </head> 42 <body> 43 <h1><h1> </h1></h1> 44 <div class="clear top"> 45 <div class="clear top"> 46 <p><p>hello</p></p> 47 </div> 48 </div> 49 <div class="top" id="core"> 50 <div class="top" id="core"> 51 <p><p> </p></p> 52 </div> 53 </div> 54 <div class="top"> 55 <div class="top"><br/> 56 hello, John<br/> 57 </div> 58 </div> 59 <p class="clear"><p class="clear"> </p></p> 60 <p><p > </p></p> 61 <p><p > </p></p> 62 <h3 class="clear"><h3 class="clear"> </h3></h3> 63 <p class="clear"><p class="clear"> </p></p> 64 <p><p > </p></p> 65 <p class="hide"><p class="hide"> </p></p> 66 <div class="clear bottom"> 67 <div class="clear bottom"> 68 <p><p> </p></p> 69 <p><p> </p></p> 70 <p><p> </p></p> 71 </div> 72 </div> 73 <div class="bottom"> 74 <div class="bottom"> 75 <p><p> </p></p> 76 <p><p> </p></p> 77 <p><p> </p></p> 78 </div> 79 </div> 80 <div class="hide bottom"> 81 <div class="hide bottom"> 82 <p><p> </p></p> 83 <p><p> </p></p> 84 <p><p> </p></p> 85 </div> 86 </div> 87 <form> 88 <button type="button" id="btn1">$("p:first")</button> 89 <button type="button" id="btn2">$("p:last")</button> 90 <button type="button" id="btn3">$("p:even")</button> 91 <button type="button" id="btn4">$("p:odd")</button> 92 <button type="button" id="btn5">$("p:eq(2)")</button> 93 <button type="button" id="btn6">$("p:gt(2)")</button> 94 <button type="button" id="btn7">$("p:lt(2))</button> 95 <button type="button" id="btn8">$("p:not(.clear)")</button> 96 <button type="button" id="btn9">$(":header")</button> 97 <button type="button" id="btn10">$(":animated")</button> 98 <button type="button" id="btn11">var i=3; $("p:eq("+i+")")</button> 99 <button type="button" id="btn12">$("p:not(:lt(1), :gt(3))")</button> 100 </form> 101 </body> 102 </html>
