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

推荐阅读更多精彩内容