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