当前位置：首页 > Web开发 > 正文

" #FF0033 " );}); // ======================================

2024-03-31 Web开发

<!DOCTYPE> <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: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div.mini { width: 40px; height: 43px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } input{ margin: 5px 5px; } </style>  <script src="../js/jquery-1.4.2.js"></script> <script type="text/javascript"> /* $(function(){ }) */ //让整个页面加载完成 $(document).ready(function() { /* ---------根基选择器操练--------- */ //转变元素名为 <div> 的所有元素的配景色为 #FF69B4" $("#b1").click(function(){ $("div").css("background-color","#FF69B4"); }) //转变 id 为 one 的元素的配景色为 #9ACD32" $("#b2").click(function(){ $("#one").css("background-color", "#9ACD32"); }); //转变 class 为 mini 的所有元素的配景色为 #FF0033" $("#b3").click(function(){ $(".mini").css("background-color", "#FF0033"); }); //转变所有元素的配景色为 #FDF5E6" $("#b4").click(function(){ $("*").css("background-color", "#FDF5E6"); }); //转变所有的<span>元素和 id 为 two 的元素的配景色为 #FF1493" $("#b5").click(function(){ $("span,#two").css("background-color", "#FF1493"); }); //转变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的配景色为 #006400" $("#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"> class是 mini</div> </div> <div class="one"> class是 one <div class="mini"> class是 mini</div> <div class="mini"> class是 mini</div> </div> <div class="one"> class是 one <div class="mini01"> class是 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>

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31838.html

" #FF0033 " );}); // ======================================

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢