Nearth===>WEB前端--第11课/JQuery/多条件选择器学习小案例

原创

西南第一深情李登门 2022-11-04 11:08:26 ©著作权

©著作权归作者所有：来自51CTO博客作者西南第一深情李登门的原创作品，请联系作者获取转载授权，否则将追究法律责任

多条件选择器学习：

<!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>