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章示例4</title> 6 <style type="text/css"> 7 body { width:780px; } 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:245px; } 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(){$("h3").next(".clear").addClass("highlight");}); 23 $("#btn2").click(function(){$("h3").next().addClass("highlight");}); 24 $("#btn3").click(function(){$("h3").prev(".clear").addClass("highlight");}); 25 $("#btn4").click(function(){$("h3").prev().addClass("highlight");}); 26 $("#btn5").click(function(){$("h3").nextAll("[class]").addClass("highlight");}); 27 $("#btn6").click(function(){$("h3").nextAll().addClass("highlight");}); 28 $("#btn7").click(function(){$("h3").prevAll("[class]").addClass("highlight");}); 29 $("#btn8").click(function(){$("h3").prevAll().addClass("highlight");}); 30 $("#btn9").click(function(){$("h3").siblings("[class]").addClass("highlight");}); 31 $("#btn10").click(function(){$("h3").siblings().addClass("highlight");}); 32 $("#btn11").click(function(){$("h3").nextUntil(".relative").addClass("highlight");}); 33 $("#btn12").click(function(){$("h3").nextUntil().addClass("highlight");}); 34 $("#btn13").click(function(){$("h3").prevUntil(".clear").addClass("highlight");}); 35 $("#btn14").click(function(){$("h3").prevUntil().addClass("highlight");}); 36 $("button").click(function(){$("form").removeClass("highlight");}); 37 }); 38 </script> 39 </head> 40 <body> 41 <div class="clear"> 42 <div class="clear"> 43 <p> 44 <p> 45 <span><span> </span></span> 46 </p> 47 </p> 48 </div> 49 </div> 50 <div> 51 <div> 52 <p><p> </p></p> 53 <p><p> </p></p> 54 <p><p> </p></p> 55 </div> 56 </div> 57 <div class="relative"> 58 <div class="relative"> 59 <span><span> </span></span> 60 <span><span> </span></span> 61 <span class="clear"><span class="clear"> </span></span> 62 </div> 63 </div> 64 <h3 class="clear"><h3 class="clear"> </h3></h3> 65 <div class="clear"> 66 <div class="clear"> 67 <p> 68 <p> 69 <span><span> </span></span> 70 <span><span> </span></span> 71 </p> 72 </p> 73 <p> 74 <p> 75 <span><span> </span></span> 76 <span><span> </span></span> 77 </p> 78 </p> 79 </div> 80 </div> 81 <div> 82 <div> 83 <p><p> </p></p> 84 <p><p> </p></p> 85 <p><p> </p></p> 86 </div> 87 </div> 88 <div class="relative"> 89 <div class="relative"> 90 <span><span> </span></span> 91 <span><span> </span></span> 92 <span class="clear"><span class="clear"> </span></span> 93 </div> 94 </div> 95 <form> 96 <button type="button" id="btn1">$("h3").next(".clear")</button> 97 <button type="button" id="btn2">$("h3").next()</button> 98 <button type="button" id="btn3">$("h3").prev(".clear")</button> 99 <button type="button" id="btn4">$("h3").prev()</button> 100 <button type="button" id="btn5">$("h3").nextAll("[class]")</button> 101 <button type="button" id="btn6">$("h3").nextAll()</button> 102 <button type="button" id="btn7">$("h3").prevAll("[class]")</button> 103 <button type="button" id="btn8">$("h3").prevAll()</button> 104 <button type="button" id="btn9">$("h3").siblings("[class]")</button> 105 <button type="button" id="btn10">$("h3").siblings()</button> 106 <button type="button" id="btn11">$("h3").nextUntil(".relative")</button> 107 <button type="button" id="btn12">$("h3").nextUntil()</button> 108 <button type="button" id="btn13">$("h3").prevUntil(".clear")</button> 109 <button type="button" id="btn14">$("h3").prevUntil()</button> 110 </form> 111 </body> 112 </html>