-
告诉浏览器一旦加载页面就运行初始化js函数initPage，则
window.onload=initPage; Ajax应用必须要求JavaScript。
-
对字符串进行转码，使之成为合法的url。使用
escape(url);即可完成转码，例如
escape("calculate 1+2*3/4 & 5^5>1");输出
calculate%201+2*3/4%20%26%205%5E5%3E1 -
得到一个请求对象（兼容所有浏览器）
function createRequest(){ try{ request=new XMLHttpRequest(); //在Safari、Firefox、Opera中可以，但不支持IE }catch(tryMS){ //若是IE，则上述代码异常 try{ request=new ActiveXObject("Msxml12.XMLHTTP"); }catch(otherMS){ try{ request=new ActiveXObject("Microsoft.XMLHTTP"); }catch(failed){ //若都没有，则返回空 request=null; } } } return request; } -
注意，上述工具函数中，定义的request是没有var修饰的。JavaScript规定，如果在函数中没有var修饰的变量则成为全局变量，当该函数至少运行一次后，你可以在全局范围内找到一个叫做request的变量。另一方面，考察下面代码
function get(){ a={name:"Tom"} return a; } var b=get(); var c=get(); console.log(b===a); //false console.log(c===a); //true但是
function get(){ a={name:"Tom"} return a; } var b=get(); var c=get(); var d=get(); console.log(b===a); //false console.log(c===a); //false console.log(d===a); //true这似乎说明了，如果函数中声明一个全局对象并返回，则最后一个调用该函数的变量得到该全局对象的引用，而其他调用该函数的变量则得到副本。
-
一个通常的请求流程：GET
request=createRequest(); var url="http://....?"+escape("A=a&B=b"); //编码数据 request.open("GET",url,true); //true代表是异步过程 request.onreadystatechange=callback; //设置回调函数（直接写函数名即可） request.send(null);如果是一个POST方法，则
request=createRequest(); var url="http://...."; //不需要编码数据，不需要？问号 request.open("POST,url,true); //true代表是异步过程 request.onreadystatechange=callback; //设置回调函数（直接写函数名即可） data=escape("A=a&B=b"); //数据放这里 request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //非常重要，设置首部，表示数据是"key1=value1&key2=value2"形式。 request.send(data); //发送数据 -
注意上面的<code>onreadystatechanged</code>的属性，它是用来设置回调函数。每次服务器响应，就会改变请求对象request的readyState属性，触发回调函数，这就是说，此处的回调函数可能不止调用一次。我们希望当服务器处理完全后再执行回调逻辑，那么就要在回调函数中判断readyState的值，只有当它等于4时才表示服务器处理完全。
回调函数看起来像是这样
function callback(){ if(request.readyState==4&&request.status==200){ ..... } }上述中，readyState属性等于4代表服务器处理完全，status属性200代表OK，服务器认为一切正常。
- readyState=1 请求准备好可以发送（初始）
- readyState=2 服务器正在处理
- readyState=3 部分数据已下载到请求对象中，但是还没有完全弄好还不能使用
- readyState=4 请求处理完毕，响应数据可以开始使用
服务器返回的数据都存储在<code>request.responseText</code>中，同时，如果服务器发回的是XML的数据，则<code>request.responseXML</code>中会存储一个XML的DOM（当然在<code>request.responseText</code>也有XML的朴素文本）
-
使用CSS控制页面的变化，即用JavaScrip来动态改变元素的class，使得CSS选择器可以匹配并更改元素的显示
document.getElementById('element').className="CSS_Class_Name"; -
禁用按钮
document.getElementById('button').disabled=true; -
获取输入焦点
document.getElementById('button').select(); document.getElementById('button').focus(); 元素设置title属性，则当鼠标移动该元素上面的时候就会弹出悬浮框提示。
-
函数的<code>this</code>指向问题（仅在非IE时）。在下面的例子中，this指向不同的元素
<button type="button" id="b1"> 按钮1 </button> <button type="button" id="b2"> 按钮2 </button> .... <script type="text/javascript"> function myOnClick(){ console.log(this.id); }; document.getElementById('b1').onclick=myOnClick; document.getElementById('b2').onclick=myOnClick; </script>那么，点击两个按钮后，分别在控制台输出“b1”、“b2”字样。这是因为该函数被赋给不同的元素，那么他们的this指针也就指向相应元素的实体。
但是，如果是（注意里myOnClick有括号，而上面的例子中没有括号）<code><button type="button" id="b1" </code>onclick="myOnClick()"<code>> 按钮1 </button></code>，那么输出结果就不一定了，this此时不是指向该元素本身，我们会在下面看到。
-
在上一条中，因为<code>document.getElementById('b1').onclick=myOnClick;</code>，我们说b1这个元素是myOcClick函数的拥有者，所以其内的this指向b1元素。但是在如下语句中
<button type="button" id="b1" onclick="myOnClick()">按钮</button>myOnClick内的指针将不再指向b1元素，因为此时它是调用者而不是拥有者。你可以看到很大的不同：myOnClick后面有括号。这就是说，其调用时，会把onclick这个字符串送入eval中计算直接执行，而不是调用click()本身。
-
函数的<code>this</code>指向问题（在IE时）。在IE中，哪怕下面的代码：
<button type="button" id="b1"> 按钮1 </button> <button type="button" id="b2"> 按钮2 </button> .... <script type="text/javascript"> function myOnClick(){ console.log(this.id); }; document.getElementById('b1').onclick=myOnClick; document.getElementById('b2').onclick=myOnClick; </script>其中myOnClick的this都不会指向具体某个元素，而是指向IE事件框架。为了能够获取点击的是哪一个元素，我们可以使用attachEvent、addEventListener提供的一个参数来取得。具体见后。
给元素指定多个触发函数（如oncick），则以最后一个为准。
-
在支持DOM LEVEL 2（如Mozilla的浏览器）的JavaScript中，可以给元素设置addEventListener，使得对于一个触发事件可以触发多个回调函数。
document.getElementById("button1").addEventListener("click",callback,isCapture); document.getElementById("button1").addEventListener("mouseover",callback,isCapture);
注意第一个参数，事件没有on前缀关于这个函数的第三个说明，可以点击<a href="http://www.jianshu.com/p/37c50041783b" title="关于JavaScript的addEventListener第三个参数的注记">此文章</a>来查看。
**注意！** 注册的事件的调用是随机的。你可能认为会按照addEventListener定义的顺序来执行的事件，有时候实验结果也确实是这样，但是这是不对的。它的顺序是不被保证的。
-
但是IE不支持DOM LEVEL 2，因此addEventListener不会在IE上生效。但是，IE提供了attachEvent方法
document.getElementById("button1").attachEvent("onclick",callback);注意！第一个参数，事件名有on前缀。
其效果与下面等价
document.getElementById("button1").addEventListener("click",callback,true);因此你可以看到，IE只支持事件冒泡（请查看<a href="http://www.jianshu.com/p/37c50041783b" title="关于JavaScript的addEventListener第三个参数的注记">此文章</a>）。
-
由于IE的事件函数内部不支持this（它指向IE事件框架而不是被触发元素本身）。attachEvent、addEventListener提供了一个参数——一个Event类型参数，它有两个最重要的属性：
- type 被触发的事件名，如“mouseover”、“click”
- target 即被触发的对象本身
但是，IE7传入的Event对象用srcElement来表示target。而更早版本的IE则使用window.srcElement来代替这个Event对象的srcElement。
编写一个事件处理函数，最好避开<code>this</code>
我们可以用下面的工具函数来综合上面的方法
/*事件处理程序callback得到一个Event对象，使用这个 工具函数来获得对应的被激发对象*/ function getActivatedObject(e){ var obj; if(!e){ //表示是早期的IE，它不传入e，而是用window obj=window.event.srcElement; }else if(e.srcElement){ //IE7及之后的版本 obj=e.srcElement; }else{ //DOM LEVEL 2 obj=e.target; } return obj; } 每个节点都有一个parentNode节点，可以得到它的父节点，但它是只读的。<code>appendChild(newNode)</code>作用在父节点上，用以向父节点插入一个子节点，但是它是插到最后一个子节点之后。并且插入的子节点自动获得该父节点。
- 使用parentNode可以读取父节点
- 父节点使用childNodes可以获得子节点数组；
- 子节点使用nextSibling或者previousSibling获得兄弟元素
在html页面上，所有内容都有相应的结点，包括空格。文本结点有<code>nodeName</code>属性，其值是<code>#text</code>，文本内容储存在<code>nodeValue</code>中；图片结点有<code>nodeName</code>属性，其值是<code>img</code>，等等。因此，想要的得到第一个结点，使用firstNode时要判断是不是文本结点，如果是判断是不是空白结点，如果是则使用nextSibling检测下一个。
Math.floor(Math.random()*2000);获得0~1999之间的随机数。
-
创建一个属性：
var attr=document.createAttribute("name","value");插入属性
document.getElementById("...").setAttributeNode(attr);或者直接给结点设置属性：
document.getElementById("...").setAttribute("name","value"); -
假设一个字串jsonString，它里面是JSON格式数据，那么可以使用如下JavaScript语句解析：
var json=eval("("+jsonString+")");注意！必须用括号括起来，否则无法正确解析
但是，使用eval存在安全隐患，则可以使用json网站提供json2.js的
var json=JSON.parse(jsonString); -
如下函数可以用来判断是不是数组
function isArray(arr){ if(typeof arr=='object'){ var isArray=arr.constructor.toString().match(/array/i); return isArray!=null; } return false; }
