javascript学习第1节
来源:互联网 发布:韩信点兵算法原理 编辑:程序博客网 时间:2024/06/15 22:31
事件简单来说就是:用户的操作
【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";"这样有两个双引号了
- javascript学习第1节
- 《 JavaScript高级程序设计》 第1章 学习
- javascript学习第一天
- JavaScript学习第一天
- JavaScript学习第一天
- JavaScript学习第一天
- 第五天学习javascript
- javascript学习--第一天
- JavaScript学习第一天
- JAVASCRIPT第一天学习
- JavaScript学习第一天
- JavaScript学习 第 一 章
- JavaScript学习 第 二 章
- JavaScript学习 第 三 章
- JavaScript学习 第 四 章
- JavaScript学习 第 五 章
- JavaScript学习 第 六 章
- JavaScript学习 第 七 章
- 腾讯微信技术总监周颢:一亿用户增长背后的架构秘密
- Ubuntu10.04与ARM板开发之间FTP文件传输
- iOS--错误集锦--the operation couldn't be completed. (FBSOpenApplicationErrorDomain error 3.)
- 杭电1597 find the nth digit
- 随便纪录点什么
- javascript学习第1节
- PHP Echo的一些知识,感觉挺有用的
- 工作总结
- PowerShell GUI 之使用visual studio创建GUI (1)
- CentOS6.4使用sudo提示用户不在sudoers文件中的解决方法
- Genymotion安装与使用、Android Studio安装Genymotion插件
- java内存区域
- Cocos2dx 3.X 环境搭建和Android打包apk
- OpenJudge_P7216 Minecraft