JS0热身运动

热身热身小知识点：

JS中如何获取元素：

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

....

事件：鼠标事件，键盘事件，系统事件，表单事件，自定义事件...

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">
            <a 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) 编辑收藏举报

刷新页面返回顶部

jill1231

JS0热身运动

公告