一：基础选择器参数主要包含了：id,标签名，类，*，还有就是多个选择器共同作为筛选条件的测试
主要测试内容为每个按钮的value
html代码：
1 <input type="button" id="btn1" value="选择为one的元素" /> 2 <input type="button" id="btn2" value="选择样式为mini的元素" /> 3 <input type="button" id="btn3" value="选择所有的div元素" /> 4 <input type="button" id="btn4" value="选择所有元素" /> 5 <input type="button" id="btn5" value="选择id为two并且样式为mini的元素" /> 6 <hr /> 7 <div id="one"> 8 <div class="mini"> 9 111 10 </div> 11 </div> 12 13 <div id="two"> 14 <div class="mini"> 15 222 16 </div> 17 <div class="mini"> 18 333 19 </div> 20 </div> 21 22 <div id="three"> 23 <div class="mini"> 24 444 25 </div> 26 <div class="mini"> 27 555 28 </div> 29 <div class="mini"> 30 666 31 </div> 32 </div> 33 34 <span id="four"> 35 36 </span>
CSS代码：
1 div,span,p { 2 width:140px; 3 height:140px; 4 margin:5px; 5 background:#aaa; 6 border:#000 1px solid; 7 float:left; 8 font-size:17px; 9 font-family:Verdana; 10 } 11 div.mini { 12 width:55px; 13 height:55px; 14 background-color: #aaa; 15 font-size:12px; 16 } 17 div.hide { 18 display:none; 19 }
JS代码：
1 //定义一个页面加载事件 2 $(function(){ 3 //为按钮1设置点击事件 4 $("#btn1").click(function(){ 5 //注意方法 6 $("#one").css("backgroundColor","pink"); 7 }) 8 $("#btn2").click(function(){ 9 //注意方法 10 $(".mini").css("backgroundColor","pink"); 11 }) 12 $("#btn3").click(function(){ 13 //注意方法 14 $("div").css("backgroundColor","pink"); 15 }) 16 $("#btn4").click(function(){ 17 //注意方法,注意参数,所有指的是包含body内部所有的元素 18 $("*").css("backgroundColor","pink"); 19 }) 20 $("#btn5").click(function(){ 21 //注意参数,当多个筛选条件的时候用','分割选择条件 22 $("#two,.mini").css("backgroundColor","pink"); 23 }) 24 })