jQ学习之基础选择器的测试

Posted 2022-04-12 zhang188660586

一：基础选择器参数主要包含了：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                 )