入门笔记 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>
复制代码