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

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

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

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

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

第二个小实例:

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

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

  1. 函数的调用要加上()这个家伙,并且类似于css里的class,可以多次使用。
  2. getElementByID();
  3. alert();
  4. Onclick;
  5. onmouseover/onmouseout;
  6. className;

END!!