jquery_01_1
1.层次选择器
<style type="text/css"> div,span{ width: 200px; height: 200px; border: 1px solid green; float: left; margin: 5px; } div.two{ height: 70px; width: 80px; } </style><script type="text/javascript" src="./libs/jquery-1.12.4.min.js"></script><script type="text/javascript"> //层次选择器 $(document).ready( function(){ //$("body div").css("background","green");//后代选择器 //$("body>.two").css("background","green");//子元素选择器 //$("#two+div").css("background","green");//兄弟相连（下一个）选择器 $("#two~div").css("background","green");//所有后面的兄弟都被选中 } ); </script></head><body> <div id="one" class="one"> <div class="two">class为two的div</div> </div> <div id="two" class="one"> <div class="two">class 为two的div</div> <div class="two" title="one">class 为two的div</div> <div class="two" title="two">class 为two的div</div> </div> <div class="one"> <div class="two">class 为two的div</div> <div class="two" >class 为two的div</div> <div class="two">class 为two的div</div> </div> <div class="one"> <div class="two">class 为two的div</div> <div class="two" >class 为two的div</div> <div class="two">class 为two的div</div> </div> <span class="sp">我是span的内容</span> <span class="sp">我是span的内容</span></body> 2.基本过滤选择器
<style type="text/css"> div,span{ width: 200px; height: 200px; border: 1px solid green; float: left; margin: 5px; } div.two{ height: 70px; width: 80px; } </style><script type="text/javascript" src="./libs/jquery-1.12.4.min.js"></script><script type="text/javascript"> //基本选择器 $(document).ready( function(){ //动画的函数 function animateIt(){ $(".move").slideToggle("slow",animateIt); } animateIt(); // $(".one:first").css("background","green"); //$(".one:last").css("background","green"); //选择的是除去id的two的div //$("div:not(#two)").css("background","green"); //类名为two并且是偶数的 /* $(".two:even").css("background","green"); $(".two:odd").css("background","red"); */ //$(".two:eq(3)").css("background","red"); /* $(".two:gt(3)").css("background","red"); $(".two:lt(3)").css("background","green"); $(":header").css("color","green"); */ //动画的选择器 $(":animated:eq(2)").css("background","red"); } );</script></head><body> <div id="one" class="one"> <div class="two">class为two的div</div> </div> <div id="two" class="one"> <div class="two">class 为two的div</div> <div class="two" title="one">class 为two的div</div> <div class="two" title="two">class 为two的div</div> </div> <div class="one"> <div class="two">class 为two的div</div> <div class="two" >class 为two的div</div> <div class="two">class 为two的div</div> </div> <div class="one"> <div class="two">class 为two的div</div> <div class="two" >class 为two的div</div> <div class="two">class 为two的div</div> </div> <span class="sp">我是span的内容</span> <span class="sp">我是span的内容</span> <div class ="move">我是会动的div</div> <div class ="move">我是会动的div</div> <div class ="move">我是会动的div</div> <div class ="move">我是会动的div</div> <h6>标题6</h6> <h5>标题5</h5> <h4>标题4</h4></body> 3.文本过滤
<style type="text/css"> div,span{ width: 200px; height: 200px; border: 1px solid green; float: left; margin: 5px; } div.two{ height: 70px; width: 80px; } div.hidden{ display: none; }</style><script type="text/javascript" src="./libs/jquery-1.12.4.min.js"></script><script type="text/javascript"> //文本选择器 $(document).ready( function(){ //动画的函数 function animateIt(){ $(".move").slideToggle("slow",animateIt); } animateIt(); //动画的选择器// $(":animated:eq(2)").css("background","red"); //$("div:contains('动画')").css("color","green");//$("div:empty").css("background","red"); ////$("div:has(.two)").css("background","green"); //选取含有子元素或者文本内容的元素//$("div:parent").css("background","green");/* $(":hidden").html("我是被修改后隐藏的内容！"); */ } );</script> 4.属性选择器
<style type="text/css"> div,span{ width: 200px; height: 200px; border: 1px solid green; float: left; margin: 5px; } div.two{ height: 70px; width: 80px; } div.hidden{ display: none; }</style><script type="text/javascript" src="./libs/jquery-1.12.4.min.js"></script><script type="text/javascript"> //属性选择器 $(document).ready( function(){ //动画的函数 function animateIt(){ $(".move").slideToggle("slow",animateIt); } animateIt(); //div中具有title属性的元素 // $("div[title]").css("background","red"); //指定属性值为value的元素 // $("div[title=test]").css("background","red"); //指定属性值不为value的元素 //$("div[title!=test]").css("background","red"); //指定属性值以t为开头的元素 //$("div[title^='t']").css("background","red"); //指定属性值以t为结尾的元素 //$("div[title$='o']").css("background","red"); //指定属性值包含o的元素 //$("div[title*='o']").css("background","red"); //具有id属性同时具有title属性并且属性值包含o的元素 // $("[id][title*='o']").css("background","red"); //子元素过滤 //选取每个父元素里面类名为two的第二个元素// $(".two:nth-child(2)").css("background","blue"); //选取每个父元素里面类名为two的第一个元素// $(".two:first-child").css("color","red"); //选取每个父元素里面类名为two的最后一个元素 //$(".two:last-child").css("color","red"); //选取每个父元素里面类名为two的唯一一个元素 $(".two:only-child").css("color","red"); } );</script></head><body> <div id="one" class="one" title="hello"> <div class="two">class为two的div</div> </div> <div id="two" class="one"> <div class="two">class 为two的div</div> <div class="two" title="one">class 为two的div</div> <div class="two" title="two">class 为two的div</div> </div> <div class="one"> <div class="two">class 为two的div</div> <div class="two" >class 为two的div</div> <div class="two">class 为two的div</div> </div> <div class="one"> <div class="two">class 为two的div</div> <div class="two" title="test">class 为two的div,title为test</div> <div class="two" title="test">class 为two的div，title为test</div> </div> <div></div> <div class="none" style="display: none">我是一个隐藏的div</div> <div class="hidden">我是另外一个隐藏的div</div> <span class="sp" title="sp">我是span的内容</span> <span class="sp">我是span的内容</span> <div class ="move">我是动画的div</div> <h6>标题6</h6> <h5>标题5</h5> <h4>标题4</h4></body> 5.表单属性过滤
<title>表单属性验证</title><script type="text/javascript" src="./libs/jquery-1.12.4.min.js"></script><script type="text/javascript"> $(document).ready( function(){ //普通输入文本框 /* $("text:enabled").val("这是能用输入框的内容值"); $("text:disabled").val("这是不能用输入框的内容值"); */ $("#in2").css("background","red"); /* $("#in1").click( function(){ $(":checked").attr("checked",false); } ); */ } ); </script> </head><body> <form action="#" method="post"> 这是不能用的输入框：<input type="text" disabled="disabled" value=""/> 这是能用的输入框：<input type="text" value=""/> <br> 兴趣：<input type="checkbox" value="1"/>篮球 <input type="checkbox" value="2" checked="checked" id="in2"/>足球 <input type="checkbox" value="3" />羽毛流 <input type="checkbox" value="4"/>橄榄球 </form> <input type="button" value="反选" id="in1"/> </body> 
