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>