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>第3章示例2</title> 6 <style type="text/css"> 7 body { width:760px; } 8 div,p,h3,span { border:4px solid black; background-color:green; color:white; float:left; margin:6px; padding:5px; font:bold 14px/1 Arial,Helvetica,sans-serif; width:220px; display:block; } 9 div p,div span { width:205px; border-width:2px; margin:5px 0; float:none; } 10 p span { width:193px; border-width:1px; } 11 h3 { margin-right:500px; } 12 .clear { clear:both; } 13 .relative { position:relative; } 14 .highlight { background-color:gold; color:black; } 15 form { clear:both; font:bold 14px/1 Arial,Helvetica,sans-serif; } 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").removeAttr("disabled").click(function(){$("*").removeClass("highlight");}); 22 $("#btn1").click(function(){$("div").children("span").addClass("highlight");}); 23 $("#btn2").click(function(){$("div").children().addClass("highlight");}); 24 $("#btn3").click(function(){$("div").find("span").addClass("highlight");}); 25 $("#btn4").click(function(){$("div").find().addClass("highlight");}); 26 $("#btn5").click(function(){$("div").find("span:first").addClass("highlight");}); 27 $("#btn6").click(function(){ 28 $("div:first").contents().addClass("highlight").filter(function(){return this.nodeType==3;}).wrap("<b class='highlight'></b>"); 29 $("button").attr("disabled","disabled").text("刷新页面后再点击!"); 30 }); 31 }); 32 </script> 33 </head> 34 <body> 35 <div class="clear"> 36 <div class="clear"> 37 <p> 38 <p> 39 <span><span> </span></span> 40 </p> 41 </p> 42 </div> 43 </div> 44 <div> 45 <div> 46 <p><p> </p></p> 47 <p><p> </p></p> 48 <p><p> </p></p> 49 </div> 50 </div> 51 <div class="relative"> 52 <div class="relative"> 53 <span><span> </span></span> 54 <span><span> </span></span> 55 <span class="clear"><span class="clear"> </span></span> 56 </div> 57 </div> 58 <h3 class="clear"><h3 class="clear"> </h3></h3> 59 <div class="clear"> 60 <div class="clear"> 61 <p> 62 <p> 63 <span><span> </span></span> 64 <span><span> </span></span> 65 </p> 66 </p> 67 <p> 68 <p> 69 <span><span> </span></span> 70 <span><span> </span></span> 71 </p> 72 </p> 73 </div> 74 </div> 75 <div> 76 <div> 77 <p><p> </p></p> 78 <p><p> </p></p> 79 <p><p> </p></p> 80 </div> 81 </div> 82 <div class="relative"> 83 <div class="relative"> 84 <span><span> </span></span> 85 <span><span> </span></span> 86 <span class="clear"><span class="clear"> </span></span> 87 </div> 88 </div> 89 <form> 90 <button type="button" id="btn1">$("div").children("span")</button> 91 <button type="button" id="btn2">$("div").children()</button> 92 <button type="button" id="btn3">$("div").find("span")</button> 93 <button type="button" id="btn4">$("div").find()</button> 94 <button type="button" id="btn5">$("div").find("span:first")</button> 95 <button type="button" id="btn6">$("div:first").contents()</button> 96 </form> 97 </body> 98 </html>