jQuery选择器案例

来源：互联网发布：网络销售授权书模板编辑：程序博客网时间：2024/06/09 22:49
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type="text/css">   div{    width:200px;    height: 200px;    border:1px solid red;    margin: 2px;   }   .mini{    width: 30px;    height: 30px;    background: green;   } </style>  </head><body><input type="button" value="id选择器" id="btn1" /> <input type="button" value="类选择器" id="btn2" /> <input type="button" value="元素选择器" id="btn3" /> <input type="button" value="组合选择器" id="btn4" /> <input type="button" value="通配符选择器" id="btn5" /> <input type="button" value="父子选择器" id="btn6" /> <input type="button" value="祖先后代选择器" id="btn7" /> <input type="button" value="下一个兄弟选择器" id="btn8" /> <input type="button" value="后面所有兄弟选择器" id="btn9" /> <input type="button" value="第一个"   id="btn10" /> <input type="button" value="最后一个" id="btn11" /> <input type="button" value="偶数"     id="btn12" /> <input type="button" value="奇数"     id="btn13" /> <input type="button" value="相等" id="btn14" /> <input type="button" value="大于" id="btn15" /> <input type="button" value="小于" id="btn16" /> <input type="button" value="不为" id="btn17" /> <input type="button" value="h1~h6" id="btn18" /> <input type="button" value="动画" id="btn19" /> <input type="button" value="隐藏" id="btn20" /> <input type="button" value="可见" id="btn21" /> <input type="button" value="第一个子元素" id="btn22" /> <input type="button" value="最后一个子元素" id="btn23" /> <input type="button" value="第n个子元素" id="btn24" /> <input type="button" value="仅有一个子元素" id="btn25" /> <input type="button" value="包含指定属性" id="btn26" /> <input type="button" value="属性值等于" id="btn27" /> <input type="button" value="属性值不于" id="btn28" /> <input type="button" value="属性值以t开头" id="btn29" /> <input type="button" value="属性值以t结尾" id="btn30" /> <input type="button" value="属性值以包含t" id="btn31" /> <input type="button" value="包含多个属性" id="btn32" /> <input type="button" value="包含指定文本" id="btn33" /> <input type="button" value="没有子元素" id="btn34" /> <input type="button" value="有子元素" id="btn35" /> <input type="button" value="包含指定的值" id="btn36" /> <br /><br /><!--操作区域--><div id="one" title="test">     <div class="mini" id="two">       第二个div元素     </div>     <div class="mini">       第三个div元素     </div>          <div class="mini" title="test"></div>       第一个div元素</div><div id="three">    <div class="mini">###</div>    <div class="mini"></div>    <div class="mini" title="test"></div>        </div><div class="one">     <div class="mini"></div></div><div class="one" title="test" style="display:none">    这是最后一个div元素</div><h1>第一个h1元素</h1><hr/>你喜欢吃的水果 <ul id="menu">   <li>苹果</li>   <li>梨</li>   <li class="dd">榴莲</li>   <li>山竹</li>   <li>东瓜</li></ul><form action="#" method="post">     用户名<input type="text" value="" name="uname" />     <input type="hidden" value="817812712_9a@Q##!@____" name="acl" /></form><script type="text/javascript" src="jquery-1.11.3.min.js"></script><script type="text/javascript">  //测试jquery加载是否成功  //通过点击按钮，改变指定div元素背景颜色，  //使用对应选择器获取div元素  //id选择器  $("#btn1").click(function(){     $("#two").css("background-color","red");     //DOM针对错误处理方式     //var two = document.getElementById("two1");     //console.log(two.value);     //jquery如何找错     //console.log($("#two").length);  });  //类选择器  $("#btn2").click(function(){    $(".mini").css("background-color","red");  });    //元素选择器  $("#btn3").click(function(){    $("div").css("background-color","red");  });    //组合选择器  $("#btn4").click(function(){    $("div,h1").css("background-color","red");  });    //通配符选择器  $("#btn5").click(function(){    $("*").css("background-color","red");  });    //层级选择器  //父子  $("#btn6").click(function(){    console.log($("body>div").length);    $("body>div").css("background-color","blue");  });   //祖先后代  $("#btn7").click(function(){    console.log($("body div").length);    $("body div").css("background-color","blue");  });   //下一个兄弟元素  $("#btn8").click(function(){    $("#three+div").css("background-color","blue")  });  $("#btn9").click(function(){    $("#three~div").css("background-color","blue")  });   //过滤选择器  //第一个  $("#btn10").click(function(){    $("#menu>li:first").css("background-color","blue");  });   //第最后一个  $("#btn11").click(function(){    $("#menu>li:last").css("background-color","blue");  });   //偶数   $("#btn12").click(function(){    $("#menu>li:even").css("background-color","blue");  });   //奇数  $("#btn13").click(function(){    $("#menu>li:odd").css("background-color","blue");  });   //相等  $("#btn14").click(function(){    $("#menu>li:eq(0)").css("background-color","blue");  });   //大于   $("#btn15").click(function(){    $("#menu>li:gt(2)").css("background-color","blue");  });   //小于  $("#btn16").click(function(){    $("#menu>li:lt(1)").css("background-color","blue");  });  //不为   $("#btn17").click(function(){    $("#menu>li:not(.dd)").css("background-color","blue");  });  //h1---h6  $("#btn18").click(function(){    $(":header").css("background-color","blue");  });  $("#btn19").click(function(){    $(":animated").css("background-color","blue");  });   //执行jquery小动画,隐藏   //$("#one").hide(15000);   //隐藏  $("#btn20").click(function(){    console.log($("div:hidden").length);//1  });  //可见  $("#btn21").click(function(){    console.log($("div:visible").length);  });  //子元素过滤器  $("#btn22").click(function(){      $("#one :first-child").css("background-color","blue");   });  $("#btn23").click(function(){    $("#one :last-child").css("background-color","blue");  });  $("#btn24").click(function(){     $("#one :nth-child(2)").css("background-color","blue");  });  $("#btn25").click(function(){      $("div :only-child").css("background-color","blue");  });  //属性过滤选择器 包含div 包含title  $("#btn26").click(function(){      $("div[title]").css("background-color","blue");  });  //属性过滤选择器 属性值等于test  $("#btn27").click(function(){     $("div[title=test]").css("background-color","blue");  });  //属性过滤选择器 属性值不等于test  $("#btn28").click(function(){     $("div[title!=test]").css("background-color","blue");  });  //属性过滤选择器 属性值以t开头  $("#btn29").click(function(){      $("div[title^=t]").css("background-color","blue");  });  //属性过滤选择器  $("#btn30").click(function(){      $("div[title$=t]").css("background-color","blue");  });  //属性过滤选择器  $("#btn31").click(function(){      $("div[title*=t]").css("background-color","blue");  });  //属性过滤选择器 title=test同时要求有id属性  $("#btn32").click(function(){      $("div[title=test][id]").css("background-color","blue");  });   //内容过滤选择器   div d字母   $("#btn33").click(function(){     $("div:contains(d)").css("background-color","blue");   });   // 没有子元素 没有文本   $("#btn34").click(function(){     $("div:empty").css("background-color","blue");   });   //有子元素，有文本   $("#btn35").click(function(){     $("div:parent").css("background-color","blue");   });   //匹配父元素   $("#btn36").click(function(){    $("div:has(.mini)").css("background-color","blue");   });</script> </body></html>
0 0