JS0热身运动

热身热身小知识点:

 

JS中如何获取元素:

1 通过ID名称来获取:document get element by id  -->document.getElementById()

2

.... 

事件:鼠标事件,键盘事件,系统事件,表单事件,自定义事件...

onclick

onmouseover

onmouseout

onmousedown

onmouseup

onmousemove     就像是鼠标抚摸一样的事件

...

onload    加载以后执行...

window.onload=事情

 

如何添加事件:

元素.onmouseover

 

函数:可以理解为-命令,做些事——

function jill1231(){   //肯定不会主动执行的!

...

}

1 直接调用:jill1231();

2 事件调用:元素.事件=函数名oDiv.onclick=jill1231;

 

function(){} //匿名函数

元素.事件=function(){};

 

测试:

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

alert('ok');   'ok'  "ok" 字符串

 

变量:

var num=123; 

 

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

 1 display:none;

 2 visibility:hidden;

 3 width/height

 4 opacity

 5 拿一个div盖住它

 ...

 例如,做一个菜单栏,鼠标移入,显示子菜单,移出,子菜单消失

 <!DOCTYPE HTML>

<html>
<head>
<meta content="text/html;charset=utf-8">
<title>模拟菜单栏</title>
<style>
//reset
body,ul,li
{margin:0;padding:0;}
ul,li
{list-style:none;}
a
{text-decoration:none;}
//main.css
.lis
{width:80px;height:30px;border:1px solid #333;position:relative;}
.lis a
{display:block;line-height:30px;text-align:center;color:#000;background:#f1f1f1;}
ul ul
{width:80px;border:1px solid #333;position:absolute;top:30px;left:-1px;background:#ff9;display:none;}
ul ul li
{text-align:center;line-height:30px;}
</style> 
</head>
<body>
    <ul>
    //设置父级,保证鼠标移入移出伪元素及子级不出现闪退
        <li id="lis">
            <hred="#" id="link">博客</a>
            <ul id="ul1">
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
    </ul>
<script>
    var li=document.getElementById('lis');
    var a=document.getElementById('link');
    var ul=document.getElementById('ul1');
    li.onmouseover=show;
    li.onmouseout=hide;

    function show(){
        ul.style.display='block';
        a.style.background='#345345';
    }
    function hide(){
        ul.style.display='none';
        a.style.background='#f1f1f1';
    }
</script>
</body>
</html>    

  

 

posted @ 2016-02-28 10:42  jill1231  阅读(218)  评论(0编辑  收藏  举报