HTML Collection

  1.   // 不能对HTML Collection执行点击事件,只能对具体元素执行事件
  2.         /* 
  3.         this -->在事件中,谁执行事件,this就指谁
  4.          */
  5.         var all = document.getElementsByClassName("one");
  6.         for(var i=0;i<all.length;i++){
  7.             all[i].onclick = function(){
  8.                 this.style.display = "none"
  9.             }
  10.         }

input checked onclick

  1.   <input id="input" type="checkbox" >篮球
  2.     <!-- 
  3.         点击事件 onclick
  4.         input输入框有checked,true表示选中,false没有选中
  5.      -->
  6.      <script>
  7.          var input = document.getElementById("input");
  8.          input.checked = false;
  9.          console.log(input.id)
  10.      </script>
  1.  <button id="all">全选</button>
  2.     <button id="noAll">不选</button>
  3.     <button id="reverse">反选</button>
  4.     <div>
  5.         <input type="checkbox">足球
  6.         <input type="checkbox">篮球
  7.         <input type="checkbox">Lol
  8.         <input type="checkbox">王者荣耀
  9.     </div>
  10.     <script>
  11.         var all = document.getElementById("all");
  12.         var noAll = document.getElementById("noAll");
  13.         var reverse = document.getElementById("reverse");
  14.         var inputs = document.getElementsByTagName("input");
  15.         /* 1.对btn执行点击事件 */
  16.         all.onclick = function () {
  17.             /* 2.将所有的input的checked属性设置为true */
  18.             for (var i = 0; i < inputs.length; i++) {
  19.                 inputs[i].checked = true;
  20.             }
  21.         }
  22.         noAll.onclick = function () {
  23.             for (var i = 0; i < inputs.length; i++) {
  24.                 inputs[i].checked = false;
  25.             }
  26.         }
  27.         reverse.onclick = function () {
  28.             for (var i = 0; i < inputs.length; i++) {
  29.                 console.log(inputs[i].checked)
  30.                 inputs[i].checked = (inputs[i].checked) ? false : true;
  31.             }
  32.         }
  33.     </script>

隔行变色

  1. <style>
  2.     /* 
  3.     odd 奇数
  4.     even 偶数
  5.      */
  6.     /* li:nth-child(even){
  7.         background-color:pink;
  8.     }
  9.     li:nth-child(odd){
  10.         background-color: aqua;
  11.     } */
  12. </style>
  14. <body>
  15.     <ul>
  16.         <li>1</li>
  17.         <li>2</li>
  18.         <li>3</li>
  19.         <li>4</li>
  20.         <li>5</li>
  21.     </ul>
  22.     <script>
  23.         /*
  24.         i%2  0,1,2,3,4
  25.              0,1,0,1,0
  26.          */
  27.         var lis = document.getElementsByTagName("li");
  28.         for(var i=0;i<lis.length;i++){
  29.             if(i%2==0){
  30.                lis[i].style.backgroundColor = "pink"
  31.             }else{
  32.                 lis[i].style.backgroundColor = "blue"
  33.             }
  34.         }
  35.     </script>
  36. </body>

切换按钮

  1.  <div style="display: block;">
  2.         div
  3.     </div>
  4.     <button id="btn">btn</button>
  5.     <script>
  6.         var div = document.getElementsByTagName("div")[0];
  7.         var btn = document.getElementById("btn");
  8.         btn.onclick = function(){
  9.             var d = div.style.display;
  10.             // if(d=="block"){
  11.             //     div.style.display = "none"
  12.             // }else{
  13.             //     div.style.display = "block";
  14.             // }
  15.             div.style.display = (d=="block")?"none":"block";
  16.         }
  17.     </script>