Jquery父子选择器基础用法

来源：互联网发布：php木马扫描器编辑：程序博客网时间：2024/06/03 00:26

Jquery父子选择器基础用法

         <input type="button" value="div父元素下的第2个子元素红色"  id="b1"/><br>         <input type="button" value="div父元素下的第一个子元素紫色"    id="b2"/><br>         <input type="button" value="div父元素下的最后一个子元素黄色"  id="b3"/><br>         <input type="button" value="div父元素下的仅仅只有一个子元素，那么选中这个子元素橙色"  id="b4"/><br>         <input type="button" value="div父元素下奇数红色偶数黄色"  id="b5"/><br>         <input type="button" value="div父元素下2n+1绿色"  id="b4"/><br><br><br>           <div>  <div id="one" class="mini" >XXXXXXXXX  one</div>             <div id="two" class="mini" >XXXXXXXXX  two </div>    <div id="three" class="mini" >XXXXXXXXX  three</div> <div id="four"  class="mini" >XXXXXXXXX  four</div></div>  <div>    <div id="one" class="mini" >XXXXXXXXX  one</div></div>

Javascript操作代码：

   $("#b1").click(function(){      $("div:nth-child(2)").css("background","red");   });    $("#b2").click(function(){      $("div:first-child").css("background","purple");   });     $("#b3").click(function(){      $("div:last-child").css("background","yellow");   });    $("#b4").click(function(){      $("div:only-child").css("background","orange");   });   $("#b5").click(function(){     $("div:nth-child(even)").css("background","yellow");     $("div:nth-child(odd)").css("background","red");   });    $("#b6").click(function(){      $("div:nth-child(2n+1)").css("background","green");   });

效果：
这里写图片描述

0 0