常用的基本选择器有
上例子：
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>