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>
选择器总结:
基本选择器★
$("#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 });
低版本可以使用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元素移除