一、js大致思路：
1、完成静态HTML+CSS
2、过一遍整体的大致js思路
3、按照从上到下的，从有至无的顺序完成js编写（包括先写大致轮廓，再细化细节部分）
4、调试代码
二、要点：
1、html编写时最好保持结构一致，达到代码清晰易维护的目的
2、js事件委托的运用
3、简化代码，当同一段代码出现两次以上的时候，考虑写成函数形式
4、button按钮最好用a标签制作，减少input(submit),不必要的表单提交
5、js中变量的合理利用
6、href="javascript:;" 和 href=""以及href="#"的区别：
"＃"包含了一个位置信息,默认的锚点是＃top 也就是网页的上端,a href ="#" 不会刷新页面，会回到页面顶部。
a href ="" 默认打开的还是当前页面，会刷新一下重新打开。
而javascript:void(0) 仅仅表示一个死链接
这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首, 而javascript:void(0) 则不是如此,所以调用脚本的时候最好用void(0)
注意点：要执行某些处理，但是不整体刷新页面的情况下，可以使用void (0),但是在需要对页面进行refresh的情况下
7、window.onload = function(){} 能改变代码执行顺序，待HTML页面执行完成之后再执行此部分的内容
8、元素移除的方法：
display:none;
visibility:hidden;
width/height(0);
透明度（opacity）;
left/top;
白色div遮盖；
margin(负值或超大)……
9、事件：鼠标事件、键盘事件、系统事件、表单事件，元素添加事件的方法：（obj.事件名）
10、函数：不会主动执行，调用方法：直接调用abc(); 事件调用 元素.事件名=函数名/匿名函数
11、获取元素的方法：
a. var oDiv = document.getElementById('id'); //命名方法：o标示一个元素对象object，a表示一堆元素对象array
b. var aLi = [ document | obj ].getElementsByTagName('标签名');
（1）获取的时候是以数组的形式给出，所以即使该元素只有一个，也必须写成obj.getElementsByTagName('div')[0]; 的形式。
（2）是动态方法（在开头处寻找元素，在中间动态创建元素，在末尾输出元素，得到的结果是所有的），区于getElementById，是静态方法，若在寻找元素的行以前没有找到元素，后面重新创建元素将会找不到。
b. H5新增方法， 缺陷：1、兼容性不太好（IE8以下不兼容）。2、非动态实时（动态创建的元素不会被选中）。3、使用包含选择器时，会包含祖先元素在内。
document.querySelector('css selector'); 匹配指定 CSS 选择器的第一个元素 eg. document.querySelector('#div, .class, div');
document.querySelectorAll(css selector'); 匹配指定CSS选择器选择的所有元素