JavaScript Basic Learning Experience 02

To write a JS effect step:

1. First realize the layout;
2. Understand the principle of animation implementation;
3. Understand the JS syntax;

JS how to get elements?

1. document.getElementById(‘link’)

Event

• Mouse events:

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

• keyboard events;
• System events:
  onload //加载完了html代码后再执行script脚本
• form events;
• Custom events: Native No, we have to do it ourselves.

How do I add an event?

Just like Jiangzi:元素.onmouseover

Function

That's the order, do something.

function abc（）{……//不会主动执行}

1. Call directly:abc();
2. Event Invocation:元素.onmouseover=abc;//千万不要加括号
3. Anonymous invocation:元素.onmouseover=function(){};

Test

Beginners should keep writing at any time to test the habit.

alert(1);//带一个确定按钮的警告框alert(‘okhahaha’);

document.getElementById(‘link’)Too long? Use variables!

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

Want to move an element out of your sight?

1. display:none;//消失了，不占地儿
2. visibility:hidden;//只是隐藏了，还是占地儿
3. Change the width and height: With JS can achieve growth animation effect;
4. Change the transparency: with JS can achieve fade animation effect;
5. Change the absolute positioning;
6. Take a white div to cover it: it can even achieve the effect of water droplet retraction;
7. margin negative;

JavaScript Basic Learning Experience 02