JavaScript基礎學習心得02

標籤：動畫   命令   擷取   定義   瞭解   添加   滑鼠事件   load   var   

寫一個js效果的步驟：

1. 先實現布局；
2. 瞭解動畫實現的原理；
3. 瞭解js文法；

js如何擷取元素？

1. document.getElementById(‘link’)

事件

• 滑鼠事件：

1. onclick
2. onmouseover
3. onmouseout
4. onmousemove //滑鼠的撫摸事件
5. onmousedown
6. onmouseup

• 鍵盤事件；
• 系統事件:
  onload //載入完了html代碼後再執行script指令碼
• 表單事件；
• 自訂事件：原生沒有，我們得自己做。

如何添加事件？

就像醬紫:元素.onmouseover

函數

即命令，做一些事兒。

function abc（）{……//不會主動執行}

1. 直接調用：abc();
2. 事件調用：元素.onmouseover=abc;//千萬不要加括弧
3. 匿名調用：元素.onmouseover=function(){};

測試

初學者要保持隨時寫，隨時測的習慣。

alert(1);//帶一個確定按鈕的警告框alert(‘okhahaha’);

document.getElementById(‘link’)太長？用變數！

var hahaha=document.getElementById(‘link’);

希望把某個元素移出你的視線？

1. display:none;//消失了，不佔地兒
2. visibility:hidden;//只是隱藏了，還是佔地兒
3. 改變寬高：配合js可以實現生長動畫效果；
4. 改變透明度：配合js可以實現淡入淡齣動畫效果；
5. 改變絕對位置；
6. 拿一個白色的div遮住它：甚至可以實現水滴回縮效果；
7. margin負值；

JavaScript基礎學習心得02