JS零基础
2018-01-28 本文已影响0人
IT颖儿
第一天2018/01/28
实现功能：鼠标移入显示下拉列表，移除时恢复正常
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个JS程序</title>
<style type="text/css">
ul{padding: 0px;margin: 0px;}
li{ list-style:none; }/*将列表前面的无序列表默认图标去除*/
.mon { width:80px; height:30px; border:1px solid #333; position:relative; }/*指定是哪个li*/
.mon a { display:block; line-height:30px; text-align:center; text-decoration:none; color:#000; background:#f1f1f1; }/*指定是哪个li里的a链接，去除文字默认的下划线，可见*/
ul ul { padding:0; margin:0; width:140px; border:1px solid #333; position:absolute; top:30px; background:#FF9; display: none; }/*指定第二个ul，定位，不可见*/
ul ul li { text-align:center; line-height:30px;}
ul ul li a{ text-decoration: none;}/*去下划线*/
</style>
</head>
<body>
<ul><!--主列表-->
<li class="mon" id="month"><a href="#" id="link">月份</a>
<ul id="c1"><!--下拉列表-->
<li><a href="#">1月</a></li>
<li><a href="#">2月</a></li>
<li><a href="#">3月</a></li>
<li><a href="#">4月</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">/*js中的注释，此标签代表引入js*/
var li = document.getElementById('month')
var ul = document.getElementById('c1')
var a = document.getElementById('link')
/*
var 代表定义变量，可定义数字、字符、和上面段子...
注意：var中变量代表的东西在此之前的代码中必须有，不然浏览器解析为错我，变量为空
*/
li.onmouseover = show;/*当鼠标移入时调用show函数*/
li.onmouseout = hide;/*当鼠标移出时调用hide函数*/
/*
如果没有在上面定义var变量，就要写成
document.getElementById('month').onmouseover = show;
*/
function show(){
ul.style.display = 'block';
a.style.background = 'yellow';
}
/*function 代表函数，函数名可有可无，但是此例中要求有*/
function hide(){
ul.style.display = 'none';
a.style.background = '#f1f1f1';
}
</script>
</body>
</html>
说明：上例中<script>标签放在<body>中（均为双标签），如果放在<head>中，JS代码为：
<script type="text/javascript">
window.onload = function(){
var li = document.getElementById('month')
var ul = document.getElementById('c1')
var a = document.getElementById('link')
li.onmouseover = function(){
ul.style.display = 'block';
a.style.background = 'yellow';
}
/*这里的function函数就不用命名，如果这个函数被多次调用，最好命名，调用方便*/
li.onmouseout = function hide(){
ul.style.display = 'none';
a.style.background = '#f1f1f1';
}
}
</script>
JS中如何获取元素：
根据ID值
document.getElementById('id名');
JS中的事件：
鼠标事件、键盘事件、系统事件、表单事件、自定义事件...
onclick \ onmouseover \ onmouseout \ onmousedown \ onmouseup \ onmousemove...
添加事件
例：元素.onclick
JS中的函数调用：
function abc(){
....
}
/*函数不会自动执行*/
1.直接调用：abc()
2.事件调用：元素.事件 = 函数名 oDiv.onclick = abc;
JS中测试：
alert(1); /*带一个确定按钮的警告框 */
alert('ok'); /*字符串，也可用""*/
