jQuery 

 1     <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
 2         <script>
 3             $(function(){
 4                 $("#btn1").click(function(){
 5                     $("#one").css("background","#bbffaa");`
 6                 });
 7                 
 8                 $("#btn2").click(function(){
 9                     $(".mini").css("backgroundColor","#bbffaa");
10                 });
11                 
12                 $("#btn3").click(function(){
13                     $("div").css("backgroundColor","#bbffaa");
14                 });
15                 
16                 $("#btn4").click(function(){
17                     $("*").css("backgroundColor","#bbffaa");
18                 });
19                 
20                 $("#btn5").click(function(){
21                     $("#two,.mini").css("backgroundColor","#bbffaa");
22                 });
23             });
24         </script>
25     </head>
26     <body>
27         <input type="button" id="btn1" value="选择为one的元素"/>
28         <input type="button" id="btn2" value="选择样式为mini的元素"/>
29         <input type="button" id="btn3" value="选择所有的div元素"/>
30         <input type="button" id="btn4" value="选择所有元素"/>
31         <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
32         <hr/>
33         <div id="one">
34             <div class="mini">
35                 111
36             </div>
37         </div>
38         
39         <div id="two">
40             <div class="mini">
41                 222
42             </div>
43             <div class="mini">
44                 333
45             </div>
46         </div>
47         
48         <div id="three">
49             <div class="mini">
50                 444
51             </div>
52             <div class="mini">
53                 555
54             </div>
55             <div class="mini">
56                 666
57             </div>
58         </div>
59         
60         <span id="four">
61             
62         </span>
63     </body>
View Code

 

选择器总结:
基本选择器★
$("#id值") $(".class值") $("标签名")

了解:$("*")
理解:获取多个选择器 用逗号隔开
$("#id值,.class值")
层次选择器 ★
a b:a的所有b后代
a>b:a的所有b孩子
a+b:a的下一个兄弟(大弟弟)
a~b:a的所有弟弟
基本过滤选择器:★
:frist 第一个
:last 最后一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >
:lt(index) <

全选框图

 1     $(function(){
 2                 // 步骤一：为上面的复选框绑定单击事件:
 3                 $("#selectAll").click(function(){
 4 
 5                     /*if(this.checked == true){
 6                         // 如果上面的复选框被选中：
 7                         $("input[name='ids']").attr("checked",true);
 8                     }else{
 9                         // 上面的复选框没有被选中
10                         $("input[name='ids']").attr("checked",false);
11                     }*/
12                     // $("input[name='ids']").attr("checked",this.checked);
13                     $("input[name='ids']").prop("checked",this.checked);// this JS的对象  
14                 });
15             });
View Code

低版本可以使用attr方法设置属性的值.高版本中建议使用prop的方法设置属性的值.

 

【JQuery的文档操作】

$(“a”).append(“b”); // 将b添加到a元素中.

$(“a”).appendTo(“b”); // 将a添加到b元素中.

 

$(“a”).insertBefore(“b”); // 将a元素插入到b元素之前

$(“a”).insertAfter(“b”); // 将a元素插入到b元素之后

 

$(“a”).remove();    // 将a元素移除

 

 

posted on 2020-03-31 21:02  十九画橙汁  阅读(157)  评论(0)  编辑  收藏  举报

导航