常用的基本选择器有
上例子：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .red{
8 background: red;
9 }
10 </style>
11 <script src="lib/jquery-1.12.2.js"></script>
12 <script>
13 $(function () {
14 // 选中所有的段落标签
15 $('button')[0].onclick = function () {
16 $('p').addClass('red');
17 }
18
19 // 选择class为left的标签
20 $('button')[1].onclick = function () {
21 $('.left').addClass('red');
22 }
23
24 // 选择id为box的标签
25 $('button')[2].onclick = function () {
26 $('#box').addClass('red');
27 }
28 // 选择所有不分类型标签
29 $('button')[3].onclick = function () {
30 $('*').addClass('red');
31 }
32 // 选择所有标题标签
33 $('button')[4].onclick = function () {
34 $('h1,h2,h3,h4,h5,h6').addClass('red');
35 }
36 // 选择ul里面的li标签
37 $('button')[5].onclick = function () {
38 $('ul li').addClass('red');
39 }
40 // 选择body下的第一级所有标签并添加边框
41 $('button')[6].onclick = function () {
42 $('body > *').addClass('red');
43 }
44 // 选择p后的一个div
45 $('button')[7].onclick = function () {
46 $('p+div').addClass('red');
47 }
48 // 选择p后的有div
49 $('button')[8].onclick = function () {
50 $('p~div').addClass('red');
51 }
52 });
53 </script>
54 </head>
55 <body>
56 <body>
57 <button>选择所有段落标签</button>
58 <button>选择class为left的标签</button>
59 <button>选择id为box的标签</button>
60 <button>选择所有不分类型标签</button>
61 <button>选择所有标题标签</button>
62 <button>选择ul里面的li标签</button>
63 <button>选择body下的第一级所有标签并添加边框</button>
64 <button>选择p后的一个div</button>
65 <button>选择p后的所有div</button>
66 <p>段落标签</p>
67 <p>段落标签</p>
68 <p>段落标签</p>
69 <div class="left">类选择器</div>
70 <div class="left">类选择器</div>
71 <div id="box">id选择器</div>
72 <h1>标题1标签</h1>
73 <h2>标题2标签</h2>
74 <h3>标题3标签</h3>
75 <ul>
76 <li>列表项</li>
77 <li>列表项</li>
78 <li>列表项</li>
79 <div>我也是div</div>
80 </ul>
81 <ol>
82 <li>列表项</li>
83 <li>列表项</li>
84 <li>列表项</li>
85 </ol>
86
87 </body>
88 </html>
