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>
