1.定时按钮

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>按钮定时</title>
  7. </head>
  8. <body>
  9.     <button disabled>同意</button>
  10.     <script src="../jquery.js"></script>
  11.     <script>
  13.         setTimeout(function(){
  14.             console.log($("button"))
  15.             $("button").removeAttr("disabled")
  16.         },5000)
  17.     </script>
  18. </body>
  19. </html>

2.隐藏显示div

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>div</title>
  7.     <style>
  8.         div{
  9.             width: 100px;
  10.             height: 100px;
  11.             border: 2px solid black;
  12.         }
  13.         .box1{
  14.             display: none;
  15.         }
  16.         button:focus{
  17.             outline: 1px solid rgb(19, 166, 224);
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="box1">中国万岁</div>
  23.     <div class="box1">世界万岁</div>
  24.     <div class="box2">宇宙万岁</div>
  25.     <button>显示并且改变颜色</button>
  26.     <script src="../jquery.js"></script>
  27.     <script>
  28.         $("button").click(function(){
  29.             let div = $(".box1")
  30.             div.css({
  31.                 "display":"block",
  32.                 "background-color":"green"
  33.             })
  34.         })
  35.     </script>
  36. </body>
  37. </html>

3.选择框选中

注：更简单办法 - 不遍历

$(“select option[value=’”+inhobby+”‘]”).attr(‘selected’,true)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>选择器的使用</title>
  7. </head>
  8. <body>
  9.     <label for="">请输入爱好：</label>
  10.     <input type="text" name="hobby" id=hobby><br/>
  11.     <label for="">爱好下拉列表</label>
  12.     <select name="" id="select" >
  13.         <option value="编程">编程</option>
  14.         <option value="篮球">篮球</option>
  15.         <option value="滑板">滑板</option>
  16.         <option value="听音乐">听音乐</option>
  17.     </select><br/>
  18.     <button>判断</button>
  19.     <script src="../jquery.js"></script>
  20.     <script>
  21.         $("button").click(function(){
  22.             let inhobby = $("#hobby").val();
  23.             $("select option").each(function() {  
  24.                 if($(this).val()==inhobby){                
  25.                    $("select").val(inhobby);
  26.                 }
  27.              });
  28.         })
  29.     </script>
  30. </body>
  31. </html>

4.复选框选中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>复选框</title>
  7.     <style>
  8.         .box2{
  9.             background-color: indianred;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <!-- <form action=""> -->
  15.         <div class="box1">
  16.             请输入城市:<input type="text" id="city">
  17.         </div>
  18.         城市复选框:<br/>
  19.         <div class="box2">
  20.             <input type="checkbox" name="" id="" value="北京">北京
  21.             <input type="checkbox" name="" id="" value="南京">南京
  22.             <input type="checkbox" name="" id="" value="上海">上海
  23.         </div>
  24.         <button>判断</button>
  25.     <!-- </form> -->
  26.     <script src="../jquery.js"></script>
  27.     <script>
  28.         $("button").click(function(){
  29.             let incity = $("#city").val();
  30.             $(".box2 input").each(function() {  
  31.                 if($(this).val()==incity){            
  32.                    $(this).attr('checked','true')
  33.                 }
  34.              });
  35.         })
  36.     </script>
  37. </body>
  38. </html>

5.隔行变色

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>隔行变色</title>
  7.     <style>
  8.         table{
  9.             width: 200px;
  10.             height: 100px;
  11.             text-align: center;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <table>
  17.         <thead>
  18.             <tr>
  19.                 <th>姓名</th>
  20.                 <th>年龄</th>
  21.             </tr>
  22.         </thead>
  23.         <tbody>
  24.             <tr>
  25.                 <td>Cherry</td>
  26.                 <td>22</td>
  27.             </tr>
  28.             <tr>
  29.                 <td>Lynn</td>
  30.                 <td>23</td>
  31.             </tr>
  32.             <tr>
  33.                 <td>Tracer</td>
  34.                 <td>23</td>
  35.             </tr>
  36.         </tbody>
  37.     </table>
  38.     <script src="../jquery.js"></script>
  39.     <script>
  40.         $("thead tr").css("background-color","lightgray")
  41.         $("tbody tr:even").css("background-color","red")
  42.         $("tbody tr:odd").css("background-color","green")
  43.     </script>
  44. </body>
  45. </html>