javascript学习第1节
2015-11-22 17:46
537 查看
事件简单来说就是:用户的操作
【demo练习----鼠标移入移出时的效果】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移入移出时的效果</title>
<style>
#box1{
width:100px;
height:100px;
background-color:#096;
}
</style>
</head>
<body>
<input type="button" value="按钮" onmouseover="box1.style.display='none';"onmouseout="box1.style.display='block';"/>
<div id="box1">显示和隐藏这个div</div>
</body>
</html>
【写js的时候的步骤】
1.先可以把你想要的效果用文字表达一下
eg:当鼠标移入的时候让div隐藏,当鼠标移出的时候让div显示
2.div显示:就是把div的style(样式)的display(属性)变成block
div隐藏:就是把div的style(样式)的display(属性)变成none
3.把步骤2的语言用js表达出来
div显示:onmouseout="box1.style.display='block';"
div隐藏: onmouseover="box1.style.display='none';"
【遇到的问题】
1.兼容性问题:
在火狐下不兼容:div显示:onmouseout="document.getElementById('box1').style.display='block';"
div隐藏:onmouseover="document.getElementById('box1').style.display='none';"
2.单引号和双引号的选择要注意,不能写成onmouseover="box1.style.display="none";"这样有两个双引号了
【demo练习----鼠标移入移出时的效果】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移入移出时的效果</title>
<style>
#box1{
width:100px;
height:100px;
background-color:#096;
}
</style>
</head>
<body>
<input type="button" value="按钮" onmouseover="box1.style.display='none';"onmouseout="box1.style.display='block';"/>
<div id="box1">显示和隐藏这个div</div>
</body>
</html>
【写js的时候的步骤】
1.先可以把你想要的效果用文字表达一下
eg:当鼠标移入的时候让div隐藏,当鼠标移出的时候让div显示
2.div显示:就是把div的style(样式)的display(属性)变成block
div隐藏:就是把div的style(样式)的display(属性)变成none
3.把步骤2的语言用js表达出来
div显示:onmouseout="box1.style.display='block';"
div隐藏: onmouseover="box1.style.display='none';"
【遇到的问题】
1.兼容性问题:
在火狐下不兼容:div显示:onmouseout="document.getElementById('box1').style.display='block';"
div隐藏:onmouseover="document.getElementById('box1').style.display='none';"
2.单引号和双引号的选择要注意,不能写成onmouseover="box1.style.display="none";"这样有两个双引号了
相关文章推荐
- js基础
- jstl是自动就有的吗,不是的Unknown tag (c:if).
- JavaScript学习之路08_高阶函数
- html+css+js 模拟win7桌面
- 实用js代码
- 谈谈JavaScript类型检测
- js数组存储对象及对象的获取
- JSP中getParameter与getAttribute有何区别?
- jsp 内置对象
- Extjs MVC开发模式详解
- 使用Chrome调试JavaScript的断点设置和调试技巧
- Extjs5 常用layout
- jsp页面、servlet显示中文乱码详解
- include与jsp:include区别
- web学习-jsp客户端与Servlet的关联
- JSP__通过a标签传递参数 用getParameter 获取参数
- JSP__getAttribute()与getParameter的区别
- JStorm之Supervisor简介
- JStorm之Nimbus简介
- 浅谈JavaScript中的伪类 (李睿豪)