先说两句
1、html写框架、css写样式、javascript写动态效果
2、javascript严格区分大小写
一、javascript事件
onclick鼠标点击事件(包含了onmousedown和onmouseup两个动作)
onmouseover鼠标移入事件
onmouseout鼠标移出事件
onmousedown 在鼠标按下时触发
onmouseup 鼠标松开事件onmousemove鼠标拖动事件
二、javascript函数
1、什么是函数
将能完成特定功能的代码块放入一个函数里,需要时直接调用
2、函数的书写形式
function myname( ){
代码块;
}
function:定义函数的关键字
myname 自己起的函数名
三、javascript获取元素
1、通过ID名称来获取元素,“.”代表“的”
比如 document.getElementById(“div1”);
2、元素.onmouseover
document.getElementById(“div1”).onmouseover;
四、javascript添加事件
函数执行方法
1、调用函数名abc()
2、事件调用:元素.οnmοuseοver=abc 切记不能加括号
ps:单独调用函数时要加();事件调用函数时不加()
五、javascript的变量
var 变量名=
1、作用:减少代码量
2、变量以字母开头,严格区分大小写
var oUl=document.getElementById(“ul1”);
3、匈牙利命名法 oUl
六、javascript的测试方法
alert( ) 警告窗
右键查看元素或者按F12
七、javascript放置的位置
放在头部会失效,最好放在中html代码写完后
一定要放在前面需要加浏览器事件 window.onload–加载完后执行
八、javascript匿名函数
一个函数可以没有名字
可以直接用事件调用匿名函数
元素.事件=匿名函数
oBtn.οnclick=function( ){
oUl.style.display=”none”;
}
举例说明
1、元素隐藏
<html>
<head>
<style type="text/css">
.box{width:100px;height:100px;background:red;}
</style>
</head>
<body>
<div class="box" id="div1"></div>
<script>
function hide(){
document.getElementById("div1").style.display="none";
}
document.getElementById("div1").onmouseover=hide;
</script>
</body>
</html>
2、下拉框
html的框架很重要,框架写对了,js才能初步实现
下拉框的框架(html)就是一个大的div下面套着一个小的div和一个ul
css部分就是初始让大的div和小的div的宽度一致,让ul隐藏
js部分就是点击大的div时,让ul显示
<html>
<head>
<style type="text/css">
ul,li{margin:0;padding:0;}
li{list-style;none;}
.box{width:100px;height:25px;background-color:red;text-align:center;position:relative;cursor:pointer;}
#div2{width:100px;}
#ul1{width:50px;background-color:yellow;position:absolute;top:34px;left:20px;display:none;}
#ul1 li{height:25px;border:1px #000 dashed;text-align:center;}
</style>
</head>
<body>
<div id="div2">
<div class="box">下拉框</div>
<ul id="ul1">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
<script>
var oUl=document.getElementById("ul1");
var oDiv=document.getElementById("div2");
function show(){
oUl.style.display='block';
}
function hide(){
oUl.style.display='none';
}
var onoff=1;
oDiv.onclick=function(){
if(onoff==1){
//oUl.style.display='block';
show();
onoff=0;
}
else{
//oUl.style.display='none';
hide();
onoff=1;
}
}
</script>
</body>
</html>
3、定义变量
<script>
var x=123;
var y='abc';
document.write(x);
document.write(y);
document.write(x,y);
</script>