jQuery基本选择元素

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 <html>
  3   <head>
  4     <title>ddd</title>
  5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6     <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
  7     <style type="text/css">
  8              div,span{
  9                 width: 140px;
 10                 height: 140px;
 11                 margin: 20px;
 12                 background: #9999CC;
 13                 border: #000 1px solid;
 14                 float:left;
 15                 font-size: 17px;
 16                 font-family:Roman;
 17             }
 18             
 19             div.mini{
 20                 width: 30px;
 21                 height: 30px;
 22                 background: #CC66FF;
 23                 border: #000 1px solid;
 24                 font-size: 12px;
 25                 font-family:Roman;
 26             }
 27      </style>
 28      <!--引入jquery的js库-->
 29     
 30     </head>
 31      
 32     <body>
 33                 
 34          <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
 35          <input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF"  id="b1"/>
 36          <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF"  id="b2"/>
 37          <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"/>
 38          <input type="button" value=" 改变所有元素的背景色为 #00FF33"  id="b4"/>
 39          <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF"  id="b5"/>
 40         
 41  
 42          <h1>天气冷了</h1>
 43          <h2>天气又冷了</h2>
 44          
 45          <div id="one">
 46              id为one  
 47              
 48          </div>
 49         
 50          <div id="two" class="mini" >
 51                id为two   class是 mini 
 52                <div  class="mini" >class是 mini</div>
 53         </div>
 54         
 55          <div class="one" >
 56                  class是 one 
 57                <div  class="mini" >class是 mini</div>
 58                <div  class="mini" >class是 mini</div>
 59          </div>
 60          <div class="one" >
 61                class是 one 
 62                <div  class="mini01" >class是 mini01</div>
 63                <div  class="mini" >class是 mini</div>
 64         </div>
 65         
 66         <br>
 67         <div id="mover" >
 68                动画
 69         </div>
 70         <br>
 71         <span class="spanone">    span
 72         </span>
 73         <span class="mini">    span
 74         </span>
 75         
 76     </body>
 77 <script language="JavaScript">
 78 $().ready(function(){
 79     //<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF"  id="b1"/>
 80     $("#b1").click(function(){
 81         $("#one").css("background-color","red");
 82     });
 83     //<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF"  id="b2"/>
 84     $("#b2").click(function(){
 85         
 86         $("div").css("background-color","red");
 87         
 88     });
 89     //<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"/>
 90     $("#b3").click(function(){
 91         $(".mini").css("background-color","red");
 92     });
 93     //<input type="button" value=" 改变所有元素的背景色为 #00FF33"  id="b4"/>
 94     $("#b4").click(function(){
 95         $("*").css("background-color","red");
 96     });
 97     //<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF"  id="b5"/>
 98     $("#b5").click(function(){
 99         $("span,#two").css("background-color","red");
100     });
101 });
102 </script>
103    
104 </html>

相关阅读:
浅谈Spring AOP 面向切面编程最通俗易懂的画图理解AOP、AOP通知执行顺序~
fastjson自由：controller上指定active profile，让你想序列化什么字段就序列化什么字段
 Java多线程中join、yield、sleep方法详解
 一张图秒懂微服务网络架构
 详解SpringBoot应用跨域访问解决方案
 如何在 Spring/Spring Boot 中做参数校验？你需要了解的都在这里！
史上最全的excel读写技术分享
 手把手教你定制标准Spring Boot starter，真的很清晰
 JVM性能调优详解
 Spring Boot 2.x监控数据可视化(Actuator + Prometheus + Grafana手把手)
原文地址：https://www.cnblogs.com/friends-wf/p/3762528.html

jQuery基本选择 元素

jQuery基本选择元素