jquery选择器的练习
<style> img,#one span{ width: 150px; height: 150px; border-radius: 75px; float: left; margin: 20px 10px; } #one{ height: 190px; background: #CCFFFF; } #one span{ background: #FFCCCC; display: inline-block; font-size: 40px; line-height: 150px; text-align: center; } #two{ clear: left; height: 30px; line-height: 30px; background: #FFCCCC; } .hide{ font-size: 14px; display:none; } </style> <body> <div class="baseBtn"> <h2>基本选择器</h2> <button class="baseOne">取id为one的元素</button> <button class="baseMini">取class为mini的元素</button> <button class="baseDiv">取所有的div元素</button> <button class="baseSt">取所有span和id为two的元素</button> <h2>层次选择器</h2> <button class="levelSt">取div中的所有span元素</button> <button class="levelSpan">取div下元素名为span的子元素</button> <button class="levelOne">取id为one的下一个div元素</button> <button class="levelDiv">取id为one后面的所有div兄弟元素</button> <button class="levelSib">取id为two所有的同辈div元素</button> <h2>过滤选择器</h2> <button class="filterFirst">取第一个span元素</button> <button class="filterLast">取最后一个span元素</button> <button class="filterMini">取class不是mini的img元素</button> <button class="filterEven">取索引是奇数的span元素</button> <button class="filterOdd">取索引是偶数的span元素</button> <button class="filteEq">取索引值等于1的span元素</button> <button class="filteGt">取索引值大于1的span元素</button> <button class="filteLt">取索引值小于1的span元素</button> <button class="filteTitle">取网页中所有的h1h2等标题元素</button> <button class="filteAnimate">取网页中正在执行动画的元素</button> <h2>内容过滤选择器</h2> <button class="filteContains">选取含有文本like的div元素</button> <button class="filteEmpty">选取没有子元素的空的div元素</button> <button class="filteImg">选取含有img的div元素</button> <button class="filteParent">选取含有子元素的div元素</button> <h2>可见性过滤选择器</h2> <button class="filteHiden">选取所有不可见元素</button> <button class="filteVisible">选取所有可见元素</button> <h2>属性过滤选择器</h2> <button class="filteTit">选取含有属性title的img元素</button> <button class="filteTest">选取含有属性title值为test的img元素</button> <button class="filteImg">选取含有属性title值不为test的img元素</button> <button class="filteTe">选取含有属性title值以te开头的img元素</button> <button class="filteSt">选取含有属性title值以st结束的img元素</button> <button class="filteEs">选取含有属性title值含有的img元素</button> <button class="filteEsMinitwo">选取含有属性id并且title中含有es的img元素</button> </div> <div class="allBox"> <div id="one"> <img class="mini" src="images/niuniu.jpg" alt="我的脸萌" title="脸萌做的"/> <span>?</span> <span>?</span> <span>?</span> <img class="miniTwo hide" id="miniTwo" src="images/haozi.jpg" alt="逗比的脸萌" title="test"> </div> <div id="two">I dont't have a type,if i like you ,i like you</div> <div id="three"></div> <div class="hide">Keep learning every day</div> </div> </body> $(function(){ // 基本选择器 //改变id为one的元素 $(".baseOne").on("click",function(){ $("#one").css("background","#6699CC"); }); //改变class为mini的元素 $(".baseMini").on("click",function(){ $(".mini").attr({src:"images/haozi.jpg",alt:"逗比的脸萌"}); }); //改变所有的div元素 $(".baseDiv").on("click",function(){ $("div").css("background","#9999CC"); }); //改变所有span和id为two的元素 $(".baseSt").on("click",function(){ $("div").css("fontWeight","bold"); }); // 层次选择器 // 改变div中的所有span元素 $(".levelSt").on("click",function(){ $("div span").css("color","red"); }); //改变div下元素名为span的子元素 $(".levelSpan").on("click",function(){ $("div > span").css({"color":"red","fontWeight":"bold"}); }); //改变id为one的下一个div元素.$("#one + div")等同于$("#one").next("div") $(".levelOne").on("click",function(){ $("#one + div").css({"color":"red","fontWeight":"bold","background":"#99CC99"}); }); //改变id为one后面的所有div兄弟元素.$("#one ~ div")等同于$("#one").nextAll("div") $(".levelDiv").on("click",function(){ $("#one ~ div").css({"color":"red","display":"block","background":"#99CC99"}); }); //改变id为two所有的同辈div元素 $(".levelSib").on("click",function(){ $("#two").siblings("div").css({"color":"green","display":"block"}); }); //过滤选择器 //改变第一个span元素 $(".filterFirst").on("click",function(){ $("span:first").css("color","red"); }); //改变最后一个span元素 $(".filterLast").on("click",function(){ $("span:last").css("color","red"); }); //改变class不是mini的img元素 $(".filterMini").on("click",function(){ $("img:not(mini)").show(); }); //改变索引是奇数的span元素 $(".filterEven").on("click",function(){ $("span:even").css("color","green"); }); //改变索引是偶数的span元素 $(".filterOdd").on("click",function(){ $("span:odd").css("color","red"); }); //改变索引值等于1的span元素 $(".filteEq").on("click",function(){ $("span:eq(1)").css({"color":"green","fontWeight":"bold"}); }); //改变索引值大于1的span元素 $(".filteGt").on("click",function(){ $("span:gt(1)").css({"color":"green","fontWeight":"bold"}); }); //改变索引值小于1的span元素 $(".filteLt").on("click",function(){ $("span:lt(1)").css({"color":"green","fontWeight":"bold"}); }); //改变网页中所有的h1h2等标题元素 $(".filteTitle").on("click",function(){ $(":header").css({"color":"green","fontWeight":"bold"}); }); //取网页中正在执行动画的元素 $(".filteAnimate").on("click",function(){ $(":animate").css({"width":"200px","height":"50px"}); }); //内容过滤选择器 //选取含有文本like的div元素 $(".filteContains").on("click",function(){ $("div:contains('like')").css({"color":"red","fontStyle":"italic"}); }); //选取没有子元素的空的div元素 $(".filteEmpty").on("click",function(){ $("div:empty").css({"width":"100%","height":"40px","background":"green"}); }); //选取含有img的div元素 $(".filteImg").on("click",function(){ $("div:has(img)").css("background","green"); }); //选取含有子元素的div元素 $(".filteParent").on("click",function(){ $("div:parent").css("background","#FF6666"); }); //选取所有不可见元素 $(".filteHiden").on("click",function(){ $(":hidden").show().css("background","#FF6666"); }); //选取所有可见元素 $(".filteVisible").on("click",function(){ $(":visible").css("background","#FF6666"); }); //属性过滤选择器 //选取含有属性title的img元素 $(".filteTit").on("click",function(){ $("img[title]").attr({src:"images/haozi.jpg",alt:"逗比的脸萌"}); }); //选取含有属性title值为test的img元素 $(".filteTest").on("click",function(){ $("img[title=test]").show(); }); //选取含有属性title值不为test的img元素 $(".filteImg").on("click",function(){ $("img[title!=test]").hide(); }); //选取含有属性title值以te开头的img元素 $(".filteTe").on("click",function(){ $("img[title^=te]").show(); }); //选取含有属性title值以st结束的img元素 $(".filteSt").on("click",function(){ $("img[title$=st]").show(); }); //选取含有属性title值含有es的img元素 $(".filteEs").on("click",function(){ $("img[title*=es]").show(); }); //选取含有属性id并且title中含有es的img元素 $(".filteEsMinitwo").on("click",function(){ $("img[id][title*=es]").show(); }); });
表单选择器
<h2>表单对象属性选择器</h2> <form id="form1" action="#"> <button type="reset">重置所有表单元素</button> <br /><br /> <button id="btn1">对表单内 可用input 赋值操作.</button> <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br /> 可用元素:<input name="add" value="可用文本框"/> <br/> 不可用元素:<input name="email" disabled="disabled" value="不可用文本框"/><br/> 可用元素: <input name="che" value="可用文本框" /><br/> 不可用元素:<input name="name" disabled="disabled" value="不可用文本框"/><br/> <br/> 多选框:<br/> <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1 <input type="checkbox" name="newsletter" value="test2" />test2 <input type="checkbox" name="newsletter" value="test3" />test3 <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4 <input type="checkbox" name="newsletter" value="test5" />test5 <input type="text" class="getChecked"/> <div></div> <br/><br/> 下拉列表1:<br/> <select name="test" multiple="multiple" style="height:100px"> <option>浙江</option> <option selected="selected">湖南</option> <option>北京</option> <option selected="selected">天津</option> <option>广州</option> <option>湖北</option> </select> <br/><br/> 下拉列表2:<br/> <select name="test2" > <option>浙江</option> <option>湖南</option> <option selected="selected">北京</option> <option>天津</option> <option>广州</option> <option>湖北</option> </select> <br/><br/> <div></div> </form> <h2>表单选择器</h2> <form id="form2" action="#"> <input type="button" value="Button"/><br/> <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/> <input type="file" /><br/> <input type="hidden" /><div style="display:none">test</div><br/> <input type="image" /><br/> <input type="password" /><br/> <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/> <input type="reset" /><br/> <input type="submit" value="提交"/><br/> <input type="text" /><br/> <select><option>Option</option></select><br/> <textarea rows="5" cols="20"></textarea><br/> <button>Button</button><br/> <div></div> </form> $(function(){ //表单对象属性选择器 //表单重置 $(":reset").click(function(){ setTimeout(function(){ countChecked(); $("select").change(); },0); }); //改变可用文本框的值 $("#form1 input:enabled").val("这里变化了!"); //改变不可用文本框的值 $("#form1 input:disabled").val("这里变化了!"); //使用:checked选择器来操作多选框 $(":checked").click(countChecked); function countChecked(){ var len = $("input:checked").length $("#form1 div:first").html("<strong>有"+len+" 个被选中!</strong>"); } countChecked();//进入页面就调用. //使用:selected选择器,来操作下拉列表. $("select").change(function(){ var str = ""; $("select :selected").each(function(){ str += $(this).text() + ","; }); $("#form1 div").eq(1).html("<strong>你选中了:"+str+"</strong>"); }).trigger("change"); // trigger("change") 在这里的意思是: // select加载后,马上执行onchange. // 也可以用.change()代替. //表单选择器 var $allInput = $("#form2 :input");//注意:input和input的区别 var $allInputs = $("#form2 input"); var $allTest = $("#form2 :text"); var $allPsd = $("#form2 :password"); var $allRadio = $("#form2 :radio"); var $allCheckbox = $("#form2 :checkbox"); var $allSubmit = $("#form2 :submit"); var $allImg = $("#form2 :image"); var $allReset = $("#form2 :reset"); var $allBut = $("#form2 :button");// <input type=button /> 和 <button ></button>都可以匹配 var $allFile = $("#form2 :file"); var $allHidden = $("#form2 :hidden");// <input type="hidden" />和<div style="display:none">test</div>都可以匹配. var $allSelect = $("#form2 select"); var $allTextarea = $("#form2 textarea"); $("#form2 div").append("有"+ $allInput.length +"个表单元素<br/>"); $("#form2 div").append("有"+ $allTest.length +"个单行文本框<br/>"); $("#form2 div").append("有"+ $allPsd.length +"个密码框<br/>"); $("form").submit(function () { return false; }); // return false;不能提交. })