一个简单的函数可实现变长效果：
function setWidth() {
var box = document.getElementById("box");
box.style.width = "400px";
}
看起来变色变高只需把上述代码重复一遍，稍加改动就可以了。但是为了代码的高效和简洁，要尽量避免重复。
function setStyle(x, y) {
var box = document.getElementById("box");
box.style.height = x + "px";
box.style.background = y;
}
上面的函数分别用两个形参x和y代表高和背景色，解决了代码重复的问题。实际上可以把三个效果分别用三个形参表示，一个函数解决所有问题。
补充：
1.页面从上而下的解读代码，未解读的部分直接调用会没有效果，实际上大部分的bug考虑到这点都是能避免的。
2.js中所有用.的部分，都可以用[""]代替。一般来说用.方便，有些时候不能用点的地方就只能用[""]。
3.js中用“”包裹起来的是字符串，一句语句里不能定下来的会变化的东西用变量表示，能定的不会变化的用字符串即常量表示。
4.通过style添加或读取是针对的行间样式。 因为行间样式的优先级最高，通过className（类）加的效果会不起作用，所以对于同一个元素始终使用行间或className二者中任意一种而不是混着来是非常有必要的，一般使用className（类）而不是行间样式。
while循环：
var i=1; 初始化
while(i<5){ 条件
alert(i); 语句
i++ 自增
}
for循环写法更加简单：
for(var i=1;i<5;i++){ 初始化+条件+自增
alert(i); 语句
}
全选不选及反选，复选框：
window.onload = function () {
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var div1 = document.getElementById("div1");
var ckd = div1.getElementsByTagName("input"); 注意：这里从div1中提取TagName。
btn1.onclick = function () {
for (i = 0; i < ckd.length; i++) {
ckd[i].checked = true;
}
}
btn2.onclick = function () {
for (i = 0; i < ckd.length; i++) {
ckd[i].checked = false;
}
}
btn3.onclick = function () {
for (i = 0; i < ckd.length; i++) {
// 注意：这里要用==号。
if(ckd[i].checked == true){ 前面用=是将值赋给checked属性，这里做判断用==判断checked的值是否为true。
ckd[i].checked = false;
}else{
ckd[i].checked = true;
}
}
}
}
this的使用：this可指代当前事件的按钮（事件的载体 一般为标签）。
索引值：需要确定“第几个”的时候，是玩家自己创建的对象。使用html添加会被浏览器过滤，使用js添加则不会。
innerHTML：js添加某标签的内容，可识别html结构。
选项卡的实现：
核心思路：
按钮：先清空所有按钮，再选中当前按钮。
内容：先隐藏所有div，再显示当前div。
window.onload = function () {
var div1 = document.getElementById("div1");
var btn = div1.getElementsByTagName("input");
var div = div1.getElementsByTagName("div");
这里用循环减少重复代码 ：
for (i = 0; i < btn.length; i++) {
这里用js给input标签添加index属性（index是玩家自创的），目的是给这几个标签排号方便操作。
btn[i].index = i;
btn[i].onclick = function () {
for (i = 0; i < btn.length; i++) { 循环都是为了减少代码量，这里也是精简重复的代码。
btn[i].className = ""; 清空所有按钮的class
div[i].style.display="none"; 隐藏所有div
}
this.className = "active"; 选中当前按钮
div[this.index].style.display = "block"; 显示当前div
}
}
}
简易日历实现：
思路：日历按钮原理与选项卡一致，内容部分采用innerHTML添加标签的内容。
typeof：判断目标的数据类型。
==：双等号先将等式两边数据转换为同一类型再比较。
===：全等号不转换直接比较。
数据显式类型转换（强制类型转换）：
parseInt:将字符串转为数字（整数），原理为从左到右读取字符串，遇到第一个非数字字符串就跳出去返回结果。
parseFloat：将字符串转为数字（小数），原理同上。
隐式类型转换：
无具体代码指示，在需要的时候计算机自动判断转换数据类型。
变量必须用var声明，在函数内部var声明属于局部变量，在函数外部var声明 属于全局变量。
闭包：子函数可以使用父函数的局部变量。
变量命名遵循匈牙利命名法：
类型前缀：数组a 、布尔值b、 浮点数f 、 函数fn 、整数i 、对象o 、 正则表达式re 、字符串s 、变体变量v、
驼峰命名：单词的首字母大写。
取模：%（取余）。
+=：例：i=i+1，i+=1，i++都是一样的意思。其中i++只能加1，若想i=i+4 则只有i+=4这两种写法。
if用于范围判断，switch用于精确判断：
switch（变量）{
case 值1：
语句一；
break； 跳出/中断 （整个循环） 相应的continue；跳出/继续（跳出本次但继续）
case 值2：
语句二；
break；
......
default:
语句n；
break；
}
判断语句也可以用三元运算符简写：条件？条件成立语句：条件不成立语句；
数据的真假：所有非零非空的“有东西”的数据为真，反之为假。
当下十分流行的json格式：
json和数组很像，举个例子
var json={a:12,b:3,c:6};
var arr=[12,3,6];
alert( json.a ) ; 等效于alert（json["a"]）; 等效于 alert( arr[0] ) ;
很相似，但是json的下标是字符串，数组的下标是数字。
json是很简单的数据，定义了什么 就有什么 没定义的就没有。比如数组有length，json就没有。
数组和json主要用于循环：
for（var i=1;i<arr.length;i++）{
alert("haha");
}
但json没有length，所以他使用另一种for in循环。
for（var i in json）{
alert（“哈哈哈”）；
}
数组也可以用for in：
for（var i in arr）{
alert（“哈哈”）；
}
但是for in循环最好还是用在json上，数组还是用for循环不容易出错。
json可以直接像变量一样操作：json.a++
简单的求和函数：
function sum() {
var result = 0;
for (i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
}
alert(sum(3,15,26));
其中arguments是函数的可变参（不定参），不定参是个数组，意味着函数的参数个数可能是无限的。
兼容IE和W3C标准浏览器的获取非行内样式函数：
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle.name;
}else{
return obj.getComputedStyle(obj,false).name;
}
}
push（元素）:数组从尾部添加。
pop（）：数组从尾部删除。
unshift（元素）：从头部添加。
shift（）：从头部删除。
splice（起点，长度，元素），其中包含起点，长度指几个。
可实现添加（起点，0，元素），删除（起点，长度），替换（先删除再添加）。
var a=[1,2,3];
var b=[4,5,6];
连接数组：a.concat(b); (就变成1，2，3，4，5，6)
连接符：a.join(0.0); （就变成10.0，20.0，3）
数组排序：a.sort（）；用来排字符串，原理为按首字母顺序排。
数字排序：因为sort只能识别字符串，所以这里用一个“比较函数”帮助sort排序数字。
a.sort（function（n1，n2）{
return n1-n2; 数字从小到大排序。
}）;
定时器：setInterval（函数，毫秒（不带单位））；每隔一段时间执行一次
setTimeout（函数，毫秒）；隔一段时间执行函数。
清理定时器：clearInterval（定时器）；
简单的例子：
<style>
div {
float: left;
margin: 10px;
}
#div1 {
width: 100px;
height: 50px;
background: red;
}
#div2 {
width: 400px;
height: 200px;
background: gray;
}
</style>
<script>
window.onload = function () {
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var timer = null; //变量先声明，否则下面用就undefinded；
oDiv2.onmouseover = oDiv1.onmouseover = function () {
clearTimeout(timer); //每次先清理定时器，以免定时器叠加；
oDiv2.style.display = "block";
}
oDiv2.onmouseout = oDiv1.onmouseout = function () {
timer = setTimeout(function () {
oDiv2.style.display = "none";
}, 500);
}
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
