JavaScript學(xué)習(xí)總結(jié)(一) ECMAScript、BOM、DOM（核心、瀏覽器對(duì)象模型與文檔對(duì)象模型）
一、JavaScript簡(jiǎn)介
JavaScript是一種解釋執(zhí)行的腳本語(yǔ)言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語(yǔ)言，內(nèi)置支持類型，它遵循ECMAScript標(biāo)準(zhǔn)。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語(yǔ)言，主要用來(lái)給HTML增加動(dòng)態(tài)功能。
幾乎所有主流的語(yǔ)言都可以編譯為JavaScript，進(jìn)而能夠在所有平臺(tái)上的瀏覽器中執(zhí)行，這也體現(xiàn)了JavaScript的強(qiáng)大性和在Web開發(fā)中的重要性。如Blade：一個(gè)Visual Studio擴(kuò)展，可以將C#代碼轉(zhuǎn)換為JavaScript，Ceylon：一個(gè)可編譯為JavaScript的、模塊化的、靜態(tài)類型JVM語(yǔ)言。
JavaScript是一種可以同時(shí)運(yùn)行在前端與后臺(tái)的語(yǔ)言，如Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境（類似Java或.NET）。 Node.js 使用了一個(gè)事件驅(qū)動(dòng)、非阻塞式 I/O 的模型，使其輕量又高效。
1.1、javascript組成
ECMAScript，描述了該語(yǔ)言的語(yǔ)法和基本對(duì)象，如類型、運(yùn)算、流程控制、面向?qū)ο?、異常等?/p>
文檔對(duì)象模型（DOM），描述處理網(wǎng)頁(yè)內(nèi)容的方法和接口。
瀏覽器對(duì)象模型（BOM），描述與瀏覽器進(jìn)行交互的方法和接口。
JavaScript由對(duì)象組成，一切皆為對(duì)象。
1.2、JavaScript腳本語(yǔ)言特點(diǎn)
a)、解釋型的腳本語(yǔ)言。JavaScript是一種解釋型的腳本語(yǔ)言,C、C++等語(yǔ)言先編譯后執(zhí)行,而JavaScript是在程序的運(yùn)行過(guò)程中逐行進(jìn)行解釋。
基于對(duì)象。JavaScript是一種基于對(duì)象的腳本語(yǔ)言,它不僅可以創(chuàng)建對(duì)象,也能使用現(xiàn)有的對(duì)象。
b)、簡(jiǎn)單。JavaScript語(yǔ)言中采用的是弱類型的變量類型,對(duì)使用的數(shù)據(jù)類型未做出嚴(yán)格的要求,是基于Java基本語(yǔ)句和控制的腳本語(yǔ)言,其設(shè)計(jì)簡(jiǎn)單緊湊。
c)、動(dòng)態(tài)性。JavaScript是一種采用事件驅(qū)動(dòng)的腳本語(yǔ)言,它不需要經(jīng)過(guò)Web服務(wù)器就可以對(duì)用戶的輸入做出響應(yīng)。在訪問(wèn)一個(gè)網(wǎng)頁(yè)時(shí),鼠標(biāo)在網(wǎng)頁(yè)中進(jìn)行鼠標(biāo)點(diǎn)擊或上下移、窗口移動(dòng)等操作JavaScript都可直接對(duì)這些事件給出相應(yīng)的響應(yīng)。
d)、跨平臺(tái)性。JavaScript腳本語(yǔ)言不依賴于操作系統(tǒng),僅需要瀏覽器的支持。因此一個(gè)JavaScript腳本在編寫后可以帶到任意機(jī)器上使用,前提上機(jī)器上的瀏覽器支 持JavaScript腳本語(yǔ)言,目前JavaScript已被大多數(shù)的瀏覽器所支持。
二、ECMAScript（JavaScript核心與語(yǔ)法）
2.1、ECMAScript定義
1)、ECMAScript是一個(gè)標(biāo)準(zhǔn)（歐洲計(jì)算機(jī)制造商協(xié)會(huì)），JavaScript只是它的一個(gè)實(shí)現(xiàn)，其他實(shí)現(xiàn)包括ActionScript（Flash腳本）
2)、ECMAScript可以為不同種類的宿主環(huán)境提供核心的腳本編程能力，即ECMAScript不與具體的宿主環(huán)境相綁定，如JavaScript的宿主環(huán)境是瀏覽器，AS的宿主環(huán)境是Flash。、
3)、ECMAScript描述了以下內(nèi)容：語(yǔ)法、類型、語(yǔ)句、關(guān)鍵字、保留字、運(yùn)算符、對(duì)象等
2.2、數(shù)據(jù)類型
在JS中使用var關(guān)鍵詞聲明變量，變量的類型會(huì)根據(jù)其所賦值來(lái)決定（動(dòng)態(tài)類型）。JS中數(shù)據(jù)類型分為原始數(shù)據(jù)類型（5種）和引用數(shù)據(jù)類型（Object類型）。
1）5種原始數(shù)據(jù)類型：Undefined、Null、Boolean、Number和String。需要注意的是JS中字符串屬于原始數(shù)據(jù)類型。
2）typeof運(yùn)算符：查看變量類型，對(duì)變量或值調(diào)用typeof運(yùn)算符將返回下列值之一：
-
undefined – 如果變量是 Undefined 類型的
-
boolean – 如果變量是 Boolean 類型的
-
number – 如果變量是 Number 類型的
-
string – 如果變量是 String 類型的
-
object – 如果變量是一種引用類型或 Null 類型的
3）通過(guò)instanceof 運(yùn)算符解決引用類型判斷問(wèn)題
4）null 被認(rèn)為是對(duì)象的占位符，typeof運(yùn)算符對(duì)于null值返回“object”。
5）原始數(shù)據(jù)類型和引用數(shù)據(jù)類型變量在內(nèi)存中的存放如下：
6）JS中對(duì)類型的定義：一組值的集合。如Boolean類型的值有兩個(gè)：true、false。Undefined和Null 類型都只有一個(gè)值，分別是undefined和null。
Null 類型只有一個(gè)值，就是 null ； Undefined 類型也只有一個(gè)值，即 undefined 。 null 和 undefined 都可以作為字面量（literal）在 JavaScript 代碼中直接使用。
null 與對(duì)象引用有關(guān)系，表示為空或不存在的對(duì)象引用。當(dāng)聲明一個(gè)變量卻沒(méi)有給它賦值的時(shí)候，它的值就是 undefined 。
undefined 的值會(huì)出現(xiàn)在如下情況：
從一個(gè)對(duì)象中獲取某個(gè)屬性，如果該對(duì)象及其 prototype 鏈 中的對(duì)象都沒(méi)有該屬性的時(shí)候，該屬性的值為 undefined 。
一個(gè) function 如果沒(méi)有顯式的通過(guò) return 來(lái)返回值給其調(diào)用者的話，其返回值就是 undefined 。有一個(gè)特例就是在使用new的時(shí)候。
JavaScript 中的 function 可以聲明任意個(gè)形式參數(shù)，當(dāng)該 function 實(shí)際被調(diào)用的時(shí)候，傳入的參數(shù)的個(gè)數(shù)如果小于聲明的形式參數(shù)，那么多余的形式參數(shù)的值為 undefined 。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//js對(duì)象
var user = {
name: "張學(xué)友",
address: "中國(guó)香港"
};
console.log(user.age); //訪問(wèn)對(duì)象中的屬性，未定義
var i;
console.log(i); //變量未賦值
function f(n1){
console.log(n1);
}
var result=f(); //參數(shù)未賦值
console.log(result); //當(dāng)函數(shù)沒(méi)有返回值時(shí)為undefined
</script>
</body>
</html>
結(jié)果：
關(guān)于 null 和 undefined 有一些有趣的特性：
如果對(duì)值為 null 的變量使用 typeof 操作符的話，得到的結(jié)果是 object ；
而對(duì) undefined 的值使用 typeof，得到的結(jié)果是 undefined 。
如 typeof null === "object" //true; typeof undefined === "undefined" //true null == undefined //true，但是 null !== undefined //true
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//js對(duì)象
var user = {
name: "張學(xué)友",
address: "中國(guó)香港"
};
console.log(typeof(user));
console.log(typeof(null));
console.log(typeof(undefined));
console.log(user.name);
console.log(user.age);
if(user.age){
console.log(user.age);
}else{
console.log("沒(méi)有age屬性");
}
//為false的情況
var i;
console.log(!!"");
console.log(!!0);
console.log(!!+0);
console.log(!!-0);
console.log(!!NaN);
console.log(!!null);
console.log(!!undefined);
console.log(typeof(i));
console.log(!!i);
console.log(false);
//是否不為數(shù)字,is Not a Number
console.log(isNaN("Five"));
console.log(isNaN("5"));
</script>
</body>
</html>
結(jié)果：
7)、 boolean類型的特殊性
8)、== 與 ===
JavaScript 中有兩個(gè)判斷值是否相等的操作符，== 與 === 。兩者相比，== 會(huì)做一定的類型轉(zhuǎn)換；而 === 不做類型轉(zhuǎn)換，所接受的相等條件更加嚴(yán)格。
===比較時(shí)會(huì)比較類型
當(dāng)然與之對(duì)應(yīng)的就是!=與!==
盡量使用===而不要使用==
console.log("5"==5); //true
console.log("5"===5); //false
console.log("5"!=5); //false
console.log("5"!==5); //true
2.3、局部變量和全局變量
在函數(shù)中聲明的變量只能在函數(shù)中使用，當(dāng)你退出函數(shù)時(shí)，變量就會(huì)被釋放，這種變量被稱為局部變量。因?yàn)槊總€(gè)局部變量只在各自的函數(shù)中有效，所以你可以在不同的函數(shù)中使用名稱相同的變量。
如果在函數(shù)之外聲明變量，那么頁(yè)面中所有的函數(shù)都可以使用它。在全局變量被聲明后，它們就開始生效了。在網(wǎng)頁(yè)被關(guān)閉后，變量才會(huì)失效。
注意：JS語(yǔ)言中，在代碼塊中聲明的變量屬于全局變量。
JavaScript是一種對(duì)數(shù)據(jù)類型變量要求不太嚴(yán)格的語(yǔ)言，所以不必聲明每一個(gè)變量的類型，變量聲明盡管不是必須的，但在使用變量之前先進(jìn)行聲明是一種好的習(xí)慣?？梢允褂?var 語(yǔ)句來(lái)進(jìn)行變量聲明。如：var men = true; // men 中存儲(chǔ)的值為 Boolean 類型。
變量命名
JavaScript 是一種區(qū)分大小寫的語(yǔ)言，因此將一個(gè)變量命名為best和將其命名為Best是不一樣的。
另外，變量名稱的長(zhǎng)度是任意的，但必須遵循以下規(guī)則：
- 1.第一個(gè)字符必須是一個(gè)字母（大小寫均可）、或一個(gè)下劃線(_)或一個(gè)美元符 ($)。
- 2.后續(xù)的字符可以是字母、數(shù)字、下劃線或美元符。
- 3.變量名稱不能是保留字。
可以不使用var定義變量，但這樣定義的變量是全局變量。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function a(){
var n1=1;
n2=2; //聲明n2時(shí)未使用var，所以n2是全局變量，盡量避免
console.log(n1+","+n2);
}
a();
console.log(n2);
console.log(window.n2);
console.log(window.n1);
console.log(n1);
</script>
</body>
</html>
結(jié)果：
2.4、數(shù)組（Array）
①js中，數(shù)組元素類型可以不一致。
②js中，數(shù)組長(zhǎng)度可以動(dòng)態(tài)改變。
③接著上述代碼，typeof arr 和 arr instanceof Array 分別輸出object和true。
console.log(typeof(names)); //object
console.log(names instanceof Array); //true
console.log("" instanceof String); //false 不是對(duì)象類型
console.log(true instanceof Boolean); //false
數(shù)組對(duì)象與方法
Array 對(duì)數(shù)組的內(nèi)部支持
Array.concat( ) 連接數(shù)組
Array.join( ) 將數(shù)組元素連接起來(lái)以構(gòu)建一個(gè)字符串
Array.length 數(shù)組的大小
Array.pop( ) 刪除并返回?cái)?shù)組的最后一個(gè)元素
Array.push( ) 給數(shù)組添加元素
Array.reverse( ) 顛倒數(shù)組中元素的順序
Array.shift( ) 將元素移出數(shù)組
Array.slice( ) 返回?cái)?shù)組的一部分
Array.sort( ) 對(duì)數(shù)組元素進(jìn)行排序
Array.splice( ) 插入、刪除或替換數(shù)組的元素
Array.toLocaleString( ) 把數(shù)組轉(zhuǎn)換成局部字符串
Array.toString( ) 將數(shù)組轉(zhuǎn)換成一個(gè)字符串
Array.unshift( ) 在數(shù)組頭部插入一個(gè)元素
2.4.1、創(chuàng)建
var arrayObj = new Array(); var arrayObj = new Array([size]); var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);
示例：
var array11 = new Array(); //空數(shù)組
var array12 = new Array(5); //指定長(zhǎng)度，可越界
var array13 = new Array("a","b","c",1,2,3,true,false); //定義并賦值
var array14=[]; //空數(shù)組，語(yǔ)法糖
var array15=[1,2,3,"x","y"]; //定義并賦值
2.4.2、訪問(wèn)與修改
var testGetArrValue=arrayObj[1];
arrayObj[1]= "值";
array12[8]="hello array12"; //賦值或修改
console.log(array12[8]); //取值
//遍歷
for (var i = 0; i < array13.length; i++) {
console.log("arrayl3["+i+"]="+array13[i]);
}
//枚舉
for(var i in array15){
console.log(i+"="+array15[i]); //此處的i是下標(biāo)
}
結(jié)果：
2.4.3、添加元素
將一個(gè)或多個(gè)新元素添加到數(shù)組未尾，并返回?cái)?shù)組新長(zhǎng)度
arrayObj. push([item1 [item2 [. . . [itemN ]]]]);
將一個(gè)或多個(gè)新元素添加到數(shù)組開始，數(shù)組中的元素自動(dòng)后移，返回?cái)?shù)組新長(zhǎng)度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);
將一個(gè)或多個(gè)新元素插入到數(shù)組的指定位置，插入位置的元素自動(dòng)后移，返回被刪除元素?cái)?shù)組，deleteCount要?jiǎng)h除的元素個(gè)數(shù)
arrayObj.splice(insertPos,deleteCount,[item1[, item2[, . . . [,itemN]]]])
示例代碼：
//4.3、添加元素
var array31=[5,8];
//添加到末尾
array31.push(9);
var len=array31.push(10,11);
console.log("長(zhǎng)度為："+len+"——"+array31);
//添加到開始
array31.unshift(4);
var len=array31.unshift(1,2,3);
console.log("長(zhǎng)度為："+len+"——"+array31);
//添加到中間
var len=array31.splice(5,1,6,7); //從第5位開始插入，刪除第5位后的1個(gè)元素，返回被刪除元素
console.log("被刪除："+len+"——"+array31);
運(yùn)行結(jié)果：
2.4.4、刪除
移除最后一個(gè)元素并返回該元素值
arrayObj.pop();
移除最前一個(gè)元素并返回該元素值，數(shù)組中元素自動(dòng)前移
arrayObj.shift();
刪除從指定位置deletePos開始的指定數(shù)量deleteCount的元素，數(shù)組形式返回所移除的元素
arrayObj.splice(deletePos,deleteCount);
示例：
//4.4、刪除
var array41=[1,2,3,4,5,6,7,8];
console.log("array41："+array41);
//刪除最后一個(gè)元素，并返回
var e=array41.pop();
console.log("被刪除："+e+"——"+array41);
//刪除首部元素，并返回
var e=array41.shift();
console.log("被刪除："+e+"——"+array41);
//刪除指定位置與個(gè)數(shù)
var e=array41.splice(1,4); //從索引1開始刪除4個(gè)
console.log("被刪除："+e+"——"+array41);
結(jié)果：
2.4.5、截取和合并
以數(shù)組的形式返回?cái)?shù)組的一部分，注意不包括 end 對(duì)應(yīng)的元素，如果省略 end 將復(fù)制 start 之后的所有元素
arrayObj.slice(start, [end]);
將多個(gè)數(shù)組（也可以是字符串，或者是數(shù)組和字符串的混合）連接為一個(gè)數(shù)組，返回連接好的新的數(shù)組
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]);
示例：
//4.5、截取和合并
var array51=[1,2,3,4,5,6];
var array52=[7,8,9,0,"a","b","c"];
//截取，切片
var array53=array51.slice(2); //從第3個(gè)元素開始截取到最后
console.log("被截?。?+array53+"——"+array51);
var array54=array51.slice(1,4); //從第3個(gè)元素開始截取到索引號(hào)為3的元素
console.log("被截?。?+array54+"——"+array51);
//合并
var array55=array51.concat(array52,["d","e"],"f","g");
console.log("合并后："+array55);
結(jié)果：
2.4.6、拷貝
返回?cái)?shù)組的拷貝數(shù)組，注意是一個(gè)新的數(shù)組，不是指向
arrayObj.slice(0);
返回?cái)?shù)組的拷貝數(shù)組，注意是一個(gè)新的數(shù)組，不是指向
arrayObj.concat();
因?yàn)閿?shù)組是引用數(shù)據(jù)類型，直接賦值并沒(méi)有達(dá)到真正實(shí)現(xiàn)拷貝，地址引用，我們需要的是深拷貝。
2.4.7、排序
反轉(zhuǎn)元素（最前的排到最后、最后的排到最前），返回?cái)?shù)組地址
arrayObj.reverse();
對(duì)數(shù)組元素排序，返回?cái)?shù)組地址
arrayObj.sort();
arrayObj.sort(function(obj1,obj2){});
示例：
var array71=[4,5,6,1,2,3];
array71.sort();
console.log("排序后："+array71);
var array72=[{name:"tom",age:19},{name:"jack",age:20},{name:"lucy",age:18}];
array72.sort(function(user1,user2){
return user1.age<user2.age;
});
console.log("排序后：");
for(var i in array72) console.log(array72[i].name+"，"+array72[i].age);
結(jié)果：
2.4.8、合并成字符
返回字符串，這個(gè)字符串將數(shù)組的每一個(gè)元素值連接在一起，中間用 separator 隔開。
arrayObj.join(separator);
示例代碼：
//4.8、合并成字符與將字符拆分成數(shù)組
var array81=[1,3,5,7,9];
var ids=array81.join(",");
console.log(ids);
//拆分成數(shù)組
var text="hello nodejs and angular";
var array82=text.split(" ");
console.log(array82);
運(yùn)行結(jié)果：
所有代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>數(shù)組操作</title>
</head>
<body>
<script type="text/javascript">
//4.1、創(chuàng)建
var array11 = new Array(); //空數(shù)組
var array12 = new Array(5); //指定長(zhǎng)度，可越界
var array13 = new Array("a","b","c",1,2,3,true,false); //定義并賦值
var array14=[]; //空數(shù)組，語(yǔ)法糖
var array15=[1,2,3,"x","y"]; //定義并賦值
//4.2、訪問(wèn)與修改
array12[8]="hello array12"; //賦值或修改
console.log(array12[8]); //取值
//遍歷
for (var i = 0; i < array13.length; i++) {
//console.log("arrayl3["+i+"]="+array13[i]);
}
//枚舉
for(var i in array15){
//console.log(i+"="+array15[i]); //此處的i是下標(biāo)
}
//4.3、添加元素
var array31=[5,8];
//添加到末尾
array31.push(9);
var len=array31.push(10,11);
console.log("長(zhǎng)度為："+len+"——"+array31);
//添加到開始
array31.unshift(4);
var len=array31.unshift(1,2,3);
console.log("長(zhǎng)度為："+len+"——"+array31);
//添加到中間
var len=array31.splice(5,1,6,7); //從第5位開始插入，刪除第5位后的1個(gè)元素，返回被刪除元素
console.log("被刪除："+len+"——"+array31);
//4.4、刪除
var array41=[1,2,3,4,5,6,7,8];
console.log("array41："+array41);
//刪除最后一個(gè)元素，并返回
var e=array41.pop();
console.log("被刪除："+e+"——"+array41);
//刪除首部元素，并返回
var e=array41.shift();
console.log("被刪除："+e+"——"+array41);
//刪除指定位置與個(gè)數(shù)
var e=array41.splice(1,4); //從索引1開始刪除4個(gè)
console.log("被刪除："+e+"——"+array41);
//4.5、截取和合并
var array51=[1,2,3,4,5,6];
var array52=[7,8,9,0,"a","b","c"];
//截取，切片
var array53=array51.slice(2); //從第3個(gè)元素開始截取到最后
console.log("被截?。?+array53+"——"+array51);
var array54=array51.slice(1,4); //從第3個(gè)元素開始截取到索引號(hào)為3的元素
console.log("被截?。?+array54+"——"+array51);
//合并
var array55=array51.concat(array52,["d","e"],"f","g");
console.log("合并后："+array55);
//4.7、排序
var array71=[4,5,6,1,2,3];
array71.sort();
console.log("排序后："+array71);
var array72=[{name:"tom",age:19},{name:"jack",age:20},{name:"lucy",age:18}];
array72.sort(function(user1,user2){
return user1.age<user2.age;
});
console.log("排序后：");
for(var i in array72) console.log(array72[i].name+"，"+array72[i].age);
//4.8、合并成字符與將字符拆分成數(shù)組
var array81=[1,3,5,7,9];
var ids=array81.join(",");
console.log(ids);
//拆分成數(shù)組
var text="hello nodejs and angular";
var array82=text.split(" ");
console.log(array82);
</script>
</body>
</html>
2.5、正則表達(dá)式RegExp
RegExp 對(duì)象表示正則表達(dá)式，它是對(duì)字符串執(zhí)行模式匹配的強(qiáng)大工具。
RegExp對(duì)象：該對(duì)象代表正則表達(dá)式，用于字符串匹配
① 兩種RegExp對(duì)象創(chuàng)建方式：
方式一，new 一個(gè)RegExp對(duì)象：var regExp = new RegExp(“[a-zA-Z0-9]{3,8}”);
方式二，通過(guò)字面量賦值：var regExp = /^[a-zA-Z0-9]{3,8}$/;
② 正則表達(dá)式的具體寫法使用時(shí)查詢文檔。
③ 常用方法：test(string)，返回true或false。
直接量語(yǔ)法
/pattern/attributes
創(chuàng)建 RegExp 對(duì)象的語(yǔ)法：
new RegExp(pattern, attributes);
參數(shù)
參數(shù) pattern 是一個(gè)字符串，指定了正則表達(dá)式的模式或其他正則表達(dá)式。
參數(shù) attributes 是一個(gè)可選的字符串，包含屬性 "g"、"i" 和 "m"，分別用于指定全局匹配、區(qū)分大小寫的匹配和多行匹配。ECMAScript 標(biāo)準(zhǔn)化之前，不支持 m 屬性。如果 pattern 是正則表達(dá)式，而不是字符串，則必須省略該參數(shù)。
返回值
一個(gè)新的 RegExp 對(duì)象，具有指定的模式和標(biāo)志。如果參數(shù) pattern 是正則表達(dá)式而不是字符串，那么 RegExp() 構(gòu)造函數(shù)將用與指定的 RegExp 相同的模式和標(biāo)志創(chuàng)建一個(gè)新的 RegExp 對(duì)象。
如果不用 new 運(yùn)算符，而將 RegExp() 作為函數(shù)調(diào)用，那么它的行為與用 new 運(yùn)算符調(diào)用時(shí)一樣，只是當(dāng) pattern 是正則表達(dá)式時(shí)，它只返回 pattern，而不再創(chuàng)建一個(gè)新的 RegExp 對(duì)象。
拋出
SyntaxError - 如果 pattern 不是合法的正則表達(dá)式，或 attributes 含有 "g"、"i" 和 "m" 之外的字符，拋出該異常。
TypeError - 如果 pattern 是 RegExp 對(duì)象，但沒(méi)有省略 attributes 參數(shù)，拋出該異常。
方括號(hào)
方括號(hào)用于查找某個(gè)范圍內(nèi)的字符：
| 表達(dá)式 | 描述 |
|---|---|
| [abc] | 查找方括號(hào)之間的任何字符。 |
| [^abc] | 查找任何不在方括號(hào)之間的字符。 |
| [0-9] | 查找任何從 0 至 9 的數(shù)字。 |
| [a-z] | 查找任何從小寫 a 到小寫 z 的字符。 |
| [A-Z] | 查找任何從大寫 A 到大寫 Z 的字符。 |
| [A-z] | 查找任何從大寫 A 到小寫 z 的字符。 |
| [adgk] | 查找給定集合內(nèi)的任何字符。 |
| [^adgk] | 查找給定集合外的任何字符。 |
| (red|blue|green) | 查找任何指定的選項(xiàng)。 |
元字符
元字符（Metacharacter）是擁有特殊含義的字符：
| 元字符 | 描述 |
|---|---|
| . | 查找單個(gè)字符，除了換行和行結(jié)束符。 |
| \w | 查找單詞字符。 |
| \W | 查找非單詞字符。 |
| \d | 查找數(shù)字。 |
| \D | 查找非數(shù)字字符。 |
| \s | 查找空白字符。 |
| \S | 查找非空白字符。 |
| \b | 匹配單詞邊界。 |
| \B | 匹配非單詞邊界。 |
| \0 | 查找 NUL 字符。 |
| \n | 查找換行符。 |
| \f | 查找換頁(yè)符。 |
| \r | 查找回車符。 |
| \t | 查找制表符。 |
| \v | 查找垂直制表符。 |
| \xxx | 查找以八進(jìn)制數(shù) xxx 規(guī)定的字符。 |
| \xdd | 查找以十六進(jìn)制數(shù) dd 規(guī)定的字符。 |
| \uxxxx | 查找以十六進(jìn)制數(shù) xxxx 規(guī)定的 Unicode 字符。 |
量詞
| 量詞 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一個(gè) n 的字符串。 |
| n* | 匹配任何包含零個(gè)或多個(gè) n 的字符串。 |
| n? | 匹配任何包含零個(gè)或一個(gè) n 的字符串。 |
| n{X} | 匹配包含 X 個(gè) n 的序列的字符串。 |
| n{X,Y} | 匹配包含 X 至 Y 個(gè) n 的序列的字符串。 |
| n{X,} | 匹配包含至少 X 個(gè) n 的序列的字符串。 |
| n$ | 匹配任何結(jié)尾為 n 的字符串。 |
| ^n | 匹配任何開頭為 n 的字符串。 |
| ?=n | 匹配任何其后緊接指定字符串 n 的字符串。 |
| ?!n | 匹配任何其后沒(méi)有緊接指定字符串 n 的字符串。 |
RegExp 對(duì)象屬性
| 屬性 | 描述 | FF | IE |
|---|---|---|---|
| global | RegExp 對(duì)象是否具有標(biāo)志 g。 | 1 | 4 |
| ignoreCase | RegExp 對(duì)象是否具有標(biāo)志 i。 | 1 | 4 |
| lastIndex | 一個(gè)整數(shù)，標(biāo)示開始下一次匹配的字符位置。 | 1 | 4 |
| multiline | RegExp 對(duì)象是否具有標(biāo)志 m。 | 1 | 4 |
| source | 正則表達(dá)式的源文本。 | 1 | 4 |
RegExp 對(duì)象方法
| 方法 | 描述 | FF | IE |
|---|---|---|---|
| compile | 編譯正則表達(dá)式。 | 1 | 4 |
| exec | 檢索字符串中指定的值。返回找到的值，并確定其位置。 | 1 | 4 |
| test | 檢索字符串中指定的值。返回 true 或 false。 | 1 | 4 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var reg1=/\d{2}/igm; //定義正則
var reg2=new RegExp("\D{2}","igm"); //定義正則
//驗(yàn)證郵政編碼
var reg3=/^\d{6}$/igm;
console.log(reg3.test("519000")); //true
console.log(reg3.test("abc123")); //false
//查找同時(shí)出現(xiàn)3個(gè)字母的索引
var reg4=new RegExp("[A-Za-z]{3}","igm");
console.log(reg4.exec("ab1cd2efg3lw3sd032kjsdljkf23sdlk"));
//["efg", index: 6, input: "ab1cd2efg3lw3sd032kjsdljkf23sdlk"]
//身份證
//411081199004235955 41108119900423595x 41108119900423595X
//郵箱
//zhangguo123@qq.com zhangguo@sina.com.cn
</script>
</body>
</html>
結(jié)果：
支持正則表達(dá)式的 String 對(duì)象的方法
| 方法 | 描述 | FF | IE |
|---|---|---|---|
| search | 檢索與正則表達(dá)式相匹配的值。 | 1 | 4 |
| match | 找到一個(gè)或多個(gè)正則表達(dá)式的匹配。 | 1 | 4 |
| replace | 替換與正則表達(dá)式匹配的子串。 | 1 | 4 |
| split | 把字符串分割為字符串?dāng)?shù)組。 | 1 | 4 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var reg1=/\d{2}/igm;
console.log("kjds23sd9we23sdoi1we230we12sd".search(reg1)); //4 第一次匹配成功的索引
console.log("kjds23sd9we56sdoi1we780we98sd".match(reg1)); //["23", "56", "78", "98"]
//刪除所有數(shù)字
console.log("kjds23sd9we56sdoi1we780we98sd".replace(/\d/igm,"")); //kjdssdwesdoiwewesd
//所有數(shù)字增加大括號(hào)，反向引用 $組號(hào) 括號(hào)用于分組
console.log("kjds23sd9we56sdoi1we780we98sd".replace(/(\d+)/igm,"\{$1\}")); //kjds{23}sd{9}we{56}sdoi{1}we{780}we{98}sd
//拆分
console.log("kjds23sd9we56sdoi1we780we98sd".split(/[w\d]+/)); //["kjds", "sd", "e", "sdoi", "e", "e", "sd"]
//ID (虛擬的)
//411081197104235955 411081198600423595x 41108119880423595X
//^\d{17}[xX0-9]{1}$
//Email
//zhangguo123@qq.com zhangguo@sina.com.cn
//\w+@\w+\.\w{2,5}(\.\w{2,5})?
</script>
</body>
</html>
結(jié)果：
2.6、字符串對(duì)象String
字符串是 JavaScript 的一種基本的數(shù)據(jù)類型。
String 對(duì)象的 length 屬性聲明了該字符串中的字符數(shù)。
String 類定義了大量操作字符串的方法，例如從字符串中提取字符或子串，或者檢索字符或子串。
需要注意的是，JavaScript 的字符串是不可變的（immutable），String 類定義的方法都不能改變字符串的內(nèi)容。像 String.toUpperCase() 這樣的方法，返回的是全新的字符串，而不是修改原始字符串。
String 對(duì)象屬性
| 屬性 | 描述 |
|---|---|
| constructor | 對(duì)創(chuàng)建該對(duì)象的函數(shù)的引用 |
| length | 字符串的長(zhǎng)度 |
| prototype | 允許您向?qū)ο筇砑訉傩院头椒?/td> |
String 對(duì)象方法
| 方法 | 描述 |
|---|---|
| anchor() | 創(chuàng)建 HTML 錨。 |
| big() | 用大號(hào)字體顯示字符串。 |
| blink() | 顯示閃動(dòng)字符串。 |
| bold() | 使用粗體顯示字符串。 |
| charAt() | 返回在指定位置的字符。 |
| charCodeAt() | 返回在指定的位置的字符的 Unicode 編碼。 |
| concat() | 連接字符串。 |
| fixed() | 以打字機(jī)文本顯示字符串。 |
| fontcolor() | 使用指定的顏色來(lái)顯示字符串。 |
| fontsize() | 使用指定的尺寸來(lái)顯示字符串。 |
| fromCharCode() | 從字符編碼創(chuàng)建一個(gè)字符串。 |
| indexOf() | 檢索字符串。 |
| italics() | 使用斜體顯示字符串。 |
| lastIndexOf() | 從后向前搜索字符串。 |
| link() | 將字符串顯示為鏈接。 |
| localeCompare() | 用本地特定的順序來(lái)比較兩個(gè)字符串。 |
| match() | 找到一個(gè)或多個(gè)正則表達(dá)式的匹配。 |
| replace() | 替換與正則表達(dá)式匹配的子串。 |
| search() | 檢索與正則表達(dá)式相匹配的值。 |
| slice() | 提取字符串的片斷，并在新的字符串中返回被提取的部分。 |
| small() | 使用小字號(hào)來(lái)顯示字符串。 |
| split() | 把字符串分割為字符串?dāng)?shù)組。 |
| strike() | 使用刪除線來(lái)顯示字符串。 |
| sub() | 把字符串顯示為下標(biāo)。 |
| substr() | 從起始索引號(hào)提取字符串中指定數(shù)目的字符。 |
| substring() | 提取字符串中兩個(gè)指定的索引號(hào)之間的字符。 |
| sup() | 把字符串顯示為上標(biāo)。 |
| toLocaleLowerCase() | 把字符串轉(zhuǎn)換為小寫。 |
| toLocaleUpperCase() | 把字符串轉(zhuǎn)換為大寫。 |
| toLowerCase() | 把字符串轉(zhuǎn)換為小寫。 |
| toUpperCase() | 把字符串轉(zhuǎn)換為大寫。 |
| toSource() | 代表對(duì)象的源代碼。 |
| toString() | 返回字符串。 |
| valueOf() | 返回某個(gè)字符串對(duì)象的原始值。 |
2.7、時(shí)間日期對(duì)象Date
Date 對(duì)象用于處理日期和時(shí)間。
創(chuàng)建 Date 對(duì)象的語(yǔ)法：
var myDate=new Date();
注釋：Date 對(duì)象會(huì)自動(dòng)把當(dāng)前日期和時(shí)間保存為其初始值。
Date 對(duì)象屬性
| 屬性 | 描述 |
|---|---|
| constructor | 返回對(duì)創(chuàng)建此對(duì)象的 Date 函數(shù)的引用。 |
| prototype | 使您有能力向?qū)ο筇砑訉傩院头椒ā?/td> |
Date 對(duì)象方法
| 方法 | 描述 |
|---|---|
| Date() | 返回當(dāng)日的日期和時(shí)間。 |
| getDate() | 從 Date 對(duì)象返回一個(gè)月中的某一天 (1 ~ 31)。 |
| getDay() | 從 Date 對(duì)象返回一周中的某一天 (0 ~ 6)。 |
| getMonth() | 從 Date 對(duì)象返回月份 (0 ~ 11)。 |
| getFullYear() | 從 Date 對(duì)象以四位數(shù)字返回年份。 |
| getYear() | 請(qǐng)使用 getFullYear() 方法代替。 |
| getHours() | 返回 Date 對(duì)象的小時(shí) (0 ~ 23)。 |
| getMinutes() | 返回 Date 對(duì)象的分鐘 (0 ~ 59)。 |
| getSeconds() | 返回 Date 對(duì)象的秒數(shù) (0 ~ 59)。 |
| getMilliseconds() | 返回 Date 對(duì)象的毫秒(0 ~ 999)。 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒數(shù)。 |
| getTimezoneOffset() | 返回本地時(shí)間與格林威治標(biāo)準(zhǔn)時(shí)間 (GMT) 的分鐘差。 |
| getUTCDate() | 根據(jù)世界時(shí)從 Date 對(duì)象返回月中的一天 (1 ~ 31)。 |
| getUTCDay() | 根據(jù)世界時(shí)從 Date 對(duì)象返回周中的一天 (0 ~ 6)。 |
| getUTCMonth() | 根據(jù)世界時(shí)從 Date 對(duì)象返回月份 (0 ~ 11)。 |
| getUTCFullYear() | 根據(jù)世界時(shí)從 Date 對(duì)象返回四位數(shù)的年份。 |
| getUTCHours() | 根據(jù)世界時(shí)返回 Date 對(duì)象的小時(shí) (0 ~ 23)。 |
| getUTCMinutes() | 根據(jù)世界時(shí)返回 Date 對(duì)象的分鐘 (0 ~ 59)。 |
| getUTCSeconds() | 根據(jù)世界時(shí)返回 Date 對(duì)象的秒鐘 (0 ~ 59)。 |
| getUTCMilliseconds() | 根據(jù)世界時(shí)返回 Date 對(duì)象的毫秒(0 ~ 999)。 |
| parse() | 返回1970年1月1日午夜到指定日期（字符串）的毫秒數(shù)。 |
| setDate() | 設(shè)置 Date 對(duì)象中月的某一天 (1 ~ 31)。 |
| setMonth() | 設(shè)置 Date 對(duì)象中月份 (0 ~ 11)。 |
| setFullYear() | 設(shè)置 Date 對(duì)象中的年份（四位數(shù)字）。 |
| setYear() | 請(qǐng)使用 setFullYear() 方法代替。 |
| setHours() | 設(shè)置 Date 對(duì)象中的小時(shí) (0 ~ 23)。 |
| setMinutes() | 設(shè)置 Date 對(duì)象中的分鐘 (0 ~ 59)。 |
| setSeconds() | 設(shè)置 Date 對(duì)象中的秒鐘 (0 ~ 59)。 |
| setMilliseconds() | 設(shè)置 Date 對(duì)象中的毫秒 (0 ~ 999)。 |
| setTime() | 以毫秒設(shè)置 Date 對(duì)象。 |
| setUTCDate() | 根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中月份的一天 (1 ~ 31)。 |
| setUTCMonth() | 根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的月份 (0 ~ 11)。 |
| setUTCFullYear() | 根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的年份（四位數(shù)字）。 |
| setUTCHours() | 根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的小時(shí) (0 ~ 23)。 |
| setUTCMinutes() | 根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的分鐘 (0 ~ 59)。 |
| setUTCSeconds() | 根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的秒鐘 (0 ~ 59)。 |
| setUTCMilliseconds() | 根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的毫秒 (0 ~ 999)。 |
| toSource() | 返回該對(duì)象的源代碼。 |
| toString() | 把 Date 對(duì)象轉(zhuǎn)換為字符串。 |
| toTimeString() | 把 Date 對(duì)象的時(shí)間部分轉(zhuǎn)換為字符串。 |
| toDateString() | 把 Date 對(duì)象的日期部分轉(zhuǎn)換為字符串。 |
| toGMTString() | 請(qǐng)使用 toUTCString() 方法代替。 |
| toUTCString() | 根據(jù)世界時(shí)，把 Date 對(duì)象轉(zhuǎn)換為字符串。 |
| toLocaleString() | 根據(jù)本地時(shí)間格式，把 Date 對(duì)象轉(zhuǎn)換為字符串。 |
| toLocaleTimeString() | 根據(jù)本地時(shí)間格式，把 Date 對(duì)象的時(shí)間部分轉(zhuǎn)換為字符串。 |
| toLocaleDateString() | 根據(jù)本地時(shí)間格式，把 Date 對(duì)象的日期部分轉(zhuǎn)換為字符串。 |
| UTC() | 根據(jù)世界時(shí)返回 1970 年 1 月 1 日 到指定日期的毫秒數(shù)。 |
| valueOf() | 返回 Date 對(duì)象的原始值。 |
2.8、數(shù)學(xué)對(duì)象Math
Math 對(duì)象并不像 Date 和 String 那樣是對(duì)象的類，因此沒(méi)有構(gòu)造函數(shù) Math()，像 Math.sin() 這樣的函數(shù)只是函數(shù)，不是某個(gè)對(duì)象的方法。您無(wú)需創(chuàng)建它，通過(guò)把 Math 作為對(duì)象使用就可以調(diào)用其所有屬性和方法。
var pi_value=Math.PI; var sqrt_value=Math.sqrt(15);
Math 對(duì)象屬性
| 屬性 | 描述 |
|---|---|
| E | 返回算術(shù)常量 e，即自然對(duì)數(shù)的底數(shù)（約等于2.718）。 |
| LN2 | 返回 2 的自然對(duì)數(shù)（約等于0.693）。 |
| LN10 | 返回 10 的自然對(duì)數(shù)（約等于2.302）。 |
| LOG2E | 返回以 2 為底的 e 的對(duì)數(shù)（約等于 1.414）。 |
| LOG10E | 返回以 10 為底的 e 的對(duì)數(shù)（約等于0.434）。 |
| PI | 返回圓周率（約等于3.14159）。 |
| SQRT1_2 | 返回返回 2 的平方根的倒數(shù)（約等于 0.707）。 |
| SQRT2 | 返回 2 的平方根（約等于 1.414）。 |
Math 對(duì)象方法
| 方法 | 描述 |
|---|---|
| abs(x) | 返回?cái)?shù)的絕對(duì)值。 |
| acos(x) | 返回?cái)?shù)的反余弦值。 |
| asin(x) | 返回?cái)?shù)的反正弦值。 |
| atan(x) | 以介于 -PI/2 與 PI/2 弧度之間的數(shù)值來(lái)返回 x 的反正切值。 |
| atan2(y,x) | 返回從 x 軸到點(diǎn) (x,y) 的角度（介于 -PI/2 與 PI/2 弧度之間）。 |
| ceil(x) | 對(duì)數(shù)進(jìn)行上舍入。 |
| cos(x) | 返回?cái)?shù)的余弦。 |
| exp(x) | 返回 e 的指數(shù)。 |
| floor(x) | 對(duì)數(shù)進(jìn)行下舍入。 |
| log(x) | 返回?cái)?shù)的自然對(duì)數(shù)（底為e）。 |
| max(x,y) | 返回 x 和 y 中的最高值。 |
| min(x,y) | 返回 x 和 y 中的最低值。 |
| pow(x,y) | 返回 x 的 y 次冪。 |
| random() | 返回 0 ~ 1 之間的隨機(jī)數(shù)。 |
| round(x) | 把數(shù)四舍五入為最接近的整數(shù)。 |
| sin(x) | 返回?cái)?shù)的正弦。 |
| sqrt(x) | 返回?cái)?shù)的平方根。 |
| tan(x) | 返回角的正切。 |
| toSource() | 返回該對(duì)象的源代碼。 |
| valueOf() | 返回 Math 對(duì)象的原始值。 |
2.9、JavaScript 全局對(duì)象
全局屬性和函數(shù)可用于所有內(nèi)建的 JavaScript 對(duì)象。
全局對(duì)象是預(yù)定義的對(duì)象，作為 JavaScript 的全局函數(shù)和全局屬性的占位符。通過(guò)使用全局對(duì)象，可以訪問(wèn)所有其他所有預(yù)定義的對(duì)象、函數(shù)和屬性。全局對(duì)象不是任何對(duì)象的屬性，所以它沒(méi)有名稱。
在頂層 JavaScript 代碼中，可以用關(guān)鍵字 this 引用全局對(duì)象。但通常不必用這種方式引用全局對(duì)象，因?yàn)槿謱?duì)象是作用域鏈的頭，這意味著所有非限定性的變量和函數(shù)名都會(huì)作為該對(duì)象的屬性來(lái)查詢。例如，當(dāng)JavaScript 代碼引用 parseInt() 函數(shù)時(shí)，它引用的是全局對(duì)象的 parseInt 屬性。全局對(duì)象是作用域鏈的頭，還意味著在頂層 JavaScript 代碼中聲明的所有變量都將成為全局對(duì)象的屬性。
全局對(duì)象只是一個(gè)對(duì)象，而不是類。既沒(méi)有構(gòu)造函數(shù)，也無(wú)法實(shí)例化一個(gè)新的全局對(duì)象。
在 JavaScript 代碼嵌入一個(gè)特殊環(huán)境中時(shí)，全局對(duì)象通常具有環(huán)境特定的屬性。實(shí)際上，ECMAScript 標(biāo)準(zhǔn)沒(méi)有規(guī)定全局對(duì)象的類型，JavaScript 的實(shí)現(xiàn)或嵌入的 JavaScript 都可以把任意類型的對(duì)象作為全局對(duì)象，只要該對(duì)象定義了這里列出的基本屬性和函數(shù)。例如，在允許通過(guò) LiveConnect 或相關(guān)的技術(shù)來(lái)腳本化 Java 的 JavaScript 實(shí)現(xiàn)中，全局對(duì)象被賦予了這里列出的 java 和 Package 屬性以及 getClass() 方法。而在客戶端 JavaScript 中，全局對(duì)象就是 Window 對(duì)象，表示允許 JavaScript 代碼的 Web 瀏覽器窗口。
頂層函數(shù)（全局函數(shù)）
| 函數(shù) | 描述 |
|---|---|
| decodeURI() | 解碼某個(gè)編碼的 URI。 |
| decodeURIComponent() | 解碼一個(gè)編碼的 URI 組件。 |
| encodeURI() | 把字符串編碼為 URI。 |
| encodeURIComponent() | 把字符串編碼為 URI 組件。 |
| escape() | 對(duì)字符串進(jìn)行編碼。 |
| eval() | 計(jì)算 JavaScript 字符串，并把它作為腳本代碼來(lái)執(zhí)行。 |
| getClass() | 返回一個(gè) JavaObject 的 JavaClass。 |
| isFinite() | 檢查某個(gè)值是否為有窮大的數(shù)。 |
| isNaN() | 檢查某個(gè)值是否是數(shù)字。 |
| Number() | 把對(duì)象的值轉(zhuǎn)換為數(shù)字。 |
| parseFloat() | 解析一個(gè)字符串并返回一個(gè)浮點(diǎn)數(shù)。 |
| parseInt() | 解析一個(gè)字符串并返回一個(gè)整數(shù)。 |
| String() | 把對(duì)象的值轉(zhuǎn)換為字符串。 |
| unescape() | 對(duì)由 escape() 編碼的字符串進(jìn)行解碼。 |
頂層屬性（全局屬性）
| 方法 | 描述 |
|---|---|
| Infinity | 代表正的無(wú)窮大的數(shù)值。 |
| java | 代表 java.* 包層級(jí)的一個(gè) JavaPackage。 |
| NaN | 指示某個(gè)值是不是數(shù)字值。 |
| Packages | 根 JavaPackage 對(duì)象。 |
| undefined | 指示未定義的值。 |
在 JavaScript 核心語(yǔ)言中，全局對(duì)象的預(yù)定義屬性都是不可枚舉的，所有可以用 for/in 循環(huán)列出所有隱式或顯式聲明的全局變量，如下所示：
var variables = "";
for (var name in this)
{
variables += name + "、";
}
document.write(variables);
結(jié)果：
2.10、JavaScript避免使用的語(yǔ)法
1）、 ==
Javascript有兩組相等運(yùn)算符，一組是==和!=，另一組是===和!==。前者只比較值的相等，后者除了值以外，還比較類型是否相同。
請(qǐng)盡量不要使用前一組，永遠(yuǎn)只使用===和!==。因?yàn)?=默認(rèn)會(huì)進(jìn)行類型轉(zhuǎn)換，規(guī)則十分難記。如果你不相信的話，請(qǐng)回答下面五個(gè)判斷式的值是true還是false：
false == 'false' false == undefined false == null null == undefined null == ''
2）、with
with的本意是減少鍵盤輸入。比如
obj.a = obj.b; obj.c = obj.d;
可以簡(jiǎn)寫成
with(obj) {
a = b;
c = d;
}
但是，在實(shí)際運(yùn)行時(shí)，解釋器會(huì)首先判斷obj.b和obj.d是否存在，如果不存在的話，再判斷全局變量b和d是否存在。這樣就導(dǎo)致了低效率，而且可能會(huì)導(dǎo)致意外，因此最好不要使用with語(yǔ)句。
3）、eval
eval用來(lái)直接執(zhí)行一個(gè)字符串。這條語(yǔ)句也是不應(yīng)該使用的，因?yàn)樗行阅芎桶踩缘膯?wèn)題，并且使得代碼更難閱讀。
eval能夠做到的事情，不用它也能做到。比如
eval("myValue = myObject." + myKey + ";");
可以直接寫成
myValue = myObject[myKey];
至于ajax操作返回的json字符串，可以使用官方網(wǎng)站提供的解析器json_parse.js運(yùn)行。
4）、 continue
這條命令的作用是返回到循環(huán)的頭部，但是循環(huán)本來(lái)就會(huì)返回到頭部。所以通過(guò)適當(dāng)?shù)臉?gòu)造，完全可以避免使用這條命令，使得效率得到改善。
5）、switch 貫穿
switch結(jié)構(gòu)中的case語(yǔ)句，默認(rèn)是順序執(zhí)行，除非遇到break，return和throw。有的程序員喜歡利用這個(gè)特點(diǎn)，比如
switch(n) {
case 1:
case 2:
break;
}
這樣寫容易出錯(cuò)，而且難以發(fā)現(xiàn)。因此建議避免switch貫穿，凡是有case的地方，一律加上break。
switch(n) {
case 1:
break;
case 2:
break;
}
6）、單行的塊結(jié)構(gòu)
if、while、do和for，都是塊結(jié)構(gòu)語(yǔ)句，但是也可以接受單行命令。比如
if (ok) t = true;
甚至寫成
if (ok)
t = true;
這樣不利于閱讀代碼，而且將來(lái)添加語(yǔ)句時(shí)非常容易出錯(cuò)。建議不管是否只有一行命令，都一律加上大括號(hào)。
if (ok){
t = true;
}
7）、 ++和--
遞增運(yùn)算符++和遞減運(yùn)算符--，直接來(lái)自C語(yǔ)言，表面上可以讓代碼變得很緊湊，但是實(shí)際上會(huì)讓代碼看上去更復(fù)雜和更晦澀。因此為了代碼的整潔性和易讀性，不用為好。
8）、位運(yùn)算符
Javascript完全套用了Java的位運(yùn)算符，包括按位與&、按位或|、按位異或^、按位非~、左移<<、帶符號(hào)的右移>>和用0補(bǔ)足的右移>>>。
這套運(yùn)算符針對(duì)的是整數(shù)，所以對(duì)Javascript完全無(wú)用，因?yàn)镴avascript內(nèi)部，所有數(shù)字都保存為雙精度浮點(diǎn)數(shù)。如果使用它們的話，Javascript不得不將運(yùn)算數(shù)先轉(zhuǎn)為整數(shù)，然后再進(jìn)行運(yùn)算，這樣就降低了速度。而且"按位與運(yùn)算符"&同"邏輯與運(yùn)算符"&&，很容易混淆。
9）、function語(yǔ)句
在Javascript中定義一個(gè)函數(shù)，有兩種寫法：
function foo() { }
和
var foo = function () { }
兩種寫法完全等價(jià)。但是在解析的時(shí)候，前一種寫法會(huì)被解析器自動(dòng)提升到代碼的頭部，因此違背了函數(shù)應(yīng)該先定義后使用的要求，所以建議定義函數(shù)時(shí)，全部采用后一種寫法。
10）、基本數(shù)據(jù)類型的包裝對(duì)象
Javascript的基本數(shù)據(jù)類型包括字符串、數(shù)字、布爾值，它們都有對(duì)應(yīng)的包裝對(duì)象String、Number和Boolean。所以，有人會(huì)這樣定義相關(guān)值：
new String("Hello World");
new Number(2000);
new Boolean(false);
這樣寫完全沒(méi)有必要，而且非常費(fèi)解，因此建議不要使用。
另外，new Object和new Array也不建議使用，可以用{}和[]代替。
11）、new語(yǔ)句
Javascript是世界上第一個(gè)被大量使用的支持Lambda函數(shù)的語(yǔ)言，本質(zhì)上屬于與Lisp同類的函數(shù)式編程語(yǔ)言。但是當(dāng)前世界，90%以上的程序員都是使用面向?qū)ο缶幊?。為了靠近主流，Javascript做出了妥協(xié)，采納了類的概念，允許根據(jù)類生成對(duì)象。
類是這樣定義的：
var Cat = function (name) {
this.name = name;
this.saying = 'meow' ;
}
然后，再生成一個(gè)對(duì)象
var myCat = new Cat('mimi');
這種利用函數(shù)生成類、利用new生成對(duì)象的語(yǔ)法，其實(shí)非常奇怪，一點(diǎn)都不符合直覺。而且，使用的時(shí)候，很容易忘記加上new，就會(huì)變成執(zhí)行函數(shù)，然后莫名其妙多出幾個(gè)全局變量。所以，建議不要這樣創(chuàng)建對(duì)象，而采用一種變通方法。
Douglas Crockford給出了一個(gè)函數(shù)：
Object.beget = function (o) {
var F = function (o) {};
F.prototype = o ;
return new F;
};
創(chuàng)建對(duì)象時(shí)就利用這個(gè)函數(shù)，對(duì)原型對(duì)象進(jìn)行操作：
var Cat = {
name:'',
saying:'meow'
};
var myCat = Object.beget(Cat);
對(duì)象生成后，可以自行對(duì)相關(guān)屬性進(jìn)行賦值：
myCat.name = 'mimi';
12）、void
在大多數(shù)語(yǔ)言中，void都是一種類型，表示沒(méi)有值。但是在Javascript中，void是一個(gè)運(yùn)算符，接受一個(gè)運(yùn)算數(shù)，并返回undefined。
void 0; // undefined
這個(gè)命令沒(méi)什么用，而且很令人困惑，建議避免使用。
三、BOM
3.1、BOM概要
BOM(Browser Object Model) 即瀏覽器對(duì)象模型，主要是指一些瀏覽器內(nèi)置對(duì)象如：window、location、navigator、screen、history等對(duì)象，用于完成一些操作瀏覽器的特定API。
用于描述這種對(duì)象與對(duì)象之間層次關(guān)系的模型，瀏覽器對(duì)象模型提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動(dòng)的對(duì)象結(jié)構(gòu)。BOM由多個(gè)對(duì)象組成，其中代表瀏覽器窗口的Window對(duì)象是BOM的頂層對(duì)象，其他對(duì)象都是該對(duì)象的子對(duì)象。
- BOM是browser object model的縮寫，簡(jiǎn)稱瀏覽器對(duì)象模型
- BOM提供了獨(dú)立于內(nèi)容而與瀏覽器窗口進(jìn)行交互的對(duì)象
- 由于BOM主要用于管理窗口與窗口之間的通訊，因此其核心對(duì)象是window
- BOM由一系列相關(guān)的對(duì)象構(gòu)成，并且每個(gè)對(duì)象都提供了很多方法與屬性
- BOM缺乏標(biāo)準(zhǔn)，JavaScript語(yǔ)法的標(biāo)準(zhǔn)化組織是ECMA，DOM的標(biāo)準(zhǔn)化組織是W3C
- BOM最初是Netscape瀏覽器標(biāo)準(zhǔn)的一部分
BOM結(jié)構(gòu)
從上圖可以看出：DOM是屬于BOM的一個(gè)屬性。
window對(duì)象是BOM的頂層(核心)對(duì)象，所有對(duì)象都是通過(guò)它延伸出來(lái)的，也可以稱為window的子對(duì)象。
由于window是頂層對(duì)象，因此調(diào)用它的子對(duì)象時(shí)可以不顯示的指明window對(duì)象。
以下兩種寫法均可：
document.write("www.dbjr.com.cn");
window.document.write(www.dbjr.com.cn);
3.2、BOM導(dǎo)圖
BOM部分主要是針對(duì)瀏覽器的內(nèi)容，其中常用的就是window對(duì)象和location
window是全局對(duì)象很多關(guān)于瀏覽器的腳本設(shè)置都是通過(guò)它。
location則是與地址欄內(nèi)容相關(guān)，比如想要跳轉(zhuǎn)到某個(gè)頁(yè)面，或者通過(guò)URL獲取一定的內(nèi)容。
navigator中有很多瀏覽器相關(guān)的內(nèi)容，通常判斷瀏覽器類型都是通過(guò)這個(gè)對(duì)象。
screen常常用來(lái)判斷屏幕的高度寬度等。
history訪問(wèn)瀏覽器的歷史記錄，如前進(jìn)、后臺(tái)、跳轉(zhuǎn)到指定位置。
3.3、window對(duì)象
window對(duì)象在瀏覽器中具有雙重角色：它既是ECMAscript規(guī)定的全局global對(duì)象，又是javascript訪問(wèn)瀏覽器窗口的一個(gè)接口。
moveBy() 函數(shù) moveTo() 函數(shù) resizeBy() 函數(shù) resizeTo() 函數(shù) scrollTo() 函數(shù) scrollBy() 函數(shù) focus() 函數(shù) blur() 函數(shù) open() 函數(shù) close() 函數(shù) opener 屬性 alert() 函數(shù) confirm() 函數(shù) prompt() 函數(shù) defaultStatus 屬性 status 屬性 setTimeout() 函數(shù) clearTimeout() 函數(shù) setInterval() 函數(shù) clearInterval() 函數(shù)
1、獲取窗口相對(duì)于屏幕左上角的位置
window.onresize = function() {
var leftPos = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenLeft === 'number') ? window.screenTop : window. screenY;
document.write(leftPos+"，"+topPos);
console.log(leftPos+"，"+topPos);
}
需要注意的一點(diǎn)是，在IE，opera中，screenTop保存的是頁(yè)面可見區(qū)域距離屏幕左側(cè)的距離，而chrome,firefox,safari中，screenTop/screenY保存的則是整個(gè)瀏覽器區(qū)域距離屏幕左側(cè)的距離。也就是說(shuō)，二者差了一個(gè)瀏覽器工具欄的像素高度。
2、移動(dòng)窗口，調(diào)整窗口大小
window.moveTo(0,0) window.moveBy(20,10) window.resizeTo(100,100); window.resizeBy(100,100);
注意，這幾個(gè)方法在瀏覽器中很可能會(huì)被禁用。
3、獲得瀏覽器頁(yè)面視口的大小
var pageWith=document.documentElement.clientWidth||document.body.clientWidth; var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
4、導(dǎo)航和打開窗口
window.open()既可以導(dǎo)航到特定的URL，也可以打開一個(gè)新的瀏覽器窗口，其接收四個(gè)參數(shù)，要加載的url，窗口目標(biāo)（可以是關(guān)鍵字_self,_parent,_top,_blank）,一個(gè)特性字符串，以及一個(gè)表示新頁(yè)面是否取代瀏覽器歷史記錄中當(dāng)前加載頁(yè)面的布爾值。通常只需要傳遞第一個(gè)參數(shù)。注意，在很多瀏覽器中，都是阻止彈出窗口的。
5、定時(shí)器
setTimeout(code,millisec)
setTimeout() 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。
code 必需，要調(diào)用的函數(shù)后要執(zhí)行的 JavaScript 代碼串。=
millisec 必需，在執(zhí)行代碼前需等待的毫秒數(shù)。
clearTimeout(對(duì)象) 清除已設(shè)置的setTimeout對(duì)象
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button type="button" id="btnClear">清除</button>
<script>
var btnClear=document.getElementById("btnClear");
//5秒后禁用按鈕
var timer1=setTimeout(function(){
btnClear.setAttribute("disabled","disabled");
},5000);
btnClear.onclick=function(){
clearTimeout(timer1); //清除定時(shí)器
alert("定時(shí)器已停止工作，已清除");
}
//遞歸，不推薦
function setTitle(){
document.title+="->";
setTimeout(setTitle,500);
}
setTimeout(setTitle,500);
</script>
</body>
</html>
結(jié)果：
setInterval(code,millisec[,"lang"])
setInterval() 方法可按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式
code 必需，要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
millisec 必需，周期性執(zhí)行或調(diào)用code之間的時(shí)間間隔，以毫秒計(jì)。
clearInterval(對(duì)象) 清除已設(shè)置的setInterval對(duì)象
6.系統(tǒng)對(duì)話框，這些對(duì)話框外觀由操作系統(tǒng)/瀏覽器設(shè)置決定，css不起作用，所以很多時(shí)候可能需要自定義對(duì)話框
alert():帶有一個(gè)確定按鈕
confirm()：帶有一個(gè)確定和取消按鈕
prompt():顯示OK和Cancel按鈕之外，還會(huì)顯示一個(gè)文本輸入域
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button type="button" id="btnClear" style="width: 100px;">清除</button>
<script>
var btnClear=document.getElementById("btnClear");
//每隔5秒后禁用按鈕
var timer1=setInterval(function(){
btnClear.style.width=(parseInt(btnClear.style.width||0)+10)+"px";
},500);
btnClear.onclick=function(){
clearInterval(timer1); //清除定時(shí)器
alert("定時(shí)器已停止工作，已清除");
}
function setTitle(){
document.title+="->";
}
setInterval(setTitle,500);
</script>
</body>
</html>
結(jié)果：
6、scroll系列方法
scrollHeight和scrollWidth 對(duì)象內(nèi)部的實(shí)際內(nèi)容的高度/寬度（不包括border）
scrollTop和scrollLeft 被卷去部分的頂部/左側(cè) 到 可視區(qū)域 頂部/左側(cè) 的距離
onscroll事件 滾動(dòng)條滾動(dòng)觸發(fā)的事件
頁(yè)面滾動(dòng)坐標(biāo):
var scrollTop = window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
3.4、document 對(duì)象
請(qǐng)參考DOM一節(jié)的內(nèi)容
write() 函數(shù)
writeln() 函數(shù)
document.open() 函數(shù)
document.close() 函數(shù)
3.5、location對(duì)象
location對(duì)象提供了當(dāng)前窗口加載的文檔的相關(guān)信息，還提供了一些導(dǎo)航功能。事實(shí)上，這是一個(gè)很特殊的對(duì)象，location既是window對(duì)象的屬性，又是document對(duì)象的屬性。
location.hash #contents 返回url中的hash，如果不包含#后面的內(nèi)容，則返回空字符串
location.host best.cnblogs.com:80 返回服務(wù)器名稱和端口號(hào)
location.port 80 返回端口號(hào)
location.hostname best.cnblogs.com 返回服務(wù)器名稱
location.href http://best.cnblogs.com 返回當(dāng)前加載頁(yè)面的完整url
location.pathname /index.html 返回url中的目錄和文件名
location.protocol http 返回頁(yè)面使用的協(xié)議
location.search ?q=javascript 返回url中的查詢字符串
改變?yōu)g覽器的位置：location.href=http://www.baidu.com
如果使用location.replace('http://www.baidu.com'),不會(huì)在歷史記錄中生成新紀(jì)錄，用戶不能回到前一個(gè)頁(yè)面。
location.reload()：重置當(dāng)前頁(yè)面，可能從緩存，也可能從服務(wù)器；如果強(qiáng)制從服務(wù)器取得，傳入true參數(shù)
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> console.log(location.href); console.log(location.port); console.log(location.search); //location.href=location.href; //刷新 //location.reload(true); //強(qiáng)制加載，不加true則從緩存中刷新 </script> </body> </html>
結(jié)果：
3.6、history對(duì)象
history對(duì)象保存著用戶上網(wǎng)的歷史記錄，使用go()實(shí)現(xiàn)在用戶的瀏覽記錄中跳轉(zhuǎn)：
history.go(-1) 等價(jià)于history.back()
history.go(1) 等價(jià)于 history.forward()
history.go(1) //前進(jìn)兩頁(yè)
history.go('jb51.net')
3.7、navigator對(duì)象
這個(gè)對(duì)象代表瀏覽器實(shí)例，其屬性很多，但常用的不太多。如下：
navigator.userAgent：用戶代理字符串，用于瀏覽器監(jiān)測(cè)中、
navigator.plugins:瀏覽器插件數(shù)組，用于插件監(jiān)測(cè)
navigator.registerContentHandler 注冊(cè)處理程序，如提供RSS閱讀器等在線處理程序。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<SCRIPT>
document.write("<br/>瀏覽器名稱");
document.write(navigator.appCodeName);
document.write("<br/>次版本信息");
document.write(navigator.appMinorVersion);
document.write("<br/>完整的瀏覽器名稱");
document.write(navigator.appName);
document.write("<br/>瀏覽器版本");
document.write(navigator.appVersion);
document.write("<br/>瀏覽器編譯版本");
document.write(navigator.buildID);
document.write("<br/>是否啟用cookie");
document.write(navigator.cookieEnabled);
document.write("<br/>客戶端計(jì)算機(jī)CPU類型");
document.write(navigator.cpuClass);
document.write("<br/>瀏覽器是否啟用java");
document.write(navigator.javaEnabled());
document.write("<br/>瀏覽器主語(yǔ)言");
document.write(navigator.language);
document.write("<br/>瀏覽器中注冊(cè)的MIME類型數(shù)組");
document.write(navigator.mimeTypes);
document.write("<br/>是否連接到網(wǎng)絡(luò)");
document.write(navigator.onLine);
document.write("<br/>客戶端計(jì)算機(jī)操作系統(tǒng)或者CPU");
document.write(navigator.oscpu);
document.write("<br/>瀏覽器所在的系統(tǒng)平臺(tái)");
document.write(navigator.platform);
document.write("<br/>瀏覽器中插件信息數(shù)組");
document.write(navigator.plugins);
document.write("<br/>用戶的首選項(xiàng)");
// document.write(navigator.preference());
document.write("<br/>產(chǎn)品名稱");
document.write(navigator.product);
document.write("<br/>產(chǎn)品的次要信息");
document.write(navigator.productSub);
document.write("<br/>操作系統(tǒng)的語(yǔ)言");
document.write(navigator.systemLanguage);
document.write("<br/>瀏覽器的用戶代理字符串");
document.write(navigator. userAgent);
document.write("<br/>操作系統(tǒng)默認(rèn)語(yǔ)言");
document.write(navigator.userLanguage);
document.write("<br/>用戶個(gè)人信息對(duì)象");
document.write(navigator.userProfile);
document.write("<br/>瀏覽器品牌");
document.write(navigator.vendor);
document.write("<br/>瀏覽器供應(yīng)商次要信息");
document.write(navigator.vendorSub);
</SCRIPT>
</body>
</html>
運(yùn)行結(jié)果：
/* 瀏覽器名稱Mozilla 次版本信息undefined 完整的瀏覽器名稱Netscape 瀏覽器版本5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36 瀏覽器編譯版本undefined 是否啟用cookietrue 客戶端計(jì)算機(jī)CPU類型undefined 瀏覽器是否啟用javafalse 瀏覽器主語(yǔ)言zh-CN 瀏覽器中注冊(cè)的MIME類型數(shù)組[object MimeTypeArray] 是否連接到網(wǎng)絡(luò)true 客戶端計(jì)算機(jī)操作系統(tǒng)或者CPUundefined 瀏覽器所在的系統(tǒng)平臺(tái)Win32 瀏覽器中插件信息數(shù)組[object PluginArray] 用戶的首選項(xiàng) 產(chǎn)品名稱Gecko 產(chǎn)品的次要信息20030107 操作系統(tǒng)的語(yǔ)言u(píng)ndefined 瀏覽器的用戶代理字符串Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36 操作系統(tǒng)默認(rèn)語(yǔ)言u(píng)ndefined 用戶個(gè)人信息對(duì)象undefined 瀏覽器品牌Google Inc. 瀏覽器供應(yīng)商次要信息 */
四、DOM
DOM（文檔對(duì)象模型）是針對(duì)HTML和XML文檔的一個(gè)API，通過(guò)DOM可以去改變文檔。
DOM模型將整個(gè)文檔（XML文檔和HTML文檔）看成一個(gè)樹形結(jié)構(gòu)，并用document對(duì)象表示該文檔。
DOM規(guī)定文檔中的每個(gè)成分都是一個(gè)節(jié)點(diǎn)（Node）：
文檔節(jié)點(diǎn)（Document）：代表整個(gè)文檔
元素節(jié)點(diǎn)（Element）：文檔中的一個(gè)標(biāo)記
文本節(jié)點(diǎn)（Text）：標(biāo)記中的文本
屬性節(jié)點(diǎn)（Attr）：代表一個(gè)屬性，元素才有屬性
4.1、節(jié)點(diǎn)類型
12中節(jié)點(diǎn)類型都有NodeType屬性來(lái)表明節(jié)點(diǎn)類型
| 節(jié)點(diǎn)類型 | 描述 | |
|---|---|---|
| 1 | Element | 代表元素 |
| 2 | Attr | 代表屬性 |
| 3 | Text | 代表元素或?qū)傩灾械奈谋緝?nèi)容。 |
| 4 | CDATASection | 代表文檔中的 CDATA 部分（不會(huì)由解析器解析的文本）。 |
| 5 | EntityReference | 代表實(shí)體引用。 |
| 6 | Entity | 代表實(shí)體。 |
| 7 | ProcessingInstruction | 代表處理指令。 |
| 8 | Comment | 代表注釋。 |
| 9 | Document | 代表整個(gè)文檔（DOM 樹的根節(jié)點(diǎn)）。 |
| 10 | DocumentType | 向?yàn)槲臋n定義的實(shí)體提供接口 |
| 11 | DocumentFragment | 代表輕量級(jí)的 Document 對(duì)象，能夠容納文檔的某個(gè)部分 |
| 12 | Notation | 代表 DTD 中聲明的符號(hào)。 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
var div1 = document.getElementById("div1");
console.log(div1.nodeType); //結(jié)點(diǎn)類型 1 Element 代表元素
console.log(div1.nodeName); //DIV 結(jié)點(diǎn)名稱
var id = div1.getAttributeNode("id"); //獲得div1的屬性結(jié)點(diǎn)id
console.log(id.nodeType); //2 Attr 代表屬性
console.log(id.nodeName); //id 結(jié)點(diǎn)名稱
</script>
</body>
</html>
結(jié)果：
4.2、節(jié)點(diǎn)關(guān)系
| nodeType | 返回節(jié)點(diǎn)類型的數(shù)字值（1~12） |
| nodeName | 元素節(jié)點(diǎn):標(biāo)簽名稱(大寫)、屬性節(jié)點(diǎn):屬性名稱、文本節(jié)點(diǎn):#text、文檔節(jié)點(diǎn):#document |
| nodeValue | 文本節(jié)點(diǎn):包含文本、屬性節(jié)點(diǎn):包含屬性、元素節(jié)點(diǎn)和文檔節(jié)點(diǎn):null |
| parentNode | 父節(jié)點(diǎn) |
| parentElement | 父節(jié)點(diǎn)標(biāo)簽元素 |
| childNodes | 所有子節(jié)點(diǎn) |
| children | 第一層子節(jié)點(diǎn) |
| firstChild | 第一個(gè)子節(jié)點(diǎn)，Node 對(duì)象形式 |
| firstElementChild | 第一個(gè)子標(biāo)簽元素 |
| lastChild | 最后一個(gè)子節(jié)點(diǎn) |
| lastElementChild | 最后一個(gè)子標(biāo)簽元素 |
| previousSibling | 上一個(gè)兄弟節(jié)點(diǎn) |
| previousElementSibling | 上一個(gè)兄弟標(biāo)簽元素 |
| nextSibling | 下一個(gè)兄弟節(jié)點(diǎn) |
| nextElementSibling | 下一個(gè)兄弟標(biāo)簽元素 |
| childElementCount | 第一層子元素的個(gè)數(shù)(不包括文本節(jié)點(diǎn)和注釋) |
| ownerDocument | 指向整個(gè)文檔的文檔節(jié)點(diǎn) |
節(jié)點(diǎn)關(guān)系方法：
hasChildNodes() 包含一個(gè)或多個(gè)節(jié)點(diǎn)時(shí)返回true
contains() 如果是后代節(jié)點(diǎn)返回true
isSameNode()、isEqualNode() 傳入節(jié)點(diǎn)與引用節(jié)點(diǎn)的引用為同一個(gè)對(duì)象返回true
compareDocumentPostion() 確定節(jié)點(diǎn)之間的各種關(guān)系
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<div id="div1">
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3">p3</p>
</div>
<script type="text/javascript">
var div1 = document.getElementById("div1");
console.log(div1.firstChild); //換行
console.log(div1.firstElementChild); //p1結(jié)點(diǎn)
var childs=div1.childNodes; //所有子節(jié)點(diǎn)
for(var i=0;i<childs.length;i++){
console.log(childs[i]);
}
console.log(div1.hasChildNodes());
</script>
</body>
</html>
結(jié)果：
4.3、選擇器
|
getElementById() |
一個(gè)參數(shù):元素標(biāo)簽的ID |
| getElementsByTagName() | 一個(gè)參數(shù):元素標(biāo)簽名 |
| getElementsByName() | 一個(gè)參數(shù):name屬性名 |
| getElementsByClassName() | 一個(gè)參數(shù):包含一個(gè)或多個(gè)類名的字符串 |
|
classList |
返回所有類名的數(shù)組
|
| querySelector() | 接收CSS選擇符，返回匹配到的第一個(gè)元素，沒(méi)有則null |
| querySelectorAll() | 接收CSS選擇符，返回一個(gè)數(shù)組，沒(méi)有則返回[] |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style type="text/css">
.red {
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<div id="div1" class="c1 c2 red">
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3">p3</p>
</div>
<script type="text/javascript">
var ps = document.getElementsByTagName("p");
console.log(ps);
var div1 = document.querySelector("#div1");
console.log(div1.classList);
div1.classList.add("blue"); //增加新式
div1.classList.toggle("green"); //有就刪除，沒(méi)有就加
div1.classList.toggle("red");
console.log(div1.classList);
</script>
</body>
</html>
結(jié)果：
4.4、樣式操作方法style
| style.cssText | 可對(duì)style中的代碼進(jìn)行讀寫 |
| style.item() | 返回給定位置的CSS屬性的名稱 |
| style.length | style代碼塊中參數(shù)個(gè)數(shù) |
| style.getPropertyValue() | 返回給定屬性的字符串值 |
| style.getPropertyPriority() | 檢測(cè)給定屬性是否設(shè)置了!important，設(shè)置了返回"important";否則返回空字符串 |
| style.removeProperty() | 刪除指定屬性 |
| style.setProperty() | 設(shè)置屬性，可三個(gè)參數(shù):設(shè)置屬性名，設(shè)置屬性值，是否設(shè)置為"important"(可不寫或?qū)?") |
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style type="text/css">
.#div1{
background-color: red;
}
</style>
</head>
<body>
<div id="div1" class="c1 c2 red">
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3">p3</p>
</div>
<script type="text/javascript">
var div1=document.getElementById("div1");
div1.style.backgroundColor="lightgreen"; //background-color 去-變Camel命令
</script>
</body>
</html>
結(jié)果：
4.5、元素節(jié)點(diǎn)ELEMENT
| nodeName | 訪問(wèn)元素的標(biāo)簽名 |
| tagName | 訪問(wèn)元素的標(biāo)簽名 |
| createElement() | 創(chuàng)建節(jié)點(diǎn) |
| appendChild() | 末尾添加節(jié)點(diǎn)，并返回新增節(jié)點(diǎn) |
| insertBefore() | 參照節(jié)點(diǎn)之前插入節(jié)點(diǎn)，兩個(gè)參數(shù)：要插入的節(jié)點(diǎn)和參照節(jié)點(diǎn) |
| insertAfter() | 參照節(jié)點(diǎn)之后插入節(jié)點(diǎn)，兩個(gè)參數(shù)：要插入的節(jié)點(diǎn)和參照節(jié)點(diǎn) |
| replaceChild() | 替換節(jié)點(diǎn)，兩個(gè)參數(shù)：要插入的節(jié)點(diǎn)和要替換的節(jié)點(diǎn)(被移除) |
| removeChild() | 移除節(jié)點(diǎn) |
| cloneNode() | 克隆，一個(gè)布爾值參數(shù)，true為深拷貝，false為淺拷貝 |
| importNode() | 從文檔中復(fù)制一個(gè)節(jié)點(diǎn)，兩個(gè)參數(shù)：要復(fù)制的節(jié)點(diǎn)和布爾值(是否復(fù)制子節(jié)點(diǎn)) |
| insertAdjacentHTML() |
插入文本，兩個(gè)參數(shù)：插入的位置和要插入文本
|
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<script type="text/javascript">
var data = [{
id: 1,
name: "tom"
}, {
id: 2,
name: "rose"
}, {
id: 3,
name: "mark"
}, {
id: 4,
name: "jack"
}, {
id: 5,
"name": "lucy"
}];
var ul = document.createElement("ul");
for(var i = 0; i < data.length; i++) {
var li = document.createElement("li");
li.innerHTML = data[i].name;
var span=document.createElement("span");
span.innerText=" 刪除";
span.setAttribute("data-id",data[i].id);
li.appendChild(span);
span.onclick=function(){
var id=this.getAttribute("data-id");
for(var i=0;i<data.length;i++){
if(data[i].id==id){
data.splice(i,1); //從data數(shù)組的第i位置開始刪除1個(gè)元素
}
}
this.parentNode.parentNode.removeChild(this.parentNode);
console.log("還有："+data.length+"個(gè)對(duì)象"+JSON.stringify(data));
}
ul.appendChild(li);
}
document.body.appendChild(ul);
</script>
</body>
</html>
結(jié)果：
4.6、屬性節(jié)點(diǎn)attributes
|
attributes |
獲取所有標(biāo)簽屬性 |
| getAttribute() | 獲取指定標(biāo)簽屬性 |
| setAttribute() | 設(shè)置指定標(biāo)簽屬 |
| removeAttribute() | 移除指定標(biāo)簽屬 |
|
var s = document.createAttribute("age") s.nodeValue = "18" |
創(chuàng)建age屬性 設(shè)置屬性值為18 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<input id="txtName" type="text" />
<script>
var txtName=document.getElementById("txtName");
txtName.setAttribute("title","這是txtName"); //設(shè)置屬性
console.log(txtName.getAttribute("title")); //獲得屬性
//創(chuàng)建一個(gè)屬性
var placeholder=document.createAttribute("placeholder");
placeholder.nodeValue="請(qǐng)輸入姓名"; //設(shè)置屬性值
txtName.setAttributeNode(placeholder); //添加屬性
</script>
</body>
</html>
結(jié)果：
4.7、文本節(jié)點(diǎn)TEXT
| innerText | 所有的純文本內(nèi)容，包括子標(biāo)簽中的文本 |
| outerText | 與innerText類似 |
| innerHTML | 所有子節(jié)點(diǎn)(包括元素、注釋和文本節(jié)點(diǎn)) |
| outerHTML | 返回自身節(jié)點(diǎn)與所有子節(jié)點(diǎn) |
| textContent | 與innerText類似，返回的內(nèi)容帶樣式 |
| data | 文本內(nèi)容 |
| length | 文本長(zhǎng)度 |
| createTextNode() | 創(chuàng)建文本 |
| normalize() | 刪除文本與文本之間的空白 |
| splitText() | 分割 |
| appendData() | 追加 |
| deleteData(offset,count) | 從offset指定的位置開始刪除count個(gè)字符 |
| insertData(offset,text) | 在offset指定的位置插入text |
| replaceData(offset,count,text) | 替換，從offset開始到offscount處的文本被text替換 |
| substringData(offset,count) | 提取從ffset開始到offscount處的文本 |
4.8、文檔節(jié)點(diǎn) Document
| document.documentElement | 代表頁(yè)面中的<html>元素 |
| document.body | 代表頁(yè)面中的<body>元素 |
| document.doctype | 代表<!DOCTYPE>標(biāo)簽 |
| document.head | 代表頁(yè)面中的<head>元素 |
| document.title | 代表<title>元素的文本，可修改 |
| document.URL | 當(dāng)前頁(yè)面的URL地址 |
| document.domain | 當(dāng)前頁(yè)面的域名 |
| document.charset | 當(dāng)前頁(yè)面使用的字符集 |
| document.defaultView | 返回當(dāng)前 document對(duì)象所關(guān)聯(lián)的 window 對(duì)象，沒(méi)有返回 null |
| document.anchors | 文檔中所有帶name屬性的<a>元素 |
| document.links | 文檔中所有帶href屬性的<a>元素 |
| document.forms | 文檔中所有的<form>元素 |
| document.images | 文檔中所有的<img>元素 |
| document.readyState | 兩個(gè)值:loading(正在加載文檔)、complete(已經(jīng)加載完文檔) |
| document.compatMode |
兩個(gè)值：BackCompat：標(biāo)準(zhǔn)兼容模式關(guān)閉、CSS1Compat：標(biāo)準(zhǔn)兼容模式開啟 |
|
write()、writeln()、 open()、close() |
write()文本原樣輸出到屏幕、writeln()輸出后加換行符、 open()清空內(nèi)容并打開新文檔、close()關(guān)閉當(dāng)前文檔，下次寫是新文檔 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<script type="text/javascript">
console.log("標(biāo)題" + document.title);
console.log("地址" + document.URL);
console.log("域名" + document.domain);
console.log("編碼" + document.charset);
document.open
</script>
</body>
</html>
結(jié)果：
五、學(xué)習(xí)資料
http://common.jb51.net/tag/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3JavaScript%E7%B3%BB%E5%88%97/1.htm
六、作業(yè)
6.1)、盡量多的輸出javascript中為false的情況
6.2)、盡量多的輸出javascript中為undefined的情況
6.3)、用示例說(shuō)明未定義全局變量，特別是沒(méi)有使用var關(guān)鍵字時(shí)
6.4)、請(qǐng)定對(duì)照“數(shù)組”一節(jié)的內(nèi)容，練習(xí)數(shù)組定義與每一個(gè)已列出的數(shù)組方法
6.5)、請(qǐng)使用純JavaScript（不允許使用任何三方庫(kù)，如jQuery）完成下列功能：
要求：
全選、反選、子項(xiàng)全部選項(xiàng)時(shí)父項(xiàng)被選擇
完成所有功能
鼠標(biāo)移動(dòng)到每一行上時(shí)高亮顯示（js）
盡量使用彈出窗口完成增加、修改、詳細(xì)功能
刪除時(shí)提示
使用正則驗(yàn)證
封裝代碼，最終運(yùn)行的代碼只有一個(gè)對(duì)象，只對(duì)外暴露一個(gè)對(duì)象
越漂亮越好
6.6)、請(qǐng)寫出以下兩個(gè)正則表達(dá)式并使用兩個(gè)文本框模擬用戶提交數(shù)據(jù)時(shí)驗(yàn)證：
//身份證
//411081199004235955 41108119900423595x 41108119900423595X
//郵箱
//zhangguo123@qq.com zhangguo@sina.com.cn
6.7)、請(qǐng)寫一個(gè)javascript方法getQuery(key)用于根據(jù)key獲得url中的參值，如果不指定參數(shù)則返回一個(gè)數(shù)組返回所有參數(shù)，如：
url: http://127.0.0.1?id=1&name=tom
getQuery("id") 返回 1
getQuery() 返回[{key:id,value:1},{key:name,value:tom}]
//思考一個(gè)如果有多個(gè)想同的key時(shí)怎樣處理
七、示例下載
https://git.coding.net/zhangguo5/javascript_01.git
八、視頻
http://www.bilibili.com/video/av17173253/
相關(guān)文章
在編寫web軟件時(shí)，遇到一些可以共用js的情況，于是就想著如何封裝js代碼?；拘枨蠛芎?jiǎn)單，其實(shí)就是根據(jù)不同的情況封裝js代碼2013-07-07
關(guān)于javascript中this關(guān)鍵字(翻譯+自我理解)
在傳統(tǒng)面向?qū)ο笳Z(yǔ)言中，this關(guān)鍵字是個(gè)很乖的小孩，從不亂跑，該是誰(shuí)的就是誰(shuí)的。可是在JavaScript中，我們發(fā)現(xiàn)它不那么乖，有時(shí)甚至把我們搞的暈頭轉(zhuǎn)向的。所以有必要對(duì)它稍微做個(gè)總結(jié)。2010-10-10
JavaScript實(shí)現(xiàn)前端倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)前端倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要介紹了微信小程序12行js代碼自己寫個(gè)滑塊功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07
詳解如何優(yōu)雅迭代JavaScript字面對(duì)象
迭代是訪問(wèn)集合元素的一種方法,可以被迭代的對(duì)象稱為可迭代對(duì)象,下面這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅迭代JavaScript字面對(duì)象的相關(guān)資料,需要的朋友可以參考下2022-05-05
在js中，如何去除指定數(shù)組中的重復(fù)元素？2010-05-05
這篇文章主要為大家詳細(xì)介紹了小程序自定義索引菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript輪播停留效果的實(shí)現(xiàn)思路
輪播停留與無(wú)線滾動(dòng)十分類似，都是利用屬性及變量控制移動(dòng)實(shí)現(xiàn)輪播。下面通過(guò)本文給大家分享JavaScript輪播停留效果的實(shí)現(xiàn)思路，感興趣的朋友一起看看吧2018-05-05
Bootstrap-table自定義可編輯每頁(yè)顯示記錄數(shù)
這篇文章主要介紹了Bootstrap-table自定義可編輯每頁(yè)顯示記錄數(shù)的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
微信小程序?qū)崿F(xiàn)商品屬性聯(lián)動(dòng)選擇
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)商品屬性聯(lián)動(dòng)選擇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02