基礎過濾選擇器

時間 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>
  <h1>XXXX</h1>
  <h2>XXXXXXX</h2>
  <h3>XXXXXXXXX</h3>
  
   <input type="button" value="改變第一個 div 元素的背景色爲 #0000FF"  id="b1"/>
   <input type="button" value="改變最後一個 div 元素的背景色爲 #0000FF"    id="b2"/>
   <input type="button" value=" 改變class不爲 one 的全部 div 元素的背景色爲 #0000FF"  id="b3"/>
   <input type="button" value=" 改變索引值爲偶數的 div 元素的背景色爲 #0000FF"  id="b4"/>
    <input type="button" value=" 改變索引值爲奇數的 div 元素的背景色爲 #0000FF"  id="b5"/>
   <input type="button" value=" 改變索引值爲大於 3 的 div 元素的背景色爲 #0000FF"  id="b6"/>
   <input type="button" value=" 改變索引值爲等於 3 的 div 元素的背景色爲 #0000FF"  id="b7"/>
   <input type="button" value=" 改變索引值爲小於 3 的 div 元素的背景色爲 #0000FF"  id="b8"/>
      <input type="button" value=" 改變全部的標題元素的背景色爲 #0000FF"  id="b9"/>
      <input type="button" value=" 改變當前正在執行動畫的全部元素的背景色爲 #0000FFF"  id="b10"/>
   
      <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="one" >
       div id爲three   class one
    <div id="three01">
     id three01
    </div>
   </div>
   
    <div id="mover">
       執行動畫
   </div>
  
   
   <span id="s_one"  class="mini">
    span  one
   </span>
    
   <span id="s_two">
    span two
   </span>  
 </body>
     
 <script language="JavaScript">
 //函數
  function ca(){
   $("#mover").slideToggle("slow",ca);
  }
  
  //調用
  ca();
  
 //*****改變第一個 div 元素的背景色爲 #0000FF
 $("#b1").click(
  function(){
   $("div :first").css("background","#0000FF")
   }
 )
 
 //*****改變最後一個 div 元素的背景色爲 #0000FF
 //所謂最後一個指的是是從上到下，從左到右去搜，最後的一個
 $("#b2").click(
  function(){
   $("div :last").css("background","#0000FF")
   }
 )
   
 //***改變class不爲 one 的全部 div 元素的背景色爲 #0000FF
 $("#b3").click(
  function(){
   $("div").not(".one").css("background","#0000FF")
   }
 )
   
 
 //********改變索引值爲偶數的 div 元素的背景色爲 #0000FF
 $("#b4").click(
  function(){
   $("div:odd").css("background","#0000FF")
   }
 )
 
 //5 改變索引值爲奇數的 div 元素的背景色爲 #0000FF
 $("#b5").click(
  function(){
   $("div:even").css("background","#0000FF")
   }
 )
 
 //*****改變索引值爲大於 3 的 div 元素的背景色爲 #0000FF
 $("#b6").click(
  function(){
   $("div:gt(3)").css("background","#0000FF")
   }
 )
 
 //改變索引值爲等於 3 的 div 元素的背景色爲 #0000FF
 $("#b7").click(
  function(){
   $("div:eq(3)").css("background","#0000FF")
   }
 )
 
 //**改變索引值爲小於 3 的 div 元素的背景色爲 #0000FF
  $("#b8").click(
  function(){
   $("div:lt(3)").css("background","#0000FF")
   }
 )
 //****改變全部的標題元素的背景色爲 #0000FF
  $("#b9").click(
  function(){
   $(":header").css("background","#0000FF")
   }
 )
 
 
 //***改變當前正在執行動畫的全部元素的背景色爲 #0000FFF
 $('#b10').click(
 function(){
  //怎麼樣吧顏色在從新找回的.
  $(":animated").css("background","red");
  
 }
 );
    </script>
   
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。