您的位置：首页 > Web前端 > JavaScript

javascript小实例【第一课时笔记】

2013-05-03 20:20 190 查看

js里面的dot表示什么什么的。等号表示赋值给一个变量。当文档有内容的时候也就是标记的时候需要使用window.onload来调用某个函数来执行，否则浏览器会一直不执行，一般情况下都会把脚本放在</body>标签之前，这是为了先加载结构和样式，最后加载脚本文件，这样有利于用户体验和可访问性原则。

那就开始今天的第一个小实例吧，其实昨天就做了，今天贴上来==！

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>提示框</title>
</head>
<style>
#div1{width:100px;height:100px;background:red;border:1px solid #ccc;display:none;}
</style>
<body>
<label onMouseOver="document.getElementById('div1').style.display='block';"
onmouseout="document.getElementById('div1').style.display='none';"><input type="checkbox"/>自动登录</label>
<div id="div1">不要在网吧留下密码</div>
</body>
</html>

这是一个类似于提示框的东西，你会懂得，不解释了。补充一句吧，使用label标签来包含input元素可以使---当鼠标移动到文字上面的时候也会促使onmuoseover事件的发生。

第二个小实例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>huanClass</title>
</head>
<style>
div{width:100px;height:100px;background:red;border:1px solid #ccc;}
.box{width:150px;height:150px;color:blue;}
</style>
<body>
<div id="div1" onMouseOver="document.getElementById('div1').className='box';"
onmouseout="document.getElementById('div1').className='';"></div>
</body>
</html>

这个实例是通过className来更换类名实现样式的切换。特别要注意每一个标点符号，多一个就错了，纠结了好久的标点符号。还有style标签里面的div不能使用#div1，否则会出错，不知道什么情况，后来调试的时候发现的，坑爹啊。

函数的调用要加上（）这个家伙，并且类似于css里的class，可以多次使用。

getElementByID();

alert();

Onclick;

onmouseover/onmouseout;

className;

END！！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航