多条件选择器学习:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nearth</title> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> div{ height: 300px; width: 300px; background-color: red; } </style> <script > $(function(){ $("#btn").click(function(){ if($(this).val()=="点击我,显示效果"){ $("span,p,li,div").css("background-color","pink"); $(this).val("看到了效果,就再点击返回吧····"); } else{ $("span,p,li,div").css("background-color","red"); $(this).val("点击我,显示效果"); } }) }) </script> </head> <body> <h1>多条件选择器学习</h1> <hr > <input type="button" name="" id="btn" value="点击我,显示效果" /> <br> <span> 这是一个惊喜1 </span> <p> 这是一个惊喜2 </p> <ul> <li>这是惊喜3</li> <li>这是惊喜4</li> <li>这是惊喜5</li> <li>这是惊喜6</li> </ul> <div></div> </body> </html>
Nearth===>WEB前端--第11课/JQuery/多条件选择器学习小案例
最新推荐文章于 2019-11-16 17:30:09 发布