1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="js/jquery-1.8.3.js"></script> 7 <!-- 为了测试，先添加一些样式 --> 8 <style type="text/css"> 9 div[class=big] { 10 width:140px; 11 height:140px; 12 margin:5px; 13 background:#aaa; 14 border:#000 1px solid; 15 float:left; 16 font-size:17px; 17 font-family:Verdana; 18 } 19 div[class=small] { 20 width:55px; 21 height:60px; 22 margin:5px; 23 background:#aaa; 24 border:#000 1px solid; 25 float:left; 26 font-size:17px; 27 font-family:Verdana; 28 } 29 </style> 30 31 <script type="text/javascript"> 32 //jQuery的页面加载完成时触发的事件 33 $(document).ready(function(){ 34 //$("div[title]")表示：选择有title属性的div 35 $(button1).click(function(){ 36 $("div[title]").css("background-color", "red"); 37 }); 38 39 //$("div[id='div3']")表示：选择id为div3的div 40 $(button2).click(function(){ 41 $("div[id='div3']").css("background-color", "red"); 42 }); 43 44 //$("div[id!='small2']")表示：选择id值除了small2以外的所有div 45 $(button3).click(function(){ 46 $("div[id!='small2']").css("background-color", "red"); 47 }); 48 49 //$("div[id^='small']")表示：选择id值前面是small的div 50 $(button4).click(function(){ 51 $("div[id^='small']").css("background-color", "red"); 52 }); 53 54 //$("div[id$='1']")表示：选择id值后面是1的div 55 $(button5).click(function(){ 56 $("div[id$='1']").css("background-color", "red"); 57 }); 58 59 //$("div[id*='div']")表示：选择id值里面含有div的div 60 $(button6).click(function(){ 61 $("div[id*='div']").css("background-color", "red"); 62 }); 63 64 }); 65 </script> 66 </head> 67 <body> 68 <a href="">刷新</a> 69 <input type="button" id="button1" value="选择有title"/> 70 <input type="button" id="button2" value="选择div3"/> 71 <input type="button" id="button3" value="选择除了small2的所有div"/> 72 <input type="button" id="button4" value="选择small开头的div"/> 73 <input type="button" id="button5" value="选择1结尾的div"/> 74 <input type="button" id="button6" value="选择属性值含有div的元素"/> 75 <br/><br/> 76 77 <div class="big" id="div1"> 78 div1<br/> 79 <div class="small" id="small1">small1</div> 80 <div class="small" id="small2">small2</div> 81 </div> 82 83 <div class="big" id="div2"> 84 div2<br/> 85 <div class="small" id="small3">small3</div> 86 <div class="small" id="small4" title>small4<br/>_title</div> 87 </div> 88 89 <div class="big" id="div3"> 90 div3<br/> 91 <div class="small" id="small3">small5</div> 92 </div> 93 94 <div class="big" id="div4"> 95 div4 96 </div> 97 98 </body> 99 </html>