Jquery父子選擇器入門案例

Jquery父子選擇器入門案例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
    <link type="text/css" rel="stylesheet" href="js/child.css"/>
    </head> 
<body>
         <input type="button" value="p父元素下的第2個子元素紅色"  id="b1"/><br>
         <input type="button" value="p父元素下的第一個子元素紫色"    id="b2"/><br>
         <input type="button" value="p父元素下的最後一個子元素黃色"  id="b3"/><br>
         <input type="button" value="p父元素下的僅僅隻有一個子元素,那麼選中這個子元素橙色"  id="b4"/><br>
         <input type="button" value="p父元素下奇數紅色偶數黃色"  id="b5"/><br>
         <input type="button" value="p父元素下2n+1綠色"  id="b4"/><br>
<br><br>           
<p> 
 <p id="one" class="mini" >XXXXXXXXX  one</p>            
 <p id="two" class="mini" >XXXXXXXXX  two </p>   
 <p id="three" class="mini" >XXXXXXXXX  three</p>
 <p id="four"  class="mini" >XXXXXXXXX  four</p>
</p>  
 
<p> 
   <p id="one" class="mini" >XXXXXXXXX  one</p>
</p>       
    </body>
   <script type="text/javascript">
   $("#b1").click(function(){
      $("p:nth-child(2)").css("background","red");
   });
 
    $("#b2").click(function(){
      $("p:first-child").css("background","purple");
   });
 
     $("#b3").click(function(){
      $("p:last-child").css("background","yellow");
   });
 
    $("#b4").click(function(){
      $("p:only-child").css("background","orange");
   });
 
   $("#b5").click(function(){
     $("p:nth-child(even)").css("background","yellow");
     $("p:nth-child(odd)").css("background","red");
   });
 
    $("#b6").click(function(){
      $("p:nth-child(2n+1)").css("background","green");
   });
   </script>
</html>

這裡寫圖片描述

發佈留言