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