1.js可以干什么
通俗的说,一个页面,有了骨骼(html),血肉皮肤(css),那是不是还需要动作呢,就像生物体一样,这里的【动作】就是由【js代码】实现的。举个栗子,当你把鼠标移到这里的博客管理上时,
点击一下,会出现这样一个长条,那么这点击一下出现长条的这个动作,就是用js代码来实现的啦。
2.一个热身代码,是从妙味那里看到的。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>pra</title>
<style>
li{
list-style: none;
}
.lis{
width: 80px;
height: 30px;
border: 1px solid #333;
position: relative;
}
.lis a{
display: block;
line-height: 30px;
text-align: center;
text-decoration: none;
color: #000;
background: #f1f1f1;
}
ul ul{
padding: 0;
margin: 0;
width: 140px;
border: 1px solid #000;
position: absolute;
top: 30px;
left: -1px;
display: none;
}
ul ul li{
text-align: center;
line-height: 30px;
background: yellow;
}
</style>
</head>
<body>
<ul>
<li id="lis" class="lis">
<a id="link" href="#">微博</a>
<ul id="ul1">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
<script type="text/javascript">
var li = document.getElementById('lis');
var ul = document.getElementById('ul1');
/*通过ID名称来获取元素
document get element by id 'link'
[doucument的意思是在整个文档范围内,get是找,找一个id为link的元素]
js语句: document.getElementById('link')
[注意大小写]
*/
li.onmouseover = show;
li.onmouseout = hidden;
function show(){
ul1.style.display = 'block'; /*要加引号! 意思是把ul1的样式里面的display变为block*/
document.getElementById('link').style.background = 'red';
/*这里是让鼠标移动上去时,背景变为红色,而且鼠标移出时红色还保持,但若是用hover伪类则只能是鼠标移上去是红色,鼠标移出时红色消失。而用js可以让红色想什么时候消失就什么时候消失!*/
}
function hidden(){
ul.style.display = 'none';
/*实现鼠标从lis私信列表项上移走时(就好像是从微博那个a链接上移走的),将私信列表隐藏的效果!如果上面的onmouseout的元素变为微博a链接link元素时,则当鼠标离开a链接而没离开私信列表的范围时,那个私信列表却会消失,没法点击列表项中的元素,这是不合理的*/
}
</script>
</body>
</html>
3.什么是事件?
鼠标事件,键盘事件,系统事件,表单事件,自定义事件….
鼠标事件:
onclick
onmouseover
onmouseout
onmousedown
onmouseup
onmousemove [就像是鼠标抚摸事件]
......
onload [加载完以后执行]
window.onload = 事情
如何添加事件:
元素.onmouseover
[.相当于的,元素的鼠标移动上去事件]
函数:可以理解为命令,做一些事
function abc(){ //肯定不会主动执行!
.....
}
[abc是函数的名字]
1.直接调用:abc(); [会立即执行]
2.事件调用:元素.事件 = 函数名;
eg: oDiv.onclick = abc; [abc后不能加括号!这句的意思是当点击这个oDiv元素时,函数abc会执行]
3.function (){} [匿名函数]
元素.事件 = function (){.....}; [这里可以不用写函数名]
测试(逐行测试):
alert(1); [带一个确定按钮的警告框]
alert('ok'); ['ok' 是字符串]
alert("ok") [双引号也可以]
变量:
var li = doucument.getElementById(''lis);
[此时li代表这个获取的元素,不需要每次用这个元素时都要写后面这一长串]
var num = 123;
var name ='leo';