層次選擇器

時間 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;
   }
  </style>
  <!--引入jquery的js庫-->
  <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
    
 </head>
  
 <body>
   <input type="button" value="改變 <body> 內全部 <div> 的背景色爲 #0000FF"  id="b1"/>
   <input type="button" value="改變 <body> 內子 <div> 的背景色爲 #FF0033"    id="b2"/>
   <input type="button" value=" 改變 id 爲 one 的下一個 <div> 的背景色爲 #0000FF"  id="b3"/>
   <input type="button" value=" 改變 id 爲 two 的元素後面的全部兄弟<div>的元素的背景色爲 # #0000FF"  id="b4"/>
   <input type="button" value=" 改變 id 爲 two 的元素全部 <div> 兄弟元素的背景色爲 #0000FF"  id="b5"/>
   
      <div id="one"  class="mini">
       div id爲one  
   </div>
   <div id="two">
     div id爲two
    <div id="two01">
     id twoo1
    </div>
    <div id="two02">
     id twoo2
    </div>
   </div>
   
   <div id="three"  class="mini">
       div id爲three  
    <div id="three01">
     id three01
    </div>
   </div>
   
   
   
   <span id="s_one"  class="mini">
    span  one
   </span>
    
   <span id="s_two">
    span two
   </span>  
 </body>
     
 <script language="JavaScript">
 $(document).ready(
  function(){
  
   //*******改變 <body> 內全部 <div> 的背景色爲 #0000FF
 $("#b1").click(
 function(){
  $("div").css("background","#0000FF");
  }
 )
  
   //*******改變 <body> 內子 <div> 的背景色爲 #FF0033
  $("#b2").click(
  function(){
   $("body>div").css("background","#FF0033")
   }
  )
   
   //改變 id 爲 one 的下一個 <div> 的背景色爲 #0000FF(選擇一個)
   $("#b3").click(
   function(){
  $("#one + div").css("background","#0000FF")
    }
   )
 
   
   //*******改變 id 爲 two 的元素後面的全部兄弟<div>的元素的背景色爲 # #0000FF
   $("#b4").click(
   function(){
  $("#one ~ div").css("background","#0000FF")
    }
   )
 
   //****改變 id 爲 two 的元素全部 <div> 兄弟元素的背景色爲 #0000FF
   $("#b5").click(
 function(){
  window.alert("1");
  $("#two").siblings("div").css("background","#0000FF")
  }
   )
     }
 )
    </script>
   
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。