JS效果的步骤

一、写JS效果的步骤

1.先实现布局 (XHTML+CSS2)

2.实现原理

　（1）希望把某个元素移除你的视线：

　　　a.  display:none;         显示为无，不占据空间

　　　b.  visibility:hidden;     隐藏，占据空间

　　　c.  width height;

　　　d.  透明度;

　　　e.  left top;             定位

　　　f.  设置z-index，让其他的元素把它遮盖住；

　　　f.  拿一个div盖住它;

　　　g.  足够的margin负值;

　　　h.  背景色和我们页面整体的背景颜色保持一致，或者设置背景颜色是透明的；

　　　......

3.了解JS语法

　（1）JS中如何获取元素:

　　　a.  通过ID名称获取元素:

　　　　document get element by id '#'   

　　　　document.getElementById('#')　

　　　b.  ...

　　　......  ( 目前先理解第一种 )

　（2）变量（考虑到获取元素的名称太长，因此可以给它起了‘代号’；这就是变量）

　　　　var li = document.getElementById('#');

　　　　var num = 123;

　　　　var name = 'leo';

　（3）事件： 鼠标事件、键盘事件、系统事件、表单事件、自定义事件......

　　　　a:   鼠标事件有哪些:

　　　　　　onclick                      鼠标点击

　　　　　　onmouseover　　　 　鼠标移到某个东西

　　　　　　onmouseout　　　 　 鼠标移开

　　　　　　onmousedown          鼠标按下

　　　　　　onmouseup              鼠标抬起

　　　　　　onmousemove　　 　 就像是鼠标抚摸一样的事件

　　　　　　......

　　　　b：系统事件有哪些：

　　　　　　onload                     加载完之后执行......

　　　　　　window.onload

　　　　　　img.onload

　　　　　　body.onload

　　　　　　......

　（4）如何添加事件：

　　　　添加事件：元素.onmouseover   ( 元素.事件)

　（5）函数：可以理解为命令,做一件事..

　　　　　　1> function 名字(){  这里写的肯定不会主动执行的  .....}

　　　　　　　　a.  直接调用: 名字() ;

　　　　　　　　b.  事件调用: 元素.事件=函数名.  如(某个div.onclick=函数名;)

　　　　　　2>function (){}    匿名函数

　　　　　　　　调用：元素.事件 = function (){}

　　　　注: 让函数里面的东西执行，采用调用方法

                函数包括有名函数和匿名函数，有名函数可以让代码重用。

　（6）测试：( 用alert进行测试，要保持一种随时写随时测的习惯 )

　　　　alert(1)； 带一个确定按钮的警告框

　　　　alert('ok');     'ok' 字符串

　　　　alert("ok");

　　注：单引号和双引号都可以，要看公司标准