子選擇器

時間 2019-11-26

標籤選擇器简体版

原文原文鏈接

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <style type="text/css">
    div,span{
       width: 140px;
       height: 140px;
       margin: 20px;
       background: #9999CC;
       border: #000 1px solid;
    float:left;
       font-size: 17px;
       font-family:Roman;
   }
   
   div.mini{
       width: 30px;
       height: 30px;
       background: #CC66FF;
       border: #000 1px solid;
       font-size: 12px;
       font-family:Roman;
   }
   
   div.visible{
    display:none;
   }
  </style>
  <!--引入jquery的js庫-->
  <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
    
 </head>
  
 <body>
  <h1>XXXX</h1>
  <h2>XXXXXXX</h2>
  <h3>XXXXXXXXX</h3>
  
   <input type="button" value="每一個class爲one的div父元素下的第2個子元素"  id="b1"/>
   <input type="button" value="每一個class爲one的div父元素下的第一個子元素"    id="b2"/>
   <input type="button" value="每一個class爲one的div父元素下的最後一個子元素"  id="b3"/>
   <input type="button" value="若是class爲one的div父元素下的僅僅只有一個子元素，那麼選中這個子元素"  id="b4"/>
   
      
<div class="one"> 
   <div id="one"  class="one" >
      XXXXXXXXX  one
   </div>
     
   <div id="two"  class="one" >
      XXXXXXXXX  two
   </div>
     
   <div id="three"  class="one" >
      XXXXXXXXX  three
   </div>
   
    <div id="four"  class="one" >
      XXXXXXXXX  four
   </div>
</div> 
<div class="one"> 
   <div id="one"  class="one" >
      XXXXXXXXX  one
   </div>
</div>   
 </body>
     
 <script language="JavaScript">
  //****每一個class爲one的div父元素下的第2個子元素
 $("#b1").click(function(){
  $("div .one:nth-child(2)").css("background","red")
 })
  //*****每一個class爲one的div父元素下的第一個子元素
  $("#b2").click(function(){
  $("div .one:first-child").css("background","red")
 })
  
  //*****每一個class爲one的div父元素下的最後一個子元素
   $("#b3").click(function(){
  $("div .one:last-child").css("background","red")
 })
  //**若是class爲one的div父元素下的僅僅只有一個子元素，那麼選中這個子元素
  $("#b4").click(function(){
  $("div .one:only-child").css("background","red")
 })
   </script>
   
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。