基本选择器

时间 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="改变 id 为 one 的元素的背景色为 #0000FF"  id="b1"/>
   <input type="button" value=" 改变 class 为 mini 的全部元素的背景色为 #FF0033"  id="b2"/>
   <input type="button" value=" 改变元素名为 <div> 的全部元素的背景色为 #00FFFF"  id="b3"/>
   <input type="button" value=" 改变全部元素的背景色为 #00FF33"  id="b4"/>
   <input type="button" value=" 改变全部的<span>元素和 id 为 two 的元素的背景色为 #3399FF"  id="b5"/>
   
      <div id="one"  class="mini">
       div id为one  
   </div>
   <div id="two">
     div id为two
   </div>
   
   <div id="three"  class="mini">
       div id为three  
   </div>
   
   
   <span id="s_one"  class="mini">
    span  one
   </span>
    
   <span id="s_two">
    span two
   </span>
 
  
 </body>
     <script language="JavaScript">
 //************改变 id 为 one 的元素的背景色为 #0000FF***********
 $(document).ready(function(){
  //$('#one').css('background','#0000FF')
  $('#b1').click(function(){
   $('#one').css('background','#0000FF')
   })
  })
 
 //*****改变 class 为 mini 的全部元素的背景色为 #FF0033
 $(document).ready(function(){
  $("#b2").click(function(){
   $(".mini").css("background","#FF0033")
   })
 
 })
 
 
 //******改变元素名为 <div> 的全部元素的背景色为 #00FFFF
 $(document).ready(function(){
   $("#b3").click(
    function(){
     $("div").css("background","#00FFFF")
     }
   )
  })
 
 //******改变全部元素的背景色为 #00FF33
 $(document).ready(function(){
  $("#b4").click(
  function(){
   $("*").css("background","#00FF33")
   })
  })
 
 
 //*****改变全部的<span>元素和 id 为 two class .mini 的元素的背景色为 #3399FF
 $(document).ready(function(){
  $("#b5").click(
   function(){
    $("span,#two,.mini").css("background","#3399FF")
    }
  )
  })
 
 //***********end*************
    </script>
   
</html>