webday04-jQuery-基本选择器

最新推荐文章于 2020-08-25 14:45:24 发布

Victoria446704822

最新推荐文章于 2020-08-25 14:45:24 发布

阅读量148

点赞数

本文链接：https://blog.csdn.net/weixin_47407295/article/details/108218155

版权

<!DOCTYPE HTML>
<html>
   <head>
       <title>基本选择器</title>
       <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
       <style type="text/css">
           body{
               font-family: "微软雅黑";
           }
           div,span{
               width:140px;
               height:140px;
               margin: 20px;
               background: #9999CC;
               border: 1px solid #000;
               float: left;
               font-size: 17px;
               font-family: Roman;
           }
           div.mini{
               width:40px;
               height:43px;
               background: #CC66FF;
               border: 1px solid #000;
               font-size: 12px;
               font-family: Roman;
           }
           input{margin: 5px 5px;}
       </style>
       
       <script src="js/jquery-1.4.2.js"></script>
       <script type="text/javascript">

           //让整个页面加载完成
   $(document).ready(function() {
       /* ---------基本选择器练习--------- */
       //改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1"
       $("#b1").click(function(){
           $("div").css("background-color","#FF69B4")
       })

       //改变 id 为 one 的元素的背景色为 #9ACD32" id="b2"
       $("#b2").click(function(){
           $("#one").css("background-color","#9ACD32")
       })

       //改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"
       $("#b3").click(function(){
           $(".mini").css("background-color","#FF0033")
       })

       //改变所有元素的背景色为 #FDF5E6" id="b4"
       $("#b4").click(function(){
           $("*").css("background-color","#FDF5E6")
       })

       //改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493" id="b5"
       $("#b5").click(function(){
           $("span,#two").css("background-color","#FF1493")
       })

       //改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400" id="b6"
       $("#b6").click(function(){
           $("span,#two,#one,.mini").css("background-color","#006400")
       })
   });
       </script>
   </head>
   <body>
       <input type="button" value="改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1" />
       <input type="button" value="改变 id 为 one 的元素的背景色为 #9ACD32" id="b2"/>
       <input type="button" value="改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"/>
       <input type="button" value="改变所有元素的背景色为 #FDF5E6" id="b4"/>
       <input type="button" value="改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493" id="b5"/>
       <input type="button" value="改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400" id="b6"/>
       <h1>天气冷了</h1>
       <h2>天气又冷了</h2>

       <div id="one">id为one</div>

       <div id="two" class="mini">
           id为two class是mini
           <div class="mini">calss是mini</div>
       </div>

       <div class="one">
           calss是one
           <div class="mini">class是mini</div>
           <div class="mini">class是mini</div>
       </div>

       <div class="one">
           class是one
           <div class="mini01">calss是mini01</div>
           <div class="mini">class是mini</div>
       </div>

       <br>
       <div id="mover">动画</div>
       <br>
       <span class="spanone">span</span>
       <span class="mini">span class是mini</span>
   </body>
</html>

Victoria446704822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webday04-jQuery-基本选择器

<!DOCTYPE HTML><html> <head> <title>基本选择器</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> body{ font-fa...
复制链接

扫一扫