控制div属性
<style> .c1 { width:200px; height:200px; background-color: #000; display: block; margin: 0 auto; } </style> <body> <button class="btn" value="0" >变宽</button> <button class="btn" value="1" >变高</button> <button class="btn" value="2" >变色</button> <button class="btn" value="3" >隐藏</button> <button class="btn" value="4" >重置</button> <div class="c1"></div> <script> var cArray = ['400px','400px','#0f0','none','block'] var sArray = ['width','height','background-color','display','display'] $(function () { $('button').click(function () { var val = this.value; if(val < 4){ $('.c1').css(sArray[val],cArray[val]); }else{ $('.c1').attr('style',''); } }) }) </script>
网页换肤
<style> body{ background-color: #7DA5FF; } a{ color:#fff; font-weight: bolder; } button{ width: 30px; height: 30px; } .red{ background-color: red; } .green{ background-color: green; } .blue{ background-color: blue; } .d1 li{ background-color: blue; } </style> </head> <body class="b1"> <div class="container d1"> <button class="red" value="red"></button> <button class="green" value="green"></button> <button class="blue" value="blue"></button> <ul class="nav nav-pills"> <li role="presentation" class="table-bordered"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> </div> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $(function () { var color = { 'red':'#FF76A0', 'green':'#658066', 'blue':'#7DA5FF' }; $('button').click(function () { var val = this.value; $('body').css('background',color[val]); console.log(color[val]); $('.d1>ul>li').css('background',val); }) }) </script>
函数接收参数并弹出
<style> div{ width:30%; margin: 15px auto; } .btn{ margin: 0 auto; cursor:pointer; } </style> </head> <body> <div class="container"> <div><input type="text" class="city form-control"></div> <div><input type="text" class="district form-control"></div> <div><button class="btn btn-primary pull-right">提交</button></div> </div> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $('button').click(function () { var city = $('.city').val(); var district = $('.district').val(); alert(city); alert(district); }) </script>
用循环将三个div变色
<style> .d1{ margin: 10px auto; width: 370px; } .d2{ width: 100px; height: 100px; background-color:#fff; margin: 0 5px; display: inline-block; border:1px solid black; } </style> </head> <body> <div class="container" style="margin: 0 auto; 102px;"> <button class="b1">点我变色</button> </div> <div class="container d1"> <div class="d2"></div> <div class="d2"></div> <div class="d2"></div> </div> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $(".b1").on("click",function () { var $divEle = $(".d2"); console.log($divEle); $.each($divEle,function (i) { $($divEle[i]).css("background","red"); }) }) </script>
鼠标移入/移出改变样式
<style> .d1{ margin: 0 auto; width: 200px; height: 200px; border: 20px solid #000; color: #fff; background-color: #000; } .d2{ border: 20px solid red; color: red; background-color: #eee; } </style> </head> <body> <div class="d1"> <p>鼠标移入改变样式,鼠标移出恢复</p> </div> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> var $divEle = $(".d1"); $divEle.on("mouseover",function () { $divEle.addClass("d2"); }) $divEle.on("mouseout",function () { $divEle.removeClass("d2"); }) </script>
记住密码提示框
<style> .d1{ margin: 0 auto; width: 150px; } </style> </head> <body> <div class="d1"> <input type="checkbox" value=""> 两周内自动登录 </div> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> var $divEle = $(".d1"); var pEle = document.createElement("p"); $divEle.on("mouseover",function () { $(pEle).text("为了您的信息安全,请不要在网吧或公用电脑上使用此功能!").css({"background": "yellow", "border": "1px solid red"}); $divEle.append(pEle); }) $divEle.on("mouseout",function () { $divEle.children("p").remove(); }) </script>