入門筆記 JS

時間 2019-12-05

原文原文鏈接

JS熱身運動

隱藏某個元素：bash

display:none;(不佔文檔流)
visibility:hidden;（佔文檔流）
width/height
透明度
left/top
用一個白色div蓋住
margin負值
...

複製代碼

寫一個JS效果的步驟：

先實現佈局
實現原理
瞭解JS語法

JS中如何獲取元素

經過ID來獲取元素：ide

document.getElementById('link').onclick = abc;
function abc(){
    alert('ok')
}

function(){} 匿名函數
複製代碼

執行命令

直接調用： abc（）；
事件調用：元素.事件 = 函數名 oDiv.onclick = abc();

測試

alert(1); 帶一個肯定按鈕的警告框 (要有隨時寫隨時測試的習慣)函數

變量

var li = xxx ;佈局

小練習

<style>
        div{width: 200px; height: 200px; background-color: red;display: none;}
  </style>
        <script>
            window.onload = function(){
              var oBtn1 = document.getElementById('show_btn');
              var oBtn2 = document.getElementById('hide_btn');
              var oDiv = document.getElementById('div1');

              oBtn1.onclick = function(){
                  oDiv.style.display = 'block' ;
              }
              oBtn2.onclick = function(){
                  oDiv.style.display = 'none';
              }
            }
        </script>
</head>
<body>
       <input id="show_btn" type="button" value="顯示">
       <input id="hide_btn" type="button" value="隱藏">
       <div id="div1"></div>
</body>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。