JS基础：热身运动

写一个JS效果的步奏：

1.先实现布局
2.实现原理
3.了解JS语法

JS中如何获取元素：

1.通过ID名称来获取元素：
document get element by id 'link'

docuemnt.getElementById('link');

事件

事件：鼠标事件，键盘事件（按回车，空格找到），系统事件（调节窗口大小），表单事件（input表单），自定义事件
onclick
onmouseover
onmouseout
onmousedown
onmouseup
onmousemove

如何添加事件？用.

元素.事件

函数：可以理解为命令，做一件事

function abc(){//肯定不会主动执行的，需要调用！
……
}

因为不会主动执行，★要执行必须调用：直接调用和事件调用

调用方法1、直接调用:

abc()

调用方法2、事件调用： 元素.事件=函数名

 document.getElementById("link").onclick=abc;

匿名函数：

function abc(){}中的abc为函数名，函数名可以省略，

function (){}为匿名函数

调用方法3：匿名函数的调用：元素.事件=匿名函数

元素.事件=function (){}

什么时候是匿名函数，什么时候有名的函数？

有名的函数比如两个元素都同时指行一个命令时:

oStrong.onclick=show;//元素.事件=函数名
obtn1.onclick=show;
function show(){
    oDiv.style.display="block";
    oDiv.background.window="300PX";
    oDiv.style.background="yellow";
}

变量var

var a=var a= document.getElementById('link');
var num=123;
var name="leo";

加了变量后的进一步简写：

var a=document.getElementById("link");
a.onclick=abc;

测试：

alert(1);带了一个确认按钮的警告框；

系统事件：onload 加载完后再执行……

window.onload=要做的事情即函数
img.onload
body.onload
……

<script>
window.onload=function(){
    var li = document.getElementById('lis');
    var ul= document.getElementById('ul1');
    var a= document.getElementById('link');

    //元素.事件=函数名
    // li.onmouseover = show;
    // function show(){
    //     ul.style.display ="block";
    //     a.style.background ='yellow';
    // }
    // li.onmouseout = hide;
    // function hide(){
    //     ul.style.display="none";
    //     a.style.background="#f1f1f1";
    // }


    //匿名函数调用
    li.onmouseover =function(){
        ul.style.display ="block";
        a.style.background ='yellow';
    }

    li.onmouseout = function (){
        ul.style.display="none";
        a.style.background="#f1f1f1";
    };
    
}
</script>

希望把某个元素移除你的视线：

1、display:none;显示为无
2、visibility:hidden; 隐藏，占有位置
3、width \ height
4、透明度
5、left \ top
6、拿一个白色DIV盖住它
7、margin负值

【补充说明】：关于函数http://www.jianshu.com/p/094e335d8373