基础过滤选择器

时间 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>