JavaScript：基礎知識
JavaScript基礎知識
1、標籤組使用
<script
charset=’utf-8’ //設置字元集
defet //使腳本延遲到文檔解析完成，Browser已忽略
language=’javascript’ //設置語言，已廢棄
src=’url’ //引用外部檔，可選
type=’text/javascript’ //必選，language替代品
>代碼</script>
列印JavaScript結尾符(外部引用可直接打)：‘<scr’+’ipt>’);
src引用JS後，不要在<script>和</script>之間加任何語句
2、判斷是否支持JavaScript
<noscript> 您沒有啟用JavaScript支持 </noscript>
<script type=’text/javascript’><!--語句--></script>
3、JavaScriptの核心是ECMAScript
首字母必須是字母、_或$
其他字母可是字母、_、$或數字
不可使用關鍵字、保留字、true、false、null
4、注釋
單行： //語句或文字
多行： /*
語句或文字
*/
多行美觀版： /*
*語句或文字
*/
5、數據類型
undefined、Boolean、string、number、object(含null)、function
初始化：
var box=’’; //字串初始化
var box=0; //數值初始化
var box=false; //布爾值初始化
6、Boolean型
每個類型の值都有對應的Boolean值
Stringの非空為真，空為假
Numberの非零為真，0為假
Objectの非null為真，null為假
undefined為假，其餘為真
7、Number類型
浮點型範圍：Number.MIN_VALUE到Number.MAX_VALUE
正無窮：Number.POSITIVE_INFINITY
負無窮：Number.NEGATIVE_INFINITY
是否超範圍：isFinite()
NaN：Not a Number(非數值)
如：0/0、12/0*0
是否NaN類型：isNaN()
NaNの類型：Number.NaN、NaN+1
Number()將非數值轉換成數值型
Number(‘’) //0
Number(null) //0
Number(false) //0
Number(true) //1
Number(undefined) //NaN
Number(‘345’) //345
Number(032) //26 八進制
Number(‘032’) //32
Number(‘08.90’) //8.9
Number(‘12A21’) //NaN
parseInt()把字串轉為字元型
parseInt(‘34M’) //34
parseInt(‘M51’) //NaN
parseInt(‘3M2’) //3
parseInt(‘12.34’) //12
parseInt(‘’) //NaN
parseInt(‘0xAF’) //175 十六進制
parseInt(‘070’) //56 八進制
第二個參數用於解決進制問題
parseInt(‘AF’,16) //175
parseInt(‘70’,8) //56
parseInt(‘1010’,2) //10
parseFloat()將string型轉為float型，不可識別十六/八進制
parseFloat(‘123M’) //123
parseFloat(‘0xA’) //0
parseFloat(‘123.4.5’) //123.4
parseFloat(‘012.300’) //12.3
parseFloat(‘1.2e3’) //1200
8、轉義字元
\n：換行 \t：製錶 \’：’ \r：回車 \xnn：十六進制のASCII
\\：\ \b：空格 \”：” \f：換頁 \unnn：Unicode值の符號
ASCII對應の十六進制 eg：\x2B：+
String.fromCharCode(2B)； //+，返回ASCII值對應的字元
0-9：30-39 A-Z：41-5A a-z：61-7A
Unicode值與對應の字元
6EE1：滿 6eff：滿 5B5D：孝 96EA：雪 306e：の 9ed1：黑
51ac：冬 6f2B：漫 85CF：藏 85e4：藤 98C4：飄 51B0：冰
toString()將值轉換成字串
var box=10;
box.toString(); //10，默認
box.toString(2); //1010，二進制
box.toString(8); //12，八進制
box.toString(16); //a，十六進制
若不知是否為null或undefined(toString()不可轉此二者)，可用string()轉換
String(null); //null
String(undefined); //undefined
age=++box; //先box+1，再將值賦給age
age=box++; //先將值賦給age，再box+1
age=--box; //先box-1，再將值賦給age
age=box--; //先將值賦給age，再box-1
-、--、+、++對數值字串有隱形轉換類型功能
將false轉為0，true轉為1
+box：取正 -box：取負
加法の特殊：
1+’’;//1 1+NaN;//NaN 1+2; //3 Infinity+Infinity;//Infinity -Infinity+Infinity;//NaN
100+’100’;//100100 ‘abc’+10+20;//abc1020 10+20+’abc’;30abc ‘abc’+(10+20);//abc30
特殊の運算：var box={}; box=12+box; //新box為string型
減法の特殊：Infinity-Infinity;//NaN 100-’Lee’;//NaN 100-’70’;//30
乘法の特殊：100*’’;//0 10*null;//0 100*NaN;//NaN 100*true;//100 100*’Lee’;//NaN
除法の特殊：100/’’;//Infinity 100/’Lee’;//NaN Infinity/-Infinity;//NaN
求餘の特殊：100%null;//NaN 100%’Lee’;//NaN Infinity%Infinity;//NaN 100%true;//0
9、關係運算符
規則： ①若皆為數值，則比較
②若皆為字串，則比較首字元のASCII碼值
③首為數字，則轉為數進行比較
④false轉為0，true轉為1
⑤null與undefined相等
⑥NaN與任何值都不相等(含其自身)
⑦{}=={} //false，比較的是他們の地址
⑧undefined==0; null==0; //false
符號： ===(恆等)、!===(非恆等) 在此比較上，null和undefined不會轉為0，’’會轉為0
邏輯運算符：&&(與)、||(或)、!(非)
與（&&）的規則是：
第一項的Boolean值為false，則返回第一項的值
第一項的Boolean值為true，則返回第二項的值
簡記：一假返一，一真返二
與：一假為假，全真為真
或（||）的規則是：
第一項的Boolean值為true，則返回第一項的值
第一項的Boolean值為false，則返回第二項的值
簡記：一真返一，一假返二
或：一真為真，全假為假
非（!）的規則是：
false：非空字元串、非零數值(含Infinity)、對象
true：0、NaN、null、undefined、空字元串
Boolean()與!!の結果一樣
10、判斷語句
a?b:c; //若a為true則執行b，否則執行c
IF單句：if (條件) 語句；
IF復合語句：條件轉為Boolean類型進行判斷
if (條件){
語句;
}else{
語句;
}
或 if (條件){
語句;
}
IF分支語句：
if (條件){
語句;
}else if{
語句;
}
switch語句：break; 退出全循環 coutinue; 退出本次循環
switch(變量){
case 值 :
語句;
break;
default :
語句;
break;
}
do while語句：先執行一次再判斷
do{
語句;
} while (判斷語句);
while語句：先判斷再執行語句
while (判斷語句){
語句;
}
for語句：順序：先聲明，再判斷，三語句1，四語句2
for(聲明變量; 判斷; 語句2 ){
語句1;
}
for in語句：
for (var p in 對象){
語句;
}
with語句：將作用域設置到同一個對象中
var n=box.name; var a=box.age; var h=box.height;
等價於：with(box){
var n=name; var a=age; var h=height;
}
11、函數：
構造函數： function 函數名 (參數1,參數2……){
語句;
return 對象/值; //return還有一共能就是退出函數，即return之後の語句不再執行
}
動態用參： function box() {
if (arguments.length==0) return 對象/值;
for (var i=0; i<argument.length; i++){
語句;
return 對象/值;
}
}
創建方法： var man= new box(); ( new可省略，即var man= box(); ) 或 var man=box;
調用方法： man或man();
運行方法： man()或man()();
對象(屬性)賦值： box.name=’man’;
或 var box={
name=’man’,
……
}
給對象(屬性)創建方法： var box={
name : ‘man’,
run : function(){}
}
刪除對象：delete box.name;
空對象：var box={};
匿名對象：box({});
function調用：function box(obj){
if (obj.name!==undefined)語句;
}
13、數組
數組中可以是對象、字串、數值、數組等也可混用；
創建數組： var box=new Array();
var box=new Array(10); //new 可省略
var box=(‘man’,28,’華人’)
字面量法：
var box=[];
var box=[‘Man’,28,’華人’]
屬性： box.lenght; //獲取元素個數
box.lenght=10; //設置元素個數
box[box.lenght]=’js’; //給數組尾部加一個元素
堆棧： push()、pop() 後進先出
box.push(‘Man’); //數組尾部添加一元素，並返回新長度
box.unshift(‘xiao’,4) //數組頭部添加倆元素，並返回新長度
box.pop(); //移出最後一元素，並返回移出的元素
box.shift(); //移除數組頭部的元素，並返回移除的元素
box.join(‘|’); //返回用|分開的字串
box.reverse(); //逆向排序，並將結果返給原數組
box.sort(); //從小到大排序(依字串法，即2>10)，結果返給原數組
基於當前數組建立新數組
var box2=box.concat(‘man’); //創建新數組並添加元素
box.slice(1); //從boxの第2個元素開始取，剩下の全取
box.slice(1,2); //取box第1元素到第2個元素，且將取出的元素從原數組中刪除
box.splice(0,2) //從box第1元素開始取2個元素
box.splice(1,0,’a’,’man’) //在box第1個元素後截取0個，插入2個（插入）
box.splice(1,1,100) //在box第1個元素後截取1個，插入1個（替換）
14、日期對象
創建：var date=new Date(); //返回類型：Mon Jun 13 2011 00:00:00 GMT+0800
Date()中可接收の類型：除Date.parse()和Date.UTC()所支持の類型，還可接收毫秒數和
方法： Date.parse(); //接收一表示日期の字串，並返回毫秒數
可接收の類型：6/3/2011、May 25,2004、Tue May 25 2004 00:23:22 GMT-070
Date.UTC(年,月,日,時,分,秒,毫秒) //前二者必須，返回毫秒數
月份為0-11，此日期為0時區，若在中國，會自動加上8h
格式化：date.toString(); //Thu Nov 15 2006 17:22:32 GMT+8
date.toLocaleString(); //2007-11-23 14:22:33
date.valueOf(); //返回毫秒數
date.toDateString(); //以特定的格式顯示星期幾、月、日和年
date.toTimeString(); //以特定的格式顯示時、分、秒和時區
date.toLocaleDateString(); //以特定地區格式顯示星期幾、月、日和年
date.toLocaleTimeString(); //以特定的格式顯示時、分、秒和時區
date.toUTCString(); //以特定的格式顯示完整的 UTC 日期
組件方法：
box.getTime(); //獲取日期的毫秒數，和 valueOf()返回一致
box.setTime(100); //以毫秒數設置日期，會改變整個日期
box.getFullYear(); //獲取四位年份
box.setFullYear(2012); //設置四位年份，返回的是毫秒數
box.getMonth(); //獲取月份，沒指定月份，從 0 開始算起
box.setMonth(11); //設置月份
box.getDate(); //獲取日期
box.setDate(8); //設置日期，返回毫秒數
box.getDay(); //返回星期幾，0 表示星期日，6 表示星期六
box.setDay(2); //設置星期幾
box.getHours(); //返回時
box.setHours(12); //設置時
box.getMinutes(); //返回分鐘
box.setMinutes(22); //設置分鐘
box.getSeconds(); //返回秒數
box.setSeconds(44); //設置秒數
box.getMilliseconds(); //返回毫秒數
box.setMilliseconds(); //設置毫秒數
box.getTimezoneOffset(); //返回本地時間和 UTC 時間相差的分鐘數，除此外，其他都有UTC功能，即中國のgetHours與getUTCHours相差8小時
15、正則表達式
創建： var box=new RegExp(‘box’ , ’ig’) //i:忽略大小寫；g:全局匹配；m:多行匹配
var box=/box/ig;
var box=new RegExp(‘box’);
var box=/box/;
檢測與替換：/box/i.test(‘This is a Box!’); //一句話法
box.test(str); //判斷str中是否有box，有返true
box.exec(str); //判斷str中是否有box，有返數組，無返null
str.match(box); //判斷str中是否有box，有返數組，無返null
str.search(box); //判斷str中是否有box，返回第一個匹配位置
str.replace(box,’tom’) //把str中匹配的box替換為tom，開啟全局模式，全換
str.split(box) //把str中匹配的box作為分割符生成一數組
靜態屬性： 屬性 ： 短名 ： 含義
input ： $_ ： 被匹配的字串
lastMarth ： $& ： 最有一個被匹配的字串
lastParen ： $+ ： 最後一對()匹配的字串
leftContext ： $` ： 最後一次匹配的字串
rightContext ： $’ ： 上次匹配之後的字串
multiline ： $* ： 所有表達式都用於多行布爾值
用法： box.test(str); //先執行一下
RegExp.input; //此為靜態屬性，輸出被匹配額字串，RegExp為靜態量
RegExp.[‘$_’] //第二種寫法
另注：input比較特殊，還有一種寫法：RegExp.$_，但是其他不可這麼用
實例屬性：
global：是否設置全局屬性，同g
ignoreCase：是否設置忽略大小寫，同i
multiline：是否支持換行，同m
source：正則表達式要匹配的字串
用法： var pattern = /google/ig; //需要先預先聲明
alert(pattern.global); //
這些實例屬性基本沒什麼用。並且 lastIndex 在獲取下次匹配位置上 IE 和其他流覽器有偏差，
主要表現在非全局匹配上。lastIndex 還支持手動設置，直接賦值操作。
特殊字元：
. //匹配除換行符外的任意字元
[a-z0-9] //匹配括弧中的字元集中的任意字元
[^a-z0-9] //匹配任意不在括弧中的字元集中的字元
\d //匹配數字
\D //匹配非數字，同[^0-9]相同
\w //匹配字母和數字及_
\W //匹配非字母和數字及_
\0 //匹配 null 字元
\b //匹配空格字元
\f //匹配進紙字元
\n //匹配換行符
\r //匹配回車字元
\t //匹配跳位字元
\s //匹配空白字元、空格、跳位字元和換行符
\S //匹配非空白字元
^ //行首匹配
$ //行尾匹配
\A //只有匹配字串開始處
\b //匹配單詞邊界，詞在[]內時無效
\B //匹配非單詞邊界
\G //匹配當前搜索的開始位置
\Z //匹配字串結束處或行尾
\z //只匹配字串結束處
x? //匹配 0 個或 1 個 x
x* //匹配 0 個或任意多個 x
x+ //匹配至少一個 x
(xyz)+ //匹配至少一個(xyz)
x{m,n} //匹配最少 m 個、最多 n 個 x
this|where|logo //匹配 this或where或logo中任意一個
(string) //用於反向引用的分組
\1 或$1 //匹配第一個分組中的內容
\2 或$2 //匹配第二個分組中的內容
\3 或$3 //匹配第三個分組中的內容
捕獲性分組和非捕獲性分組
var str = '123abc'; var pattern = /(\d+)([a-z])/; //捕獲性分組，即普通分組
alert(pattern.exec(str));
var str = '123abc'; var pattern = /(\d+)(?:[a-z])/; //非捕獲性分組，即不獲取其分組，標誌就是?:
alert(pattern.exec(str)); //返回123a，123；不返回a
使用分組嵌套
var str = 'ABC'; var pattern = /(A?(B?(C?)))/; //從外往內獲取
alert(pattern.exec(str)); //返回ABC , ABC , BC , C
使用前瞻捕獲
var str = 'google'; var pattern = /(goo(?=gle))/; //goo 後面必須跟著 gle 才能捕獲
alert(pattern.exec(str));
使用特殊字元匹配
var str = '.[/b]'; var pattern = /\.\[\/b\]/; //特殊字元，用\符號轉義即可
alert(pattern.test(str));
使用換行模式
var str = '1.baidu\n2.google\n3.bing'; var pattern = /^\d+/mg; //啟用了換行模式
var result = str.replace(pattern, '#'); alert(result);
常用の正則運算式
郵遞區號：/[1-9][0-9]{5}/) //共 6 位數字，第一位不能為 0
郵箱地址：/^([\w\.\-])+@([\w\.\-]+)\.([a-zA-Z]{2,5})$/
檔壓縮包：/[\w]+\.zip|rar|gz/ //\d\w_表示所有數字和字母加下劃線
刪除多餘空格：str.replace(/\s/g,''); //g 必須全局，才能全部匹把空格匹配成無空格
刪除首空格：str.replace( /^\s+/, '');
刪除尾空格：str.replace(/\s+$/, '');
刪除首尾空格：str.replace(/^\s*(.+?)\s*$/);
替換用法：
pattern.exec(str)[1];
str.replace(pattern,’$1’)
16、function類型
變數聲明：
1.普通的函數聲明
function box(num1, num2) {return num1+ num2;}
2.使用變數初始化函數
var box= function(num1, num2) {return num1 + num2;};
3.使用 Function 構造函數
var box= new Function('num1', 'num2' ,'return num1 + num2');
function內部自身調用
arguments.callee()
this代表作用域，全局模式下為window
匿名函數沒有自身域，他のthis代表父層
實名函數的作用域為傳遞來的參數對象的
box.length //獲取參數個數
作用域改變：不傳參數，box和apply用法相同，區別只在傳參
box.call(dog); //將boxの作用域放在dog下
box.apply(this); //將boxの作用域放在上一層域內
box.call(); //同上，
box.call(window); //將boxの作用域放在window下
box.apply(dog,num1,num2) //將n1、n2傳入到box中，在dog域內使用相當於dog{box(n1,n2);}
box.call(dog,[num1,num2]) //同上
17、變數、作用域及記憶體
基本類型（複製の都是值）：undefined、null、Boolean、number、string
引用類型（複製の都是地址）：object
JavaScriptのfunction參數不會按引用傳遞，都是按值傳遞。
引用類型檢測：instanceof
如：box instanceof Array
類型名：Array、Object、RegExp、String
作用域：
局部環境中の變數在環境被銷毀後隨之銷毀
全局變數在執行完程式或網頁被關閉才被銷毀
局部變數編程全局變數，省略var即可，即直接賦值
變數查詢中，訪問局部變數要比全局變數更快，因為不需要向上搜索，當局部變數不存在時，會向父層搜索。
JavaScriptの記憶體垃圾搜集器週期性的自動運行。
解除引用，等待回收（內置變數不可解除）：box=null;
18、三類特殊引用類型
使用new定義的Boolean、String、Number三中類型可以為自己添加屬性和方法。
字面量法定義則不可添加屬性和方法，但此二法皆可用內置方法。
不建議使用new添加屬性和方法。
比如：var box = new String('Mr. Lee'); //new 運算符
box.name = 'Lee'; //自定義屬性
box.age = function () {}; //自定義方法
Numberの靜態方法（直接用Number加屬性）
Number.MAX_VALUE //表示最大數
Number.MIN_VALUE //表示最小值
Number.NaN //非數值
Number.NEGATIVE_INFINITY //負無窮大，溢出返回該值
Number.POSITIVE_INFINITY //無窮大，溢出返回該值
Number.prototype //原型，用於增加新屬性和方法
Number對象の方法（var a=123 ; a.toString();）
toString() //將數值轉化為字串，並且可以轉換進制
toLocaleString() //根據本地數字格式轉換為字串
toFixed() //將數字保留小數點後指定位數並轉化為字串
toExponential() //將數字以指數形式表示，保留小數點後指定位數並轉化為字串
toPrecision() //指數形式或點形式表述數，保留小數點後面指定位數並轉化為字串
用法：var num=123; num.toFixed(2);
String對象の方法與屬性（var a=’China’ ; a.length;）
length //返回字串的字元長度
constructor //返回創建 String 對象的函數
prototype //通過添加屬性和方法擴展字串定義
charAt(n) //返回指定索引位置的字元
charCodeAt(n) //以 Unicode 編碼形式返回指定索引位置的字元
concat(str1,str2) //將字串參數串聯到調用該方法的字串
slice(n,m) //返回字串 n 到 m 之間位置的字串
substring(n,m) //同上
substr(n,m) //返回字串 n 開始的 m 個字串
slice(n)、substring(n)、substr(n) //n為正數，三者功能相同，從n為開始之後全返
slice(n)、substr(n) //n為負數，此二者功能相同，返回總長度與n之和，開始之後の所有字串
substring(n) //n為負數，全返
slice(-a,-b) //若其長為l，等價於slice(l-a , l-b)，若l-b<l-a，則什麼都不返
substring(a,b) //b為負數等價於substring(0,a)，皆為負數等價於substring(0 , 0)，則無值
substr(a,-b) //等價於substr(a,0)，啥也不取
substr(-a,b) //等價於substr(l-a,b)，若l-a大於b，則無值
indexOf(str) //從頭搜索str，並返回查找到的第一個索引，若無返回-1
indexOf(str , n) //從第n個字元後搜索，並返回查找到的第一個索引，若無返回-1
lastIndexOf(str) //從尾部搜索str，並返回查找到的第一個索引，若無返回-1
lastIndexOf(str,n) //從倒數第n個字元前搜索，並返回查找到的第一個索引，若無返回-1
toLowerCase() //轉為全小寫
toUpperCase() //轉為全大寫
toLocaleLowerCase() //將字串全部轉換為小寫，並且本地化
toLocaleUpperCase() //將字串全部轉換為大寫，並且本地化
split(str) //用str作為分隔符號，把字串轉為數組
match(str) //在字串中查找str，找到返回str，否則null
replace(s1,s2) //把字串s1替換成s2
search(str) //在字串中查找str，並返回索引，若無返回-1
localeCompare(str) //比較與strの大小，返回值：1(比str首字母大)、0、-1
19、HTMLの方法（添上HTML標籤，var b=’box’;b.anchor(‘china’);//<a name=’china’>box</a>）
anchor(name) //<a name="name">str</a>
big() //<big>str</big>
blink() //<blink>str</blink>
bold() //<b>Str</b>
fixed() //<tt>Str</tt>
fontcolor(color) //<font color="color">str</font>
fontsize(size) //<font size="size">str</font>
link(URL) //<a href="URL">str</a>
small() //<small>str</small>
strike() //<strike>str</strike>
italics() //<i>italics</i>
sub() //<sub>str</sub>
sup() //<sup>str</sup>
20、UTF-8編碼與解碼
encodeURI(str); //除特殊字元與英文外都編碼
encodeURIComponent(str); //除英文外都編碼（常用）
decodeURI(str); //解碼encodeURIの編碼
decodeURIComponent(str); //解碼encodeURIComponentの解碼
eval(str) //將str解析為JavaScript語句
eval()使用時一定要注意安全，防範代碼注入
21、Mathの常量
Math.E //自然對數的底數，即常量 e 的值
Math.LN10 //10的自然對數，即ln10
Math.LN2 //2的自然對數，即ln2
Math.LOG2E //以2為底e的對數，即log2e
Math.LOG10E //以10為底 e 的對數，即log10 e
Math.PI //π的值
Math.SQRT1_2 //1/2的平方根
Math.SQRT2 //2的平方根
Math.min(3,8,0,1,3); //最小值
Math.max(1,9,6,0,3,2); //最大值
Math.ceil(25.1); //26，向上進一
Math.floor(25.9); //25，取整
Math.round(25.9); //26，四捨五入
Math.random(); //產生0-1之間の亂數（不含0和1）
Math.abs(n); //返回 n 的絕對值，即|n|
Math.exp(n); //返回 Math.E 的 num 次冪，即en
Math.log(n); //返回 n的自然對數，即logn
Math.pow(n,m); //返回 n的 m次冪，即nm
Math.sqrt(n); //返回 n的平方根
Math.acos(x); //返回 x 的反余弦值，即arccos(x)
Math.asin(x); //返回 x 的反正弦值，即arcsin(x)
Math.atan(x); //返回 x 的反正切值，即arctan(x)
Math.atan2(y,x); //返回 y/x 的反正切值，即arctan(y/x)
Math.cos(x); //返回 x 的余弦值，即cos(x)
Math.sin(x); //返回 x 的正弦值，即sin(x)
Math.tan(x); //返回 x 的正切值，即tan(x)
產生區間隨機值
Math.floor(Math.random() *總數+首值); //如a-b之間，a為首值，b-a+1為總數
22、構造函數
普通函數：
function china(參1,參2){
return 參1+參2;
}
工廠模式：即內部賦值，在內部設置屬性，外部互用時不會相互影響。無法搞清楚他們到底是哪個對象的實例
function a(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.run = function () {
return this.name + this.age + '運行中...';
};
return obj;
};
工廠模式の引用：var b=a(參數1,參數2)
構造函數：
function Box(name, age) {
this.name = name;
this.age = age;
this.run = function () {
return this.name + this.age + '運行中...';
};
}
構造函數命名規範：
1.函數名和實例化構造名相同且大寫，(PS：非強制，但這麼寫有助於區分構造函數和普通函數)；
2.通過構造函數創建對象，必須使用 new 運算符。（Box('Lee', 20); //普通模式調用，無效）
工廠模式下引用後的類型都是以object，構造函數引用後的類型都是Box
寄生構造函數：工廠模式+構造函數
function myString(string) {
var str = new String(string);
str.addstring = function () {
return this + '，被添加了！';
};
return str;
}
寄生構造函數の引用：var box=new myString();
穩妥構造函數：不讓用new和thisの情況
function Box(name , age) {
var obj = new Object();
obj.run = function () {
return name + age + '運行中...'; //直接列印參數即可
};
return obj;
}
穩妥構造函數的引用：var box=Box();
23、原型：prototype
讓所有對象實例共用他所包含的屬性和方法
不必在構造時定義對象，就可以將信息直接加到原型中
原型模式の執行流程：
1、先查找實例裏の屬性或方法，有則返回
2、若實例中無則去原型中找，有則返回
已存在屬性，想訪問原型中的，需將屬性刪除：delete box1.name
刪除原型屬性：delete Box.prototype.name
判斷屬性是否在實例中：box1.hasOwnProperty(‘name’)
判斷屬性是否可訪問(不分實例、原型)：’name’ in box1
判斷對象是否實例化：Box.prototype.isPrototypeOf(box1)
獲取構造函數名(通過實例對象)：box1.constructor //返回Box，用此判斷是否為Box的實例對象
原型重寫：將之前的信息全部刪去
Box.prototype={
constructor:Box, //不加此句，則constructor為Object
name:’Man’,
}
給原型添加屬性：
Box.prototype.name=’man’;
Box.prototype.age=function(){};
動態原型模式(不用字面量重寫原型)：
if (typeof this.run!=’function’){
Box.prototype.run=function(){}
}
繼承：
Desk.prototype=new Box(); //將box()封裝到Deskの原型中
子類從屬於自身和其父類，但字面量重寫會中斷與原型的關係，子類無法給父類傳遞參數
對象冒充，只能繼承構造裏的信息，不能繼承原型
組合模式：可以解決傳參和繼承原型，但父函數被調用兩次
function Desk(參數){
Box.call(this,參數); //冒充
}
Desk.prototype=new Box(); //繼承
寄生組合繼承：思路：①將父の原型給子の原型②子再冒充父；解決了兩次調用
①function create(sun,father){
sun.prototype=father.prototype;
sun.prototype.constructor=sun;
}
②function Sun(參數){
Father.call(this,參數)
}
③執行一次：create(Sun,Father)
24、匿名函數和閉包
匿名函數：
匿名函數的自我執行：(匿名函數)();
把匿名函數返給變數：var 變數名=匿名函數;
把匿名函數執行後的返回值給變數：var 變數名=(匿名函數)();
匿名函數的傳參：(function(參數){})(值);
閉包（內匿）：指有權訪問另一個函數作用域中的變數的函數，創建閉包的常見的方式，就是在一個函數內部創建另一個函數，通過另一個函數訪問這個函數的局部變數
function box(){
function(){}
}
調用內匿：var b=box()();
閉包運行時指向window，即閉包的this指向window，改變this有兩種方法：
①冒充(冒充的本意就是改變作用域)
②var _this=this；在閉包內用_this，代替this
為了防止記憶體洩漏，應該講變數清除，如 box=null
由於JavaScript沒有塊級作用域，即出了if、for等語句後變數仍有用
解決辦法模仿塊級作用域：即(function(){if或for語句;})(); 匿名函數的變數出匿名函數後就銷毀
私有變數的引用：在function中建立一個匿名函數，在匿名函數內將需要の值返回
對外公共界面（匿名函數）：function Box(參數){
this.set=function(參數){}; //對外公共界面
}
全局屬性：採用的是 Box = function () {} 而不是 function Box() {} 因為如果用後面這種，就變成私有函數了，無法在全局訪問到了。
Box = function () {}; //構造方法
Box.prototype.setUser = function (value) {
user = value; //user為靜態屬性，即共用於不同對象中的屬性
}
引用：var box =new Box();
對外公共界面：
return{}；或var obj={}; return obj;
增強型：
function Desk() {};
var box = function () {
var desk = new Desk(); //可以實例化特定的對象
desk.go = function () {
return age + run();
};
return desk;
}();
alert(box.go());
25、BOM：Browser Object Mode 流覽器對象
window對象の方法：
強制操作，防止流覽器不認，即在前面加上window
如：window.closed(直接用closed可能不認)
closed //當窗口關閉時為真
defaultStatus=’文本’ //在狀態欄顯示的默認文本
status=’文本’ //在狀態欄顯示文本(臨時)
document //窗口中當前顯示的文檔對象
frames //窗口中的框架對象數組
history //保存有窗口最近加載的 URL
length //窗口中的框架數
location //當前窗口的 URL
name //窗口名
offscreenBuffering //用於繪製新窗口內容並在完成後複製已存在的內容，控制屏幕更新
opener //打開當前窗口的窗口
parent //指向包含另一個窗口的窗口（由框架使用）
screen //顯示屏幕相關信息，如高度、寬度（以像素為單位）
self //指示當前窗口。
top //包含特定窗口的最頂層窗口（由框架使用）
window //指示當前窗口，與 self 等效
windowの方法
confirm(‘提示語’); //有確定和取消，返回值：確定true，取消false
prompt(‘提示語’,’初始值’); //輸入框，返回值為內值
alert(“提示語”); //只有確定
print(); //打印頁面
find(); //調用查找
blur() //將焦點從窗口移除
clearInterval(interval) //清除之前設置的定時器間隔
clearTimeOut(timer) //清除之前設置的超時
close() //關閉窗口
focus() //將焦點移至窗口
open(url,name,[options]) //打開一個新窗口並返回新 window 對象
prompt(text,defaultInput) //創建一個對話框要求用戶輸入信息
scroll(x,y) //在窗口中滾動到一個像素點的位置
setInterval(expression,milliseconds) //經過指定時間間隔計算一個運算式
setInterval(function,millisenconds,[arguments]) //經過指定時間間隔後調用一個函數
setTimeout(expression,milliseconds) //在定時器超過後計算一個運算式
setTimeout(expression,milliseconds,[arguments]) //在定時器超過時後計算一個函數
open(‘url’ [,窗口名稱或窗口目標][,特性字串])
如：open(‘http:\\www.baidu.com’,’百度’,'width=400,height=400,top=200,left=200,toolbar=yes');//百度即窗口名
窗口目標：_parent(本窗口)、_blank(新建)
特性字串：可用,分開
width:寬度 height:高度 //此二者不可小於100
top:Y座標 left:X座標 //此二者皆不可為負值
以下字串值為yes或No，IE可能支持，其他流覽器不支持。(因為其他流覽器不在支持新建單頁模式)
location:是否顯示地址欄 menubar:是否顯示菜單欄
resizable:是否允許拖動 scrollbars:是否允許滾動條
status:是否顯示狀態欄 toolbar:是否顯示工具欄
fullscreen:是否最大化
opener:表示開啟子窗の父窗
如opener.document.write(‘’); //在子窗操作可讓父窗執行
窗口位置：直接用不用加首碼
screenLeft、screenTop；除火狐外都支持
screenX、screenY；全支持
相容寫法：var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;
var topY = (typeof screenTop == 'number') ? screenTop : screenY;
窗口頁面的4個屬性：(穀歌のinner=outer)
頁面的長寬：innerWidth、innerHeight
頁面+邊框的長寬：outerWidth、outerHeight
全相容寫法：
//如果是 Firefox 流覽器，直接使用 innerWidth 和 innerHeight
var width = window.innerWidth; //這裏要加 window，因為 IE 會無效
var height = window.innerHeight;
if (typeof width != 'number') { //如果是 IE，就使用 document
if (document.compatMode == 'CSS1Compat') {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else {
width = document.body.clientWidth; //IE6非標準模式使用 body
height = document.body.clientHeight;
}
}
調整流覽器位置
moveTo(0,0); //IE 有效，移動到 0,0 座標
moveBy(10,10); //IE 有效，向下和右分別移動 10 像素
調整流覽器大小
resizeTo(200,200); //IE 有效，調正大小
resizeBy(200,200); //IE 有效，擴展收縮大小
超時調用：var time=setTimeout(語句,時間);
取消超時：clearTimeout(time);
間歇調用：var time=setInterval(fn,1000);
取消間歇：clearInterval(time);
location對象の方法：location 對象是 window 對象的屬性，也是 document 對象的屬性；
所以 window.location 和 document.location 等效，用法需在前面加上location
跳到指定頁面：location.assign(‘網址’); //網址需加上http:\\
重新加載： location.reload(); //會不停的加載
location.reload(true); //從服務器加載
不產生歷史記錄的跳轉：location.replace(‘網址’);
location.hash //如果該部分存在，表示獲取錨點部分
location.host //獲取主機名：端口號
location.hostname //獲取主機名
location.href //獲取整個 URL即絕對file:///D:/Windows/APP/AppServ/www/JS/1st.html
location.pathname //獲取路徑名
location.port //獲取端口號
location.protocol //獲取協議部分
slocation.search //獲取查詢字串即URL裏?之後的字串
以上皆可設置：如location.href =’http://www.baidu.com’ ; 但除protocal外都會自動跳轉
History對象：是 window 對象的屬性，它保存著用戶上網的記錄，從窗口被打開的那一刻算起。
history.length //history 對象中的記錄數
history.back() //前往流覽器歷史條目前一個 URL，類似後退
history.forward() //前往流覽器歷史條目下一個 URL，類似前進
history.go(num) //流覽器在 history 對象中向前或向後，正值前進，負值後退
26、流覽器檢測：
navigator對象：
navigator.appCodeName //流覽器的名稱。通常是Mozilla，即使在非 Mozilla 流覽器中也顯示Mozilla
navigator.appName //完整的流覽器名稱
navigator.appVersion //流覽器的版本。一般不與實際的流覽器版本對應
navigator.cookieEnabled //表示 cookie 是否啟用
navigator.javaEnabled() //表示當前流覽器中是否啟用了Java
navigator.mimeTypes //在流覽器中註冊的 MIME 類型數組
navigator.platform //流覽器所在的系統平臺
navigator.plugins //流覽器中安裝的插件信息的數組
navigator.userAgent //流覽器的用戶代理字串
插件屬性：
navigator.plugins.name //插件名
navigator.plugins.filename //文檔名
navigator.plugins.length //插件個數
navigator.plugins.description //插件的描述
非IE插件檢測：
function hasPlugin(name) {
var name = name.toLowerCase();
for (var i = 0; i < navigator.plugins.length; i ++) {
if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
return true;
}
}
return false;
}
IE控件檢測：
function hasIEPlugin(name) {
try {
new ActiveXObject(name);
return true;
} catch (e) {
return false;
}
}
flash插件檢測：
function hasFlash() {
var result = hasPlugin('Flash');
if (!result) {
result = hasIEPlugin('ShockwaveFlash.ShockwaveFlash');
}
return result;
}
MIME類型：指多用途因特網郵件擴展。它是通過因特網發送郵件消息的標準格式。
navigator.mineTypes[i].type //類型文檔名
navigator.mineTypes[i].description //描述
navigator.mineTypes[i].enablePlugin //引用の類型
navigator.mineTypes[i].suffixes //支持の檔擴展名
27、DOM：Document Object Mode
DOM操作必須等待HTML文檔加載完畢，才能獲取
window.onload=function(){}
通過ID獲取元素節點：
var box=document.getElementById(‘box’);
其下屬性：
box.tagName //獲取節點の標籤名
box.innerHTML //獲取節點中間の純文本+標籤
box.id //ID名(可自設)
box.title //title屬性值(可自設)
box.style //style屬性對象(可自設)
box.className //class屬性の名字(可自設)
box.style.color //獲取style屬性中colorの值(可自設)
通過標籤獲取元素
var tag=document.getElementsByTagName(‘a’);
把a改為*表示所有標籤
tag.item(0) 或tag[0]：表示第一個元素
tag.length:表示元素數目
通過name獲取元素
var nm=document.getElementsByName(‘’)
box.getAttribute(‘class’); //獲取class屬性
box.setAttribute(‘屬性’,’值’) //設置屬性值
box.removeAttribute(‘class’) //移出屬性值
box.nodeName //同tagName,若為文本返回#text，其他則返回名
box.nodeType //元素返回1，屬性返回2，文本返回3
box.nodeValue //元素返回null，屬性返回屬性值，文本返回文本內容
box.bbb //獲取自定義屬性的值
nodeValue與innerHTML的區別
①box.innerHTML與box.childNodes[0].nodeValue等價，即nodeValue只能通過子節點去設置
②賦值不同：box.innerHTML可接收html標籤，而box.nodeValue不接收，會把其按文本輸出
層次節點：
box.childNodes //獲取當前元素節點的所有子節點
box.firstChild //獲取當前元素節點的第一個子節點
box.lastChild //獲取當前元素節點的最後一個子節點
box.ownerDocument //獲取該節點的文檔根節點，相當與 document
box.parentNode //獲取當前節點的父節點
box.previousSibling //獲取當前節點的前一個同級節點
box.nextSibling //獲取當前節點的後一個同級節點
box.attributes //獲取當前元素節點的所有屬性節點集合
box.attributes[0]或box.attributes[‘id’] //表示第一個屬性，id表示id的屬性值
box.removeChild(‘’) //移除子節點
DOM操作節點：
document.write() //這個方法可以把任意字串插入到文檔中
document.createElement() //創建一個元素節點
box.appendChild() //將新節點追加到子節點列表的末尾
document.createTextNode() //創建一個檔節點
box.parentNode.insertBefore(p, box); //將新節點p插到box插入在前面
box.parentNode.replaceChild(p,box); //將新節點p替換舊節點box
box.firstChild.cloneNode(true) //複製節點，true把標籤內文本也複製，false只複製標籤
box.parentNode.removeChild(box) //移除節點
28、DOM進階
Node類型：表示所有類型值的統一界面，IE 不支持
Node的常量
常量名 說明 nodeType 值
ELEMENT_NODE 元素 1
ATTRIBUTE_NODE 屬性 2
TEXT_NODE 文本 3
CDATA_SECTION_NODE CDATA 4
ENTITY_REFERENCE_NODE 實體參考 5
ENTITY_NODE 實體 6
PROCESSING_INSTRUCETION_NODE 處理指令 7
COMMENT_NODE 注釋 8
DOCUMENT_NODE 文檔根 9
DOCUMENT_TYPE_NODE doctype 10
DOCUMENT_FRAGMENT_NODE 文檔片段 11
NOTATION_NODE 符號 12
例如： alert(Node.ELEMENT_NODE); //1，元素節點類型值
alert(Node.TEXT_NODE); //2，文本節點類型值
document類型；
document; //document
document.nodeType; //9，類型值
document.childNodes[0]; //DocumentType，第一個子節點對象
document.childNodes[0].nodeType; //非 IE 為 10，IE 為 8
document.childNodes[1]; //HTMLHtmlElement
document.childNodes[1].nodeName; //HTML
document.documentElement; //HTMLHtmlElement，獲取<html>
document.body; //HTMLBodyElement，獲取<body>
document.doctype; //DocumentType，獲取<doctype>
document.childNodes[0].nodeName //IE 會是#Comment
//屬性
document.title; //獲取和設置<title>標籤的值
document.URL; //獲取 URL 路徑
document.domain; //獲取功能變數名稱，服務器端
document.referrer; //獲取上一個 URL，服務器端
//對象集合
document.anchors; //獲取文檔中帶name屬性的<a>元素集合
document.links; //獲取文檔中帶 href 屬性的<a>元素集合
document.applets; //獲取文檔中<applet>元素集合，已不用
document.forms; //獲取文檔中<form>元素集合
document.images; //獲取文檔中<img>元素集合
text類型：
box.normalize(); //box為父節點，把box所有子節點合併成一個節點
box.firstChild.splitText(3); //把前3個分離出來成一個節點
var box = document.getElementById('box');
box.firstChild.deleteData(0,2); //刪除從 0 位置的 2 個字元
box.firstChild.insertData(0,'Hello.'); //從 0 位置添加指定字元
box.firstChild.replaceData(0,2,'Miss'); //從 0 位置替換掉 2 個指定字元
box.firstChild.substringData(0,2); //從 0 位置獲取 2 個字元，直接輸出
alert(box.firstChild.nodeValue); //輸出結果
document.getElementById('box').scrollIntoView(); //滾動到可見
box.children.length //獲取有效節點數(自動去除空白節點)
box.childNodes.length //包含空白節點
box.firstChild、box.lastChild 也包含空白節點(換行符就是一空白節點)
box.contains(box.firstChild) //判斷是否子節點
box.compareDocumentPosition(box.firstChild) //全相容，返回關係掩碼值，如包含為20(16+4)
掩碼 節點關係
1 無關(節點不存在)
2 居前(節點在參考點之前)
4 居後(節點在參考點之後)
8 包含(節點是參考點的祖先)
16 被包含(節點是參考點的後代)
document.getElementById('box').innerText; //獲取文本內容(如有 html 直接過濾掉)
document.getElementById('box').innerText = 'Mr.Lee'; //設置文本(如有 html 轉義)
document.getElementById('box').innerHTML; //獲取文本(不過濾 HTML)
document.getElementById('box').innerHTML = '<b>123</b>'; //可解析 HTML
box.outerText; //獲取文本內容
box.outerText = '<b>123</b>'; //設置文本(如有 html 轉義)，但會將元素抹去
box.outerHTML //取值和 innerHTML 一致
box.outerHTML= '<b>123</b>'; //同outerText，賦值的之後會將元素抹去。
注釋：innerHTML解析器比JS快，因為此Html解析器為流覽器級別，但創建和銷毀也會帶來損失。
29、Table屬性
var table =document.getElementsByTagName(‘table’);
table.caption //<caption>元素
table.tBodies //<tbody>元素的集合
table.tFoot //<tfoot>元素
table.tHead //<thead>元素
table.rows //<tr> 元素的集合
table.createTHead() //創建<thead>元素，並返回引用
table.createTFoot() //創建<tfoot>元素，並返回引用
table.createCaption() //創建<caption>元素，並返回引用
table.deleteTHead() //刪除<thead>元素
table.deleteTFoot() //刪除<tfoot>元素
table.deleteCaption() //刪除<caption>元素
table.deleteRow(pos) //刪除指定的行
table.insertRow(pos) //向 rows 集合中的指定位置插入一行
var tbody=table.tBodies[0] //<tbody>元素添加的屬性和方法
tbody.rows //保存著<tbody>元素中行的集合
tbody.deleteRow(pos) //刪除指定位置的行
tbody.insertRow(pos) //向 rows 集合中的指定位置插入一行，並返回引用
var tr=tbody.rows[0] //
tr.cells //保存著<tr>元素中單元格的 HTMLCollection
tr.deleteCell(pos) //刪除指定位置的單元格
tr.insertCell(pos) //向cells集合的指定位置插入一個單元格，並返回引用
30、CSS樣式：var box=document.getElementById(‘box’)
box.style.color //設置顏色
box.style.fontSize //設置字體大小
box.style.cssFloat； //非IEのfloat
box.style.styleFloat //IEのfloat
box.style.cssText //訪問或設置 style 中的 CSS 代碼
box.style.length //CSS 屬性的數量
box.style.parentRule //CSS 信息的 CSSRule 對象
box.style.getPropertyCSSValue(name) //返回包含給定屬性值的 CSSValue 對象
box.style.getPropertyPriority(name) //如果設置了!important，則返回，否則返回空字元串
box.style.item(index) //返回指定位置 CSS 屬性名稱
box.style.removeProperty(name) //從樣式中刪除指定屬性
box.style.setProperty(name,v,p) //給屬性設置為相應的值，並加上優先權
style 屬性僅僅只能獲取行內的 CSS 樣式，對於另外兩種形式內聯<style>和鏈接<link>方式則無法獲取到。
var style = window.getComputedStyle ?window.getComputedStyle(box, null) : null || box.currentStyle;
通過計算後的樣式值
PS：border 屬性是一個綜合屬性，所以他在 Chrome 顯示了，Firefox 為空，IE 為 undefined。
所謂綜合性屬性，就是 XHTML 課程裏所的簡寫形式，所以，DOM 在獲取 CSS 的時候，最
好採用完整寫法相容性最好，比如：border-top-color 之類的。
//判斷是否存在這個class
function hasClass(element, className) {
return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
}
//添加一個 class，如果不存在的話
function addClass(element, className) {
if (!hasClass(element, className)) {
element.className += " "+className;
}
}
//刪除一個 class，如果存在的話
function removeClass(element, className) {
if (hasClass(element, className)) {
element.className = element.className.replace(
new RegExp('(\\s|^)'+className+'(\\s|$)'),' ');
}
}
document.implementation.hasFeature('StyleSheets', '2.0') //是否支持 DOM2 級樣式表
document.getElementsByTagName('link')[0]; //HTMLLinkElement
document.getElementsByTagName('style')[0]; //HTMLStyleElement
var link = document.getElementsByTagName('link')[0];
var sheet = link.sheet || link.styleSheet; //得到 CSSStyleSheet
sheet.disabled //獲取和設置樣式表是否被禁用
sheet.href //如果是通過<link>包含的，則樣式表為 URL，否則為 null
sheet.media //樣式表支持的所有媒體類型的集合
sheet.ownerNode //指向擁有當前樣式表節點的指針
sheet.parentStyleSheet //@import 導入的情況下，得到父 CSS 對象
sheet.title //ownerNode 中 title 屬性的值
sheet.type //樣式表類型字串
sheet.cssRules //樣式表包含樣式規則的集合，IE 不支持
sheet.rules; //代替 cssRules 的 IE 版本
sheet.ownerRule //@import 導入的情況下，指向表示導入的規則，IE 不支持
sheet.deleteRule(index) //刪除 cssRules 集合中指定位置的規則，IE 不支持
sheet.removeRule(0); //代替 deleteRule 的 IE 版本
sheet.insertRule(rule, index) //向 cssRules 集合中指定位置插入 rule 字串，IE 不支持
sheet.addRule("body", " //代替 insertRule 的 IE 版本
刪除rule
function deleteRule(sheet, index) {
if (sheet.deleteRule) { //如果是非 IE
sheet.deleteRule(index);
} else if (sheet.removeRule) { //如果是 IE
sheet.removeRule(index);
}
}
添加rule
function insertRule(sheet, selectorText, cssText, position) {
if (sheet.insertRule) { //如果是非 IE
sheet.insertRule(selectorText + "{" + cssText + "}", position);
} else if (sheet.addRule) { //如果是 IE
sheet.addRule(selectorText, cssText, position);
}
}
31、屏幕中的位置（直接使用，無需前綴）：
screenLeft、screenTop：除了火狐都支持
screenX、screenY：
窗口的大小（穀歌的inner=outer，直接使用，無需前綴）：
innerWidth、innerHeight：頁面的長、高
outerWidth、outerHeight：頁面+邊框の長、高
HTML的大小：
document.documentElement.clientWidth：同innerWidth
document.documentElement.clientHeight：同innerHeight
Body的大小：
document.body.clientHeight：高
document.body.clientWidth：寬
某個元素的大小：
var p=document.getElementById('p');
p.clientWidth、p.clientHeight：border、margin不算入其內，padding算入其內，scroll（滾動條）會減小其大小。
p.scrollWidth、p.scrollHeight：margin不算入其內，padding會增加，scroll會減小，border各瀏覽器解釋不同。
p.offsetWidth、p.offsetHeight：border和padding會增加，margin和scroll不算入其內。相容性最好
某個元素的屬性大小：
p.clientLeft、p.clientTop：邊框的大小（沒有right和bottom）
p.offsetLeft、p.offsetTop：相對於父元素的位置（像素）
p.offsetParent：獲得父元素
滾動條顯示區域相對於初始位置的值：
document.documentElement.scrollTop
document.documentElement.scrollLeft
滾動條顯示區域相對於初始位置的值<IE6支持>：
document.body.scrollTop
document.body.scrollLeft
轉《html中offsetTop、clientTop、scrollTop、offsetTop各屬性介紹》
scrollWidth:獲取對象的滾動寬度
scrollHeight: 獲取對象的滾動高度
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
offsetHeight:獲取對象相對於版面或由父座標offsetParent 屬性指定的父座標的高度
offsetLeft:獲取對象相對於版面或由offsetParent 屬性指定的父座標的計算左側位置
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置
event.clientX 相對文檔的水準座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水準座標
event.offsetY 相對容器的垂直座標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水準座標+垂直方向滾動的量
JavaScript中建造遷移轉變代碼的常用屬性
網頁可見區域寬： document.body.clientWidth;
網頁可見區域高： document.body.clientHeight;
網頁可見區域寬： document.body.offsetWidth （包含邊線的寬）;
網頁可見區域高： document.body.offsetHeight（包含邊線的寬）;
網頁正文全文寬： document.body.scrollWidth;
網頁正文全文高： document.body.scrollHeight;
網頁被卷去的高： document.body.scrollTop;
網頁被卷去的左： document.body.scrollLeft;
網頁正文專案組上： window.screenTop;
網頁正文專案組左： window.screenLeft;
屏幕辨別率的高： window.screen.height;
屏幕辨別率的寬： window.screen.width;
屏幕可用工作區高度： window.screen.availHeight;
32、動態加載腳本
function loadScript(url) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
//document.head.appendChild(script); //document.head 表示<head>
document.getElementsByTagName('head')[0].appendChild(script);
}
//動態執行 js
var script = document.createElement('script');
script.type = 'text/javascript';
var text = document.createTextNode("alert('Lee')"); //IE 流覽器報錯
//IE相容寫法：script.txt=”alert(‘Lee’)”;
script.appendChild(text);
document.getElementsByTagName('head')[0].appendChild(script)
//動態執行 link
function loadStyles(url) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
document.getElementsByTagName('head')[0].appendChild(link);
}
//動態執行 style
var style = document.createElement('style');
style.type = 'text/css';
//var box= document.createTextNode(#box{background:red}'); IE 不支持
//style.appendChild(box);
document.getElementsByTagName('head')[0].appendChild(style);
insertRule(document.styleSheets[0], '#box', 'background:red', 0);
}
function insertRule(sheet, selectorText, cssText, position) {
if (sheet.insertRule) { //如果是非 IE
sheet.insertRule(selectorText + "{" + cssText + "}", position);
} else if (sheet.addRule) { //如果是 IE
sheet.addRule(selectorText, cssText, position);
}
}
33、事件入門
//在 HTML 中把事件處理函數作為屬性執行 JS 代碼
<input type="button" value="按鈕" onclick="alert('Lee');" /> //注意單雙引號
//在 HTML 中把事件處理函數作為屬性執行 JS 函數
<input type="button" value="按鈕" onclick="box();" /> //執行 JS 的函數
PS：函數不得放到 window.onload 裏面，這樣就看不見了。
事件函數：
onabort //圖像 當圖像加載被中斷時
onblur //窗口、框架、所有表單對象 當焦點從對象上移開時
onchange //輸入框，選擇框和文本區域 當改變一個元素的值且失去焦點時
onclick //鏈接、按鈕、表單對象、圖像映射區域 當用戶單擊對象時
ondblclick //鏈接、按鈕、表單對象 當用戶雙擊對象時
ondragdrop //窗口 當用戶將一個對象拖放到流覽器窗口時
onError //腳本 當腳本中發生語法錯誤時
onfocus //窗口、框架、所有表單對象 當單擊滑鼠或者將滑鼠移動聚焦到窗口或框架時
onkeydown //文檔、圖像、鏈接、表單 當按鍵被按下時
onkeypress //文檔、圖像、鏈接、表單 當按鍵被按下然後鬆開時
onkeyup //文檔、圖像、鏈接、表單 當按鍵被鬆開時
onload //主題、框架集、圖像 文檔或圖像加載後
onunload //主體、框架集 文檔或框架集卸載後
onmouseout //鏈接 當圖示移除鏈接時
onmouseover //鏈接 當滑鼠移到鏈接時
onmove //窗口 當流覽器窗口移動時
onreset //表單複位按鈕 單擊表單的 reset 按鈕
onresize //窗口 當選擇一個表單對象時
onselect //表單元素 當選擇一個表單對象時
onsubmit //表單 當發送表格到服務器時
onscroll //移動滾動條時觸發
事件對象，我們一般稱作為 event 對象，這個對象是流覽器通過函數把這個對象作為參數傳遞過來的。
獲取event：①W3C：evt(皆支持) ②window.event(Chrome&IE支持)
eventの值： ①evt：0(主按鈕)、1(中鍵)、2(右鍵)
②window.event：0(沒按)、1(主)、2(次)、3(主+次)、4(中)、5(主+中)、6(次+中)、7(三皆)
event對象の屬性：
var e=evt||window.event;
e.clientX //可視區 X 座標，距離左邊框的位置
e.clientY //可視區 Y 座標，距離上邊框的位置
e.screenX //屏幕區 X 座標，距離左屏幕的位置
e.screenY //屏幕區 Y 座標，距離上屏幕的位置
e.shiftKey //判斷是否按下了 Shfit 鍵
e.ctrlKey //判斷是否按下了 ctrlKey 鍵
e.altKey //判斷是否按下了 alt 鍵
e.metaKey //判斷是否按下了 windows 鍵，IE 不支持
鍵盤事件中的event：
document.onkeydown = function (evt) {
alert(evt.keyCode); //按任意鍵，得到相應的 keyCode
};
onkeypress為e.charCode，返回值區分大小寫，且只返回字元編碼的值(非字元鍵不返回)
onkeydown和onkeyup為e.keyCode，返回值為按鍵對應的ASCII值，不分大小寫，全為大寫的ASCII碼值
W3C中event的事件與方法：屬性/方法 類型 讀/寫 說明
bubbles //Boolean 只讀 表明事件是否冒泡
cancelable //Boolean 只讀 表明是否可以取消事件的默認行為
currentTarget //Element 只讀 其事件處理程式當前正在處理事件的那個元素
detail //Integer 只讀 與事件相關的細節信息
eventPhase //Integer 只讀 調用事件處理程式的階段：1 表示捕獲階段，2 表示“處理目標”，3 表示冒泡階段
preventDefault() //Function 只讀 取消事件的默認行為。如果 cancelabel是 true，則可以使用這個方法
stopPropagation() //Function 只讀 取消事件的進一步捕獲或冒泡。如果bubbles 為 true，則可以使用這個方法
target //Element 只讀 事件的目標
type //String 只讀 被觸發的事件的類型
view //AbstractView 只讀 與事件關聯的抽象視圖。等同於發生事件的 window 對象
IE 中 event 對象的屬性：屬性 類型 讀/寫 說明
cancelBubble //Boolean 讀/寫 默認值為 false，但將其設置為 true 就可以取消事件冒泡
returnValue //Boolean 讀/寫 默認值為 true，但將其設置為 false 就可以取消事件的默認行為
srcElement //Element 只讀 事件的目標
type //String 只讀 被觸發的事件類型
阻止冒泡的相容
function stopPro(evt) {
var e = evt || window.event;
window.event ? e.cancelBubble = true : e.stopPropagation();
34、事件處理
添加事件：obj.addEventListener('事件名',函數,true(捕獲)/false(冒泡));
例如：window.addEventListener('load', function () {alert('Mr.Lee');}, false);
移除事件：obj.removeEventListener('事件名',函數,true(捕獲)/false(冒泡));
例如：window.removeEventListener('load', function () {alert('Mr.Lee');}, false);
relatedTarget； //這個屬性可以在 mouseover 和 mouseout 事件中獲取從哪里移入和從哪里移出的 DOM 對象。
box.onmouseover = function (evt) { //滑鼠移入 box
alert(evt.relatedTarget); //獲取移入 box 最近的那個元素對象
}
上下文菜單
addEvent(window, 'load', function () {
var text = document.getElementById('text');
addEvent(text, 'contextmenu', function (evt) {
var e = evt || window.event;
preDef(e);
var menu = document.getElementById('menu');
menu.style.left = e.clientX + 'px';
menu.style.top = e.clientY + 'px';
menu.style.visibility = 'visible';
addEvent(document, 'click', function () {
document.getElementById('myMenu').style.visibility = 'hidden';
});
});
});
卸載前事件：window.beforeunload=function(evt){evt.preventDefalt();}
滑鼠滾軸：(非火狐)document.mousewheel=function(event){event.whellDelta;} //獲取滑鼠上下滾輪的距離
(火狐)document.DOMMouseScroll=function(event){event.detail;} //獲取滑鼠上下滾輪的距離
35、獲取form
獲取表單<form>對象的方法有很多種，如下：
document.getElementById('myForm'); //使用 ID 獲取<form>元素
document.getElementsByTagName('form')[0]; //使用獲取第一個元素方式獲取
document.forms[0]; //使用 forms 的數字下標獲取元素
document.forms['yourForm']; //使用 forms 的名稱下標獲取元素
document.yourForm; //使用 name 名稱直接獲取元素
var fm=document.forms[0];
fm.reset(); //讓非reset按鈕實現嗎重置
fm.submit(); //讓非submit按鈕實現提交
Ctrl+Enter提交
if(event.ctrlKey&&event.keyCode==13) fm.submit();
在表單中儘量避免使用 name="submit"或 id="submit"等命名，這會和 submit()方法發生衝突導致無法提交
禁用按鈕：document.getElementById('sub').disabled = true; //將按鈕禁用
表單字段：
fm.elements[0]; //獲取第一個表單字段元素
fm.elements['user']; //獲取 name 是 user 的表單字段元素
fm.elements.length; //獲取所有表單字段的數量
如果多個表單字段都使用同一個 name，那麼就會返回該 name 的 NodeList 表單列表。
fm.elements['sex']; //獲取相同 name 表單字段列表
fm.elements['sex'][0]; //獲取name為sex的第一個元素
fm[0] //獲取第一個元素，同fm.elements[0]，但不建議使用
共有屬性：除了<fieldset>元素之外。var fmchild=fm.elements[0];
fmchild.disabled //布爾值，表示當前字段是否被禁用
fmchild.form //指向當前字段所屬表單的指針，只讀
fmchild.name //當前字段的名稱
fmchild.readOnly //布爾值，表示當前字段是否只讀
fmchild.tabIndex //表示當前字段的切換
fmchild.type //當前字段的類型，不建議用其修改type
fmchild.value //當前字段的值
使用表單的 value 是最推薦使用的，它是 HTML DOM 中的屬性，不建議使用標準DOM 的方法。也就是說不要使用 getAttribute()獲取 value 值。
type值：除了<fieldset>元素之外。
HTML 標籤 type 屬性的值
<select>...</select> select-one
<select multiple>...</select> select-multiple
<button>...</button> button
<button type="button">...</button> button
<button type="reset">...</button> reset
<button type="submit">...</button> submit
共有方法：fmchild.focus()、fmchild.blur()
共有事件：fmchild.onfocus、fmchild.onblur、fmchild.onchange
文本框處理：var text=fm.elements[2];
取值： text.value area.value
默認值：text.defaultValue area.defaultValue
文本選擇：text.setSelectionRange(m,n); //從m選到n，全選為0到text.value.length
取得文本：text.onselect=function(){
this.value.substring(this.selectionStart, this.selectionEnd);
}
遮罩非數字鍵：
areaField.addEventListener('keypress', function (evt) {
var e = evt || window.event;
var charCode = getCharCode(evt); //得到字元編碼
if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 8) { //條件阻止默認
e.preventDefault();
}},false);
遮罩複製、剪切、粘貼：
oncopy、oncut、onpaste、onbeforecopy、onbeforecut、onbeforepaste，遮罩器默認行為即可
遮罩輸入法：除Chrome皆支持
style=’ime-mode:disabled’ //css中
text.style.imeMode=’disabled’ //js中
Chrome支持の，將非數字鍵轉為空
areaField.addEventListener( 'keyup', function (evt) { //keyup 彈起的時候
this.value = this.value.replace(/[^\d]/g, ''); //把非數字都替換成空
},false);
自動調焦：
function tabForward (evt) {
var e = evt || window.event;
var target = evt.target;
if (target.value.length == target.maxLength) { //判斷當前長度是否和指定長度一致
for (var i =0; i < fm.elements.length; i ++) { //遍曆所有字段
if (fm.elements[i] == target) { //找到當前字段
fm.elements[i + 1].focus(); //就把焦點移入下一個
return; //中途返回
}
}
}
}
36、form中の元素
selectの對象：
var select=fm.elements[4];
select.add(new,rel) //插入新元素，並指定位置
select.multiple //布爾值，是否允許多項選擇
select.options //<option>元素的 HTMLColletion 集合
select.remove(index) //移除給定位置的選項
select.selectedIndex //基於 0 的選中項的索引，如果沒有選中項，則值為-1
select.size //選擇框中可見的行數
var option=select.options[0]
option.index //當前選項在 options 集合中的索引
option.label //當前選項的標籤
option.selected //布爾值，表示當前選項是否被選中
option.text //選項的文本
option.value //選項的值
添加選項
如需動態的添加選項我們有兩種方案：DOM 和 Option 構造函數。
var option = document.createElement('option');
option.appendChild(document.createTextNode('北京 t'));
option.setAttribute('value', '北京 v')
city.appendChild(option);
使用 Option 構造函數創建：
var option = new Option('北京 t', '北京 v');
city.appendChild(option); //IE8(含)之前出現 bug，現在不再支持IE8(含)之前，故可理解為全相容
使用 add()方法來添加選項：
var option = new Option('北京 t', '北京 v');
city.add(option, 0); //0，表示添加到第一位
PS：在 DOM 規定，add()中兩個參數是必須的，如果不確定索引，那麼第二個參數設置 null 即可，即默認移入最後一個選項。但這是 IE 中規定第二個參數是可選的，所以設置null 表示放入不存在的位置，導致失蹤，為了相容性，我們傳遞 undefined 即可相容。
city.add(option, null); //IE 不顯示了
city.add(option, undefined); //相容了
移除選項
有三種方式可以移除某一個選項：DOM 移除、remove()方法移除和 null 移除。
city.removeChild(city.options[0]); //DOM 移除
city.remove(0); //remove()移除，推薦
city.options[0] = null; //null 移除
PS：當第一項移除後，下麵的項，往上頂，所以不停的移除第一項，即可全部移除
移動select：
s1.addEventListener(‘click’,function(){
s2.appendChild(this.options[s1.selectedIndex]);
},false)
注：s1中的選項會移動到s2中，即2中增1中減
排列選項
選擇框提供了一個 index 屬性，可以得到當前選項的索引值，和 selectedIndex 的區別是，一個是選擇框對象的調用，一個是選項對象的調用。
var option1 = city.options[1];
city.insertBefore(option1, city.options[option1.index - 1]); //往下移動移位
得到複選框中的選定值
var love=’’;
for (var i = 0; i < fm.love.length; i ++) {
if (fm.love[i].checked == true) {
love += fm.love[i].value;
}
}
得到單選框中的選定值
for (var i = 0; i < fm.sex.length; i ++) { //迴圈單選按鈕
if (fm.sex[i].checked == true) { //遍曆每一個找出選中的那個
return fm.sex[i].value; //得到值
}
}
得到單選框中的默認選定值
for (var i = 0; i < fm.sex.length; i ++) { //迴圈單選按鈕
if (fm.sex[i]..defaultChecked== true) { //遍曆每一個找出選中的那個
return fm.sex[i].value; //得到值
}
}
37、錯誤語句
try {
語句1; //首先嘗試執行語句1
}catch(e){
語句2; //出錯執行語句2
}finally{ //此句為可選句
語句3; //不論是否發生錯誤，都執行語句3
}
語句2中使用：
e.name; //錯誤的名稱
e.message; //錯誤的信息
finally防止出現異常後，無法進行下去，用於清理
錯誤類型：
1.Error //其他6類的父類，用於拋自定義錯誤
2.EvalError //eval()使用與定義不同，實際中不可能產生
3.RangeError //數值超範圍
4.ReferenceError //訪問了不存在的變數
5.SyntaxError //語法錯誤
6.TypeError //類型不匹配
7.URIError //encodeURI()與decodeURI()，由於此二者相容性強，此錯誤難見到
try-catch語句消耗資源，負擔更大
流覽器相容：一般不用try-catch，可用if
無法修改代碼，且不能用普通情況判斷時，可用throw new Error(‘字串’)，拋出錯誤的解釋
error 事件是當某個 DOM 對象產生錯誤的時候觸發。
window.addEventListener( 'error', function () {
alert('發生錯誤啦！')
},false);
console方法：將信息發送到控制臺
console.error(str); //將錯誤消息發送到控制臺，前有紅色帶×標誌
console.info(str); //將信息發送到控制臺，前有白色帶信息號標誌
console.log(str); //將日誌發送到控制臺，前有白色標誌
console.warn(str); //將警告信息發送到控制臺，前有黃色帶感嘆號標誌
38、cookie
完整格式為：
name=value; [expires=date]; [path=path]; [domain=somewhere.com]; [secure]
注釋：expires失效時間，如果沒有聲明，則為流覽器關閉後即失效。若聲明，那麼時間到期後方能失效。
例如：7天後失效
var date = new Date(); //創建一個
date.setDate(date.getDate() + 7);
document.cookie = "user= " + encodeURIComponent('李炎恢') +";expires=" + date;
刪除 cookie ：只要重新創建 cookie 把時間設置當前時間之前即可：date.getDate() - 1 或 new Date(0)。
path=path 訪問路徑，當設置了路徑，那麼只有設置的那個路徑檔才可以訪問 cookie。
domain=domain 訪問功能變數名稱，用於限制只有設置的功能變數名稱才可訪問，若未設置，會默認限制為創建 cookie 的功能變數名稱。
secure 安全設置，指明必須通過安全的通信通道來傳輸(HTTPS)才能獲取 cookie。
創建cookie：
function setCookie(name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
if (expires instanceof Date) {cookieText += '; expires=' + expires;}
if (path) {cookieText += '; expires=' + expires;}
if (domain) {cookieText += '; domain=' + domain;}
if (secure) {cookieText += '; secure';}
document.cookie = cookieText;
}
讀取cookie：
function getCookie(name) {
var cookieName = encodeURIComponent(name) + '=';
var cookieStart = document.cookie.indexOf(cookieName);
var cookieValue = null;
if (cookieStart > -1) {
var cookieEnd = document.cookie.indexOf(';', cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(
document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;
}
刪除cookie：
function unsetCookie(name) {
document.cookie = name + "= ; expires=" + new Date(0);
}
cookieの局限性
1、每個特定的功能變數名稱下最多生成 50 個 cookie
2、cookie 的最大大約為 4096 位元組(4k)，為了更好的相容性，一般不能超過 4095 位元組即可。
3、cookie 存儲在客戶端的文本檔，所以特別重要和敏感的數據是不建議保存在cookie 的。比如銀行卡號，用戶密碼等。
session
設置session：
法一：sessionStorage.setItem(‘name’,’man’);
法二：sessionStorage.name=’man’;
讀取session
法一：sessionStorage.getItem(‘name’);
法二：sessionStorage.name;
法三：localStorage.getItem(‘name’);
法四：localStorage.name
移出session
法一：sessionStorage.removeItem(‘name’);
法二：localStorage.removeItem(‘name’);
39、XML： XML 技術一度成為存儲和傳輸結構化數據的標準。可以理解成一個微型的結構化的資料庫，保存一些小型數據用的。
創建XML：
var xmlDom = document.implementation.createDocument('','root',null); //創建 xmlDom
var user = xmlDom.createElement('user'); //創建 user 元素
xmlDom.getElementsByTagName('root')[0].appendChild(user); //添加到 root 下
var value = xmlDom.createTextNode('Lee'); //創建文本
xmlDom.getElementsByTagName('user')[0].appendChild(value); //添加到 user 下
alert(xmlDom.getElementsByTagName('user')[0].tagName); //獲取user[0]的名字
alert(xmlDom.getElementsByTagName('user')[0].firstChild.nodeValue); //獲取user[0]第一個節點的值
注釋：createDocument()方法需要傳遞三個參數，命名空間，根標籤名和文檔聲明，由於JavaScript 管理命名空間比較困難，所以留空即可。文檔聲明一般根本用不到，直接 null 即可。命名空間和文檔聲明留空，表示創建 XMLDOM 對象不需要命名空間和文檔聲明。
載入XML：
//同步情況下
var xmlDom = document.implementation.createDocument('','root',null);
xmlDom.async = false;
xmlDom.load('test.xml');
alert(xmlDom.getElementsByTagName('user')[0].tagName);
//非同步情況下
var xmlDom = document.implementation.createDocument('','root',null);
xmlDom.async = true;
xmlDom.addEventListener( 'load', function () { //非同步直接用 onload 即可
alert(this.getElementsByTagName('user')[0].tagName);
},false);
xmlDom.load('test.xml');
PS：不管在同步或非同步來獲取 load()方法只有 Mozilla 的 Firefox 才能支持，只不過新版
的 Opera 也是支持的，其他流覽器則不支持。
序列化：
var serializer=new XMLSerialzer();
var xml=serializer.serializerToString(xmlDom);
解析錯誤
在 DOM2 級處理 XML 發生錯誤時，並沒特有對象來捕獲錯誤，而是直接生成另一個錯誤的 XML 文檔，通過這個文檔可以獲取錯誤信息。
var errors = xmlDom.getElementsByTagName('parsererror');
if (errors.length > 0) {
throw new Error('XML 格式有誤：' + errors[0].textContent);
}
PS：errors[0].firstChild.nodeValue 也可以使用 errors[0].textContent 來代替。
39、XPath 是一種節點查找手段，對比之前使用標準 DOM 去查找 XML 中的節點方式，大
大降低了查找難度，方便開發者使用。
創建XPath：
//使用 XPathEvaluator 對象創建 XPathResult
var eva = new XPathEvaluator();
var result = eva.evaluate('root/user', xmlDom, null,XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
alert(result);
//使用上下文節點對象(xmlDom)創建 XPathResult
var result = xmlDom.evaluate('root/user', xmlDom, null,XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
alert(result);
evaluate 方法有五個屬性：1.XPath 路徑、2.上下文節點對象、3.命名空間求解器(通常是 null)、4.返回結果類型、5 保存結果的 XPathResult對象(通常是 null)。
1.獲取一個單一節點
var result = xmlDom.evaluate('root/user', xmlDom, null,XPathResult.FIRST_ORDERED_NODE_TYPE, null);
if (result !== null) {
alert(result.singleNodeValue.tagName); //singleNodeValue 屬性得到節點對象
}
2.獲取節點集合
var result = xmlDom.evaluate('root/user', xmlDom, null,XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
var nodes = [];
if (result !== null) {
while ((node = result.iterateNext()) !== null) { //集合中遍曆取值，自動遍曆，不為null，則返回值
nodes.push(node);
}
}
40、JSON ：JSON 和 XML 類型，都是一種結構化的數據表示方式。很多語言都可以對 JSON 進行解析和序列化。
JSON 的語法可以表示三種類型的值：
1.簡單值：可以在 JSON 中表示字串、數值、布爾值和 null。但 JSON 不支持 JavaScript中的特殊值 undefined。
2.對象：顧名思義。
3.數組：顧名思義。
JSON 中的對象表示法需要加上雙引號，並且不存在賦值運算和分號：//使用雙引號，否則轉換會出錯
{"name" : "Lee", "age" : 100}
JSON 中的數組表示法同樣沒有變數賦值和分號：
[100, "Lee", true]
JSON中常用的形式：複雜形式
[{"title" : "a", "num" : 1},{"title" : "b", "num" : 2},{"title" : "c", "num" : 3}]
模擬加載 JSON 文本檔的數據，並且賦值給變數。
var box = '[{"name" : "a","age" : 1},{"name" : "b","age" : 2}]'
var json = JSON.parse(box); //不是雙引號，會報錯
alert(json);
普通數組：JSON比普通數組多了兩邊的雙引號
var box = [{name : 'a', age : 1},{name : 'b', age : 2}]; //JS原生值
var json = JSON.stringify(box); //轉換成 JSON 字串
alert(json); //自動雙引號
JSON.stringify();第二個參數可以是一個數組，也可以是一個函數，用於過濾結果。第三個參數則表示是否在 JSON 字串中保留縮進。
var box = [{name : 'a', age : 1, height : 177},{name : 'b', age : 2, height : 188}];
var json = JSON.stringify(box, ['name', 'age'], 4); //取box中的name和age並縮進4個字元(較上一層)
alert(json); //較上兩層縮進8個字元
PS：如果不需要保留縮進，則不填即可；如果不需要過濾結果，但又要保留縮進，則講過濾結果的參數設置為 null。如果採用函數，可以進行複雜的過濾。如果4改成’--’，則較上一層為--，上兩層為----
複雜過濾
var box = [{name : 'a', age : 1, height : 177},{name : 'b', age : 2, height : 188}];
var json = JSON.stringify(box, function (key, value) {
switch (key) {
case 'name' :
return 'Mr. ' + value;
case 'age' :
return value + '歲';
default :
return value;
}
}, 4);
toJSON過濾：此過濾優先順序最高
var box = [{name : 'a', age : 1, height : 177, toJSON : function () {return this.name;}}, //只能獲取到name
{name : 'b',age : 2, height : 188, toJSON : function () {return this.name;}}];
var json = JSON.stringify(box);
alert(json);
JSON.parse()過濾：同JSON.stringify()，只不過其轉換的是帶”的JSON字串，而JSON.stringify()轉的是普通字串。
var box = '[{"name" : "a","age" : 1},{"name" : "b","age" : 2}]';
var json = JSON.parse(box, function (key, value) {
if (key == 'name') {
return 'Mr. ' + value;
} else {
return value;
}
});
alert(json[0].name);
41、Ajax：是 Asynchronous JavaScript + XML 的簡寫，x 技術核心是 XMLHttpRequest 對象(簡稱 XHR)，提供了向服務器發送請求和解析服務器回應提供了流暢的界面。能夠以非同步方式從服務器獲取更多的信息，這就意味著，用戶只要觸發某一事件，在不刷新網頁的情況下，更新服務器最新的數據。雖然 Ajax 中的 x 代表的是 XML，但 Ajax 通信和數據格式無關，也就是說這種技術不一定使用 XML。
創建Ajax
var xhr = new XMLHttpRequest();
準備
在使用 XHR 對象時，先必須調用 open()方法，它接受三個參數：要發送的請求類型(get、post)、請求的 URL 和表示是否非同步。
xhr.open('get', 'demo.php', false); //對於 demo.php 的 get 請求，false 同步
發送：xhr.send(null); //發送請求，如果不需要則，必須填 null。比如get不需要
xhr.responseText //作為回應主體被返回的文本
xhr.responseXML //如果回應主體內容類型是"text/xml"或"application/xml"，則返回包含回應數據的 XML DOM 文檔
xhr.status //返回回應的 HTTP 狀態，只讀
xhr.statusText //返回HTTP 狀態的說明，只讀
HTTP(status) 狀態碼 狀態字串 說明(statusText)
200 OK 服務器成功返回了頁面
400 Bad Request 語法錯誤導致服務器不識別
401 Unauthorized 請求需要用戶認證
404 Not found 指定的 URL 在服務器上找不到
500 Internal Server Error 服務器遇到意外錯誤，無法完成請求
503 ServiceUnavailable 由於服務器超載或維護導致無法完成請求
readystatechange事件：
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
} else {
alert('數據返回失敗！狀態代碼：' + xhr.status + '狀態信息：' + xhr.statusText);
}
}
使用非同步調用的時候， 需要觸發 readystatechange,檢測readyState 屬性即可。這個屬性有五個值：
值(readyState) 狀態 說明
0 未初始化 尚未調用 open()方法
1 啟動 已經調用 open()方法，但尚未調用 send()方法
2 發送 已經調用 send()方法，但尚未接受回應
3 接受 已經接受到部分回應數據
4 完成 已經接受到全部回應數據，而且可以使用
回應頭
alert(xhr.getResponseHeader('Content-Type')); //使用 getResponseHeader()獲取單個回應頭信息
alert(xhr.getAllResponseHeaders()); //使用 getAllResponseHeaders()獲取整個回應頭信息
xhr.setRequestHeader('MyHeader', 'Lee'); //使用 setRequestHeader()設置單個請求頭信息，放在 open 方法之後，send 方法之前
GET請求：GET 最多比 POST 快兩倍。
xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);
xhr.send(null);
//一個通用的 URL 提交函數
function addURLParam(url, name, value) {
url += (url.indexOf('?') == -1 ? '?' : '&'); //判斷的 url 是否有已有參數
url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
return url;
}
PS：當沒有 encodeURIComponent()方法時，在一些特殊字元比如“&”，會出現錯誤導致無法獲取
POST請求：
xhr.open('post', 'demo.php', true);
xhr.send('name=Lee&age=100');
模擬表單提交：讓其可提交，否則只有表單提交放有用，放在send之前
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
JSON訪問回調值：
var box = JSON.parse(xhr.responseText);
42、後續小問題
Call用法問題：
fn.call(1,2,3,4,5)
function fn(a,b,c){
//則this=1，a=2，b=3，c=4。即第一個參數代表作用域
}
中括弧：
總是可以代替點，但點不一定；
[]可以用字符串變數、純數字、JS保留字和關鍵字做屬性名，但點不能。
JS中function(e)，e用來監聽，e不寫進去則無法監聽，不能獲取滑鼠之類的狀態，也可換成別的字母。
e=arguments[0];
插件問題：把函數和函數名寫入原型；
Base.prototype.extend=function(name,fn){ //name為原型中要用的名，fn為外函數名
Base.prototype[name]=fn;
}
流覽器加載順序：前4快，5慢，window.load()需要全部加載完才執行。
1、HTML解析
2、外部腳本和樣式加載
3、腳本在文檔內解析並執行
4、HTML DOM完全構建
5、圖片和外部內容加載
6、加載完畢
上下按鍵keycode判斷：40(上)、38(下)、13(回車)
清理：把length設為0即可
延時加載：等圖片與上邊框與滾動條下邊框相同時，再使用opacity漸漸顯示。
