JavaScript學習總結(一)——ECMAScript、BOM、DOM(核心、瀏覽器對象模型與文檔對象模型)

1、JavaScript簡介

JavaScript是一種解釋執行的腳本語言,是一種動態類型、弱類型、基於原型的語言,內置支持類型,它遵循ECMAScript標準。它的解釋器被稱爲JavaScript引擎,爲瀏覽器的一部分,普遍用於客戶端的腳本語言,主要用來給HTML增長動態功能。javascript

幾乎全部主流的語言均可以編譯爲JavaScript,進而可以在全部平臺上的瀏覽器中執行,這也體現了JavaScript的強大性和在Web開發中的重要性。如Blade:一個Visual Studio擴展,能夠將C#代碼轉換爲JavaScript,Ceylon:一個可編譯爲JavaScript的、模塊化的、靜態類型JVM語言。css

JavaScript是一種能夠同時運行在前端與後臺的語言,如Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境(相似Java或.NET)。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型,使其輕量又高效。 html

1.一、javascript組成

ECMAScript,描述了該語言的語法和基本對象,如類型、運算、流程控制、面向對象、異常等。前端

文檔對象模型(DOM),描述處理網頁內容的方法和接口。java

瀏覽器對象模型(BOM),描述與瀏覽器進行交互的方法和接口。node

JavaScript由對象組成,一切皆爲對象。git

1.二、JavaScript腳本語言特色

a)、解釋型的腳本語言。JavaScript是一種解釋型的腳本語言,C、C++等語言先編譯後執行,而JavaScript是在程序的運行過程當中逐行進行解釋。程序員

基於對象。JavaScript是一種基於對象的腳本語言,它不只能夠建立對象,也能使用現有的對象。ajax

b)、簡單。JavaScript語言中採用的是弱類型的變量類型,對使用的數據類型未作出嚴格的要求,是基於Java基本語句和控制的腳本語言,其設計簡單緊湊。正則表達式

c)、動態性。JavaScript是一種採用事件驅動的腳本語言,它不須要通過Web服務器就能夠對用戶的輸入作出響應。在訪問一個網頁時,鼠標在網頁中進行鼠標點擊或上下移、窗口移動等操做JavaScript均可直接對這些事件給出相應的響應。

d)、跨平臺性。JavaScript腳本語言不依賴於操做系統,僅須要瀏覽器的支持。所以一個JavaScript腳本在編寫後能夠帶到任意機器上使用,前提上機器上的瀏覽器支 持JavaScript腳本語言,目前JavaScript已被大多數的瀏覽器所支持。

2、ECMAScript(JavaScript核心與語法)

2.一、ECMAScript定義

1)、ECMAScript是一個標準(歐洲計算機制造商協會),JavaScript只是它的一個實現,其餘實現包括ActionScript(Flash腳本)

2)、ECMAScript能夠爲不一樣種類的宿主環境提供核心的腳本編程能力,即ECMAScript不與具體的宿主環境相綁定,如JavaScript的宿主環境是瀏覽器,AS的宿主環境是Flash。、

3)、ECMAScript描述瞭如下內容:語法、類型、語句、關鍵字、保留字、運算符、對象等

2.二、數據類型

在JS中使用var關鍵詞聲明變量,變量的類型會根據其所賦值來決定(動態類型)。JS中數據類型分爲原始數據類型(5種)引用數據類型(Object類型)

1)5種原始數據類型:Undefined、Null、Boolean、Number和String。須要注意的是JS中字符串屬於原始數據類型。

2)typeof運算符:查看變量類型,對變量或值調用typeof運算符將返回下列值之一:

    • undefined – 若是變量是 Undefined 類型的
    • boolean – 若是變量是 Boolean 類型的
    • number – 若是變量是 Number 類型的
    • string – 若是變量是 String 類型的
    • object – 若是變量是一種引用類型或 Null 類型的

3)經過instanceof 運算符解決引用類型判斷問題

4)null 被認爲是對象的佔位符,typeof運算符對於null值返回「object」。

5)原始數據類型和引用數據類型變量在內存中的存放以下:

memory of datatype in js

6)JS中對類型的定義:一組值的集合。如Boolean類型的值有兩個:true、false。Undefined和Null 類型都只有一個值,分別是undefined和null。

Null 類型只有一個值,就是 null ; Undefined 類型也只有一個值,即 undefined 。 null 和 undefined 均可以做爲字面量(literal)在 JavaScript 代碼中直接使用。

null 與對象引用有關係,表示爲空或不存在的對象引用。當聲明一個變量卻沒有給它賦值的時候,它的值就是 undefined 。

undefined 的值會出如今以下狀況:

從一個對象中獲取某個屬性,若是該對象及其 prototype 鏈 中的對象都沒有該屬性的時候,該屬性的值爲 undefined 。

一個 function 若是沒有顯式的經過 return 來返回值給其調用者的話,其返回值就是 undefined 。有一個特例就是在使用new的時候。

JavaScript 中的 function 能夠聲明任意個形式參數,當該 function 實際被調用的時候,傳入的參數的個數若是小於聲明的形式參數,那麼多餘的形式參數的值爲 undefined 。

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <script>
            //js對象
            var user = {
                name: "張學友",
                address: "中國香港"
            };
            console.log(user.age);  //訪問對象中的屬性,未定義
            
            var i;
            console.log(i);  //變量未賦值
            
            function f(n1){
                console.log(n1);
            }
            var result=f(); //參數未賦值
            
            console.log(result);  //當函數沒有返回值時爲undefined
            
        </script>
    </body>

</html>

結果:

關於 null 和 undefined 有一些有趣的特性:

若是對值爲 null 的變量使用 typeof 操做符的話,獲得的結果是 object ;

而對 undefined 的值使用 typeof,獲得的結果是 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: "張學友",
                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);
            //是否不爲數字,is Not a Number
            console.log(isNaN("Five"));
            console.log(isNaN("5"));
        </script>
    </body>

</html>

結果:

7) boolean類型的特殊性

8)、== 與 ===

JavaScript 中有兩個判斷值是否相等的操做符,== 與 === 。二者相比,== 會作必定的類型轉換;而 === 不作類型轉換,所接受的相等條件更加嚴格

===比較時會比較類型

固然與之對應的就是!=與!==

儘可能使用===而不要使用==

            console.log("5"==5);  //true
            console.log("5"===5);  //false
            console.log("5"!=5);  //false
            console.log("5"!==5);  //true

2.三、局部變量和全局變量

在函數中聲明的變量只能在函數中使用,當你退出函數時,變量就會被釋放,這種變量被稱爲局部變量。由於每一個局部變量只在各自的函數中有效,因此你能夠在不一樣的函數中使用名稱相同的變量。

若是在函數以外聲明變量,那麼頁面中全部的函數均可以使用它。在全局變量被聲明後,它們就開始生效了。在網頁被關閉後,變量纔會失效。

注意:JS語言中,在代碼塊中聲明的變量屬於全局變量。

JavaScript是一種對數據類型變量要求不太嚴格的語言,因此沒必要聲明每個變量的類型,變量聲明儘管不是必須的,但在使用變量以前先進行聲明是一種好的習慣。可使用 var 語句來進行變量聲明。如:var men = true; // men 中存儲的值爲 Boolean 類型。

變量命名

JavaScript 是一種區分大小寫的語言,所以將一個變量命名爲best和將其命名爲Best是不同的。
另外,變量名稱的長度是任意的,但必須遵循如下規則:

  •  1.第一個字符必須是一個字母(大小寫都可)、或一個下劃線(_)或一個美圓符 ($)。
  •  2.後續的字符能夠是字母、數字、下劃線或美圓符。
  •  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>

結果:

2.四、數組(Array)

①js中,數組元素類型能夠不一致。

②js中,數組長度能夠動態改變。

③接着上述代碼,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

數組對象與方法

Array 對數組的內部支持
Array.concat( ) 鏈接數組
Array.join( ) 將數組元素鏈接起來以構建一個字符串
Array.length 數組的大小
Array.pop( ) 刪除並返回數組的最後一個元素
Array.push( ) 給數組添加元素
Array.reverse( ) 顛倒數組中元素的順序
Array.shift( ) 將元素移出數組
Array.slice( ) 返回數組的一部分
Array.sort( ) 對數組元素進行排序
Array.splice( ) 插入、刪除或替換數組的元素
Array.toLocaleString( ) 把數組轉換成局部字符串
Array.toString( ) 將數組轉換成一個字符串
Array.unshift( ) 在數組頭部插入一個元素

2.4.一、建立

var arrayObj = new Array();
var arrayObj = new Array([size]);
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);

示例:

            var array11 = new Array();  //空數組
            var array12 = new Array(5);  //指定長度,可越界
            var array13 = new Array("a","b","c",1,2,3,true,false);  //定義並賦值
            var array14=[];  //空數組,語法糖
            var array15=[1,2,3,"x","y"];  //定義並賦值

2.4.二、訪問與修改

var testGetArrValue=arrayObj[1]; 

arrayObj[1]= "值";

            //4.二、訪問與修改
            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是下標
            }

結果:

2.4.三、添加元素

將一個或多個新元素添加到數組未尾,並返回數組新長度

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);

將一個或多個新元素添加到數組開始,數組中的元素自動後移,返回數組新長度

arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);

將一個或多個新元素插入到數組的指定位置,插入位置的元素自動後移,返回被刪除元素數組,deleteCount要刪除的元素個數

arrayObj.splice(insertPos,deleteCount,[item1[, item2[, . . . [,itemN]]]])

示例代碼:

            //4.三、添加元素
            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);

運行結果:

2.4.四、刪除

移除最後一個元素並返回該元素值

arrayObj.pop();

移除最前一個元素並返回該元素值,數組中元素自動前移

arrayObj.shift(); 

刪除從指定位置deletePos開始的指定數量deleteCount的元素,數組形式返回所移除的元素

arrayObj.splice(deletePos,deleteCount); 

示例:

            //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);
            //刪除指定位置與個數
            var e=array41.splice(1,4);  //從索引1開始刪除4個
            console.log("被刪除:"+e+"——"+array41);

結果:

2.4.五、截取和合並

以數組的形式返回數組的一部分,注意不包括 end 對應的元素,若是省略 end 將複製 start 以後的全部元素

arrayObj.slice(start, [end]); 

將多個數組(也能夠是字符串,或者是數組和字符串的混合)鏈接爲一個數組,返回鏈接好的新的數組

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); 

示例: 

            //4.五、截取和合並
            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);

結果:

2.4.六、拷貝

返回數組的拷貝數組,注意是一個新的數組,不是指向

arrayObj.slice(0); 

返回數組的拷貝數組,注意是一個新的數組,不是指向

arrayObj.concat(); 

由於數組是引用數據類型,直接賦值並無達到真正實現拷貝,地址引用,咱們須要的是深拷貝。

2.4.七、排序

反轉元素(最前的排到最後、最後的排到最前),返回數組地址

arrayObj.reverse(); 

對數組元素排序,返回數組地址

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);

結果:

2.4.八、合併成字符

返回字符串,這個字符串將數組的每個元素值鏈接在一塊兒,中間用 separator 隔開。

arrayObj.join(separator); 

示例代碼:

            //4.八、合併成字符與將字符拆分紅數組
            var array81=[1,3,5,7,9];
            var ids=array81.join(",");
            console.log(ids);
            
            //拆分紅數組
            var text="hello nodejs and angular";
            var array82=text.split(" ");
            console.log(array82);

運行結果:

全部代碼:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>數組操做</title>
    </head>

    <body>
        <script type="text/javascript">
            //4.一、建立
            var array11 = new Array();  //空數組
            var array12 = new Array(5);  //指定長度,可越界
            var array13 = new Array("a","b","c",1,2,3,true,false);  //定義並賦值
            var array14=[];  //空數組,語法糖
            var array15=[1,2,3,"x","y"];  //定義並賦值
            
            //4.二、訪問與修改
            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是下標
            }
            
            //4.三、添加元素
            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.四、刪除
            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);
            //刪除指定位置與個數
            var e=array41.splice(1,4);  //從索引1開始刪除4個
            console.log("被刪除:"+e+"——"+array41);
            
            //4.五、截取和合並
            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.七、排序
            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.八、合併成字符與將字符拆分紅數組
            var array81=[1,3,5,7,9];
            var ids=array81.join(",");
            console.log(ids);
            
            //拆分紅數組
            var text="hello nodejs and angular";
            var array82=text.split(" ");
            console.log(array82);
            
        </script>
    </body>

</html>
View Code

2.五、正則表達式RegExp

RegExp 對象表示正則表達式,它是對字符串執行模式匹配的強大工具。

RegExp對象:該對象表明正則表達式,用於字符串匹配

 兩種RegExp對象建立方式:

方式一,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

建立 RegExp 對象的語法:

new RegExp(pattern, attributes);

參數

參數 pattern 是一個字符串,指定了正則表達式的模式或其餘正則表達式。

參數 attributes 是一個可選的字符串,包含屬性 "g"、"i" 和 "m",分別用於指定全局匹配、區分大小寫的匹配和多行匹配。ECMAScript 標準化以前,不支持 m 屬性。若是 pattern 是正則表達式,而不是字符串,則必須省略該參數。

返回值

一個新的 RegExp 對象,具備指定的模式和標誌。若是參數 pattern 是正則表達式而不是字符串,那麼 RegExp() 構造函數將用與指定的 RegExp 相同的模式和標誌建立一個新的 RegExp 對象。

若是不用 new 運算符,而將 RegExp() 做爲函數調用,那麼它的行爲與用 new 運算符調用時同樣,只是當 pattern 是正則表達式時,它只返回 pattern,而再也不建立一個新的 RegExp 對象。

拋出

SyntaxError - 若是 pattern 不是合法的正則表達式,或 attributes 含有 "g"、"i" 和 "m" 以外的字符,拋出該異常。

TypeError - 若是 pattern 是 RegExp 對象,但沒有省略 attributes 參數,拋出該異常。

修飾符

修飾符 描述
i 執行對大小寫不敏感的匹配。
g 執行全局匹配(查找全部匹配而非在找到第一個匹配後中止)。
m 執行多行匹配。

關於全局匹配全部的正則表達式都有一個lastIndex屬性,用於記錄上一次匹配結束的位置。若是不是全局匹配模式,那lastIndex的值始終爲0,在匹配過一次後,將會中止匹配。

正則表達式的全局匹配模式,就是在建立正則表達式的時候使用g標識符或者將global屬性設置爲true,在全局匹配模式下,正則表達式會對指定要查找的字符串執行屢次匹配。每次匹配使用當前正則對象的lastIndex屬性的值做爲在目標字符串中開始查找的起始位置。若是找不到匹配的項lastIndex的值會被從新設置爲0。

var regex = /abc/g;
var str = '123#abc';
console.log(regex.lastIndex);   // 0
console.log(regex.test(str));   // true
console.log(regex.lastIndex);   // 7
console.log(regex.test(str));   // false
console.log(regex.lastIndex);   // 0
console.log(regex.test(str));   // true
console.log(regex.lastIndex);   // 7
console.log(regex.test(str));   // false

方括號

方括號用於查找某個範圍內的字符:

表達式 描述
[abc] 查找方括號之間的任何字符。
[^abc] 查找任何不在方括號之間的字符。
[0-9] 查找任何從 0 至 9 的數字。
[a-z] 查找任何從小寫 a 到小寫 z 的字符。
[A-Z] 查找任何從大寫 A 到大寫 Z 的字符。
[A-z] 查找任何從大寫 A 到小寫 z 的字符。
[adgk] 查找給定集合內的任何字符。
[^adgk] 查找給定集合外的任何字符。
(red|blue|green) 查找任何指定的選項。

元字符

元字符(Metacharacter)是擁有特殊含義的字符:

元字符 描述
. 查找單個字符,除了換行和行結束符。
\w 查找單詞字符。
\W 查找非單詞字符。
\d 查找數字。
\D 查找非數字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配單詞邊界。
\B 匹配非單詞邊界。
\0 查找 NUL 字符。
\n 查找換行符。
\f 查找換頁符。
\r 查找回車符。
\t 查找製表符。
\v 查找垂直製表符。
\xxx 查找以八進制數 xxx 規定的字符。
\xdd 查找以十六進制數 dd 規定的字符。
\uxxxx 查找以十六進制數 xxxx 規定的 Unicode 字符。

量詞

量詞 描述
n+ 匹配任何包含至少一個 n 的字符串。
n* 匹配任何包含零個或多個 n 的字符串。
n? 匹配任何包含零個或一個 n 的字符串。
n{X} 匹配包含 X 個 n 的序列的字符串。
n{X,Y} 匹配包含 X 至 Y 個 n 的序列的字符串。
n{X,} 匹配包含至少 X 個 n 的序列的字符串。
n$ 匹配任何結尾爲 n 的字符串。
^n 匹配任何開頭爲 n 的字符串。
?=n 匹配任何其後緊接指定字符串 n 的字符串。
?!n 匹配任何其後沒有緊接指定字符串 n 的字符串。

RegExp 對象屬性

屬性 描述 FF IE
global RegExp 對象是否具備標誌 g。 1 4
ignoreCase RegExp 對象是否具備標誌 i。 1 4
lastIndex 一個整數,標示開始下一次匹配的字符位置。 1 4
multiline RegExp 對象是否具備標誌 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
            
            //查找同時出現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>

結果:

 

支持正則表達式的 String 對象的方法

方法 描述 FF IE
search 檢索與正則表達式相匹配的值。 1 4
match 找到一個或多個正則表達式的匹配。 1 4
replace 替換與正則表達式匹配的子串。 1 4
split 把字符串分割爲字符串數組。 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"]
            
            //刪除全部數字
            console.log("kjds23sd9we56sdoi1we780we98sd".replace(/\d/igm,""));  //kjdssdwesdoiwewesd
            
            //全部數字增長大括號,反向引用 $組號 括號用於分組
            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>

結果:

2.六、字符串對象String

字符串是 JavaScript 的一種基本的數據類型。
String 對象的 length 屬性聲明瞭該字符串中的字符數。
String 類定義了大量操做字符串的方法,例如從字符串中提取字符或子串,或者檢索字符或子串。
須要注意的是,JavaScript 的字符串是不可變的(immutable),String 類定義的方法都不能改變字符串的內容。像 String.toUpperCase() 這樣的方法,返回的是全新的字符串,而不是修改原始字符串。

String 對象屬性

屬性 描述
constructor 對建立該對象的函數的引用
length 字符串的長度
prototype 容許您向對象添加屬性和方法

String 對象方法

方法 描述
anchor() 建立 HTML 錨。
big() 用大號字體顯示字符串。
blink() 顯示閃動字符串。
bold() 使用粗體顯示字符串。
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 編碼。
concat() 鏈接字符串。
fixed() 以打字機文本顯示字符串。
fontcolor() 使用指定的顏色來顯示字符串。
fontsize() 使用指定的尺寸來顯示字符串。
fromCharCode() 從字符編碼建立一個字符串。
indexOf() 檢索字符串。
italics() 使用斜體顯示字符串。
lastIndexOf() 從後向前搜索字符串。
link() 將字符串顯示爲連接。
localeCompare() 用本地特定的順序來比較兩個字符串。
match() 找到一個或多個正則表達式的匹配。
replace() 替換與正則表達式匹配的子串。
search() 檢索與正則表達式相匹配的值。
slice() 提取字符串的片段,並在新的字符串中返回被提取的部分。
small() 使用小字號來顯示字符串。
split() 把字符串分割爲字符串數組。
strike() 使用刪除線來顯示字符串。
sub() 把字符串顯示爲下標。
substr() 從起始索引號提取字符串中指定數目的字符。
substring() 提取字符串中兩個指定的索引號之間的字符。
sup() 把字符串顯示爲上標。
toLocaleLowerCase() 把字符串轉換爲小寫。
toLocaleUpperCase() 把字符串轉換爲大寫。
toLowerCase() 把字符串轉換爲小寫。
toUpperCase() 把字符串轉換爲大寫。
toSource() 表明對象的源代碼。
toString() 返回字符串。
valueOf() 返回某個字符串對象的原始值。

2.七、時間日期對象Date

Date 對象用於處理日期和時間。

建立 Date 對象的語法:

var myDate=new Date();

註釋:Date 對象會自動把當前日期和時間保存爲其初始值。

Date 對象屬性

屬性 描述
constructor 返回對建立此對象的 Date 函數的引用。
prototype 使您有能力向對象添加屬性和方法。

Date 對象方法

方法 描述
Date() 返回當日的日期和時間。
getDate() 從 Date 對象返回一個月中的某一天 (1 ~ 31)。
getDay() 從 Date 對象返回一週中的某一天 (0 ~ 6)。
getMonth() 從 Date 對象返回月份 (0 ~ 11)。
getFullYear() 從 Date 對象以四位數字返回年份。
getYear() 請使用 getFullYear() 方法代替。
getHours() 返回 Date 對象的小時 (0 ~ 23)。
getMinutes() 返回 Date 對象的分鐘 (0 ~ 59)。
getSeconds() 返回 Date 對象的秒數 (0 ~ 59)。
getMilliseconds() 返回 Date 對象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒數。
getTimezoneOffset() 返回本地時間與格林威治標準時間 (GMT) 的分鐘差。
getUTCDate() 根據世界時從 Date 對象返回月中的一天 (1 ~ 31)。
getUTCDay() 根據世界時從 Date 對象返回週中的一天 (0 ~ 6)。
getUTCMonth() 根據世界時從 Date 對象返回月份 (0 ~ 11)。
getUTCFullYear() 根據世界時從 Date 對象返回四位數的年份。
getUTCHours() 根據世界時返回 Date 對象的小時 (0 ~ 23)。
getUTCMinutes() 根據世界時返回 Date 對象的分鐘 (0 ~ 59)。
getUTCSeconds() 根據世界時返回 Date 對象的秒鐘 (0 ~ 59)。
getUTCMilliseconds() 根據世界時返回 Date 對象的毫秒(0 ~ 999)。
parse() 返回1970年1月1日午夜到指定日期(字符串)的毫秒數。
setDate() 設置 Date 對象中月的某一天 (1 ~ 31)。
setMonth() 設置 Date 對象中月份 (0 ~ 11)。
setFullYear() 設置 Date 對象中的年份(四位數字)。
setYear() 請使用 setFullYear() 方法代替。
setHours() 設置 Date 對象中的小時 (0 ~ 23)。
setMinutes() 設置 Date 對象中的分鐘 (0 ~ 59)。
setSeconds() 設置 Date 對象中的秒鐘 (0 ~ 59)。
setMilliseconds() 設置 Date 對象中的毫秒 (0 ~ 999)。
setTime() 以毫秒設置 Date 對象。
setUTCDate() 根據世界時設置 Date 對象中月份的一天 (1 ~ 31)。
setUTCMonth() 根據世界時設置 Date 對象中的月份 (0 ~ 11)。
setUTCFullYear() 根據世界時設置 Date 對象中的年份(四位數字)。
setUTCHours() 根據世界時設置 Date 對象中的小時 (0 ~ 23)。
setUTCMinutes() 根據世界時設置 Date 對象中的分鐘 (0 ~ 59)。
setUTCSeconds() 根據世界時設置 Date 對象中的秒鐘 (0 ~ 59)。
setUTCMilliseconds() 根據世界時設置 Date 對象中的毫秒 (0 ~ 999)。
toSource() 返回該對象的源代碼。
toString() 把 Date 對象轉換爲字符串。
toTimeString() 把 Date 對象的時間部分轉換爲字符串。
toDateString() 把 Date 對象的日期部分轉換爲字符串。
toGMTString() 請使用 toUTCString() 方法代替。
toUTCString() 根據世界時,把 Date 對象轉換爲字符串。
toLocaleString() 根據本地時間格式,把 Date 對象轉換爲字符串。
toLocaleTimeString() 根據本地時間格式,把 Date 對象的時間部分轉換爲字符串。
toLocaleDateString() 根據本地時間格式,把 Date 對象的日期部分轉換爲字符串。
UTC() 根據世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數。
valueOf() 返回 Date 對象的原始值。

2.八、數學對象Math

Math 對象並不像 Date 和 String 那樣是對象的類,所以沒有構造函數 Math(),像 Math.sin() 這樣的函數只是函數,不是某個對象的方法。您無需建立它,經過把 Math 做爲對象使用就能夠調用其全部屬性和方法。

var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);

Math 對象屬性

屬性 描述
E 返回算術常量 e,即天然對數的底數(約等於2.718)。
LN2 返回 2 的天然對數(約等於0.693)。
LN10 返回 10 的天然對數(約等於2.302)。
LOG2E 返回以 2 爲底的 e 的對數(約等於 1.414)。
LOG10E 返回以 10 爲底的 e 的對數(約等於0.434)。
PI 返回圓周率(約等於3.14159)。
SQRT1_2 返回返回 2 的平方根的倒數(約等於 0.707)。
SQRT2 返回 2 的平方根(約等於 1.414)。

Math 對象方法

方法 描述
abs(x) 返回數的絕對值。
acos(x) 返回數的反餘弦值。
asin(x) 返回數的反正弦值。
atan(x) 以介於 -PI/2 與 PI/2 弧度之間的數值來返回 x 的反正切值。
atan2(y,x) 返回從 x 軸到點 (x,y) 的角度(介於 -PI/2 與 PI/2 弧度之間)。
ceil(x) 對數進行上舍入。
cos(x) 返回數的餘弦。
exp(x) 返回 e 的指數。
floor(x) 對數進行下舍入。
log(x) 返回數的天然對數(底爲e)。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次冪。
random() 返回 0 ~ 1 之間的隨機數。
round(x) 把數四捨五入爲最接近的整數。
sin(x) 返回數的正弦。
sqrt(x) 返回數的平方根。
tan(x) 返回角的正切。
toSource() 返回該對象的源代碼。
valueOf() 返回 Math 對象的原始值。

2.九、JavaScript 全局對象

全局屬性和函數可用於全部內建的 JavaScript 對象。

全局對象是預約義的對象,做爲 JavaScript 的全局函數和全局屬性的佔位符。經過使用全局對象,能夠訪問全部其餘全部預約義的對象、函數和屬性。全局對象不是任何對象的屬性,因此它沒有名稱。
在頂層 JavaScript 代碼中,能夠用關鍵字 this 引用全局對象。但一般沒必要用這種方式引用全局對象,由於全局對象是做用域鏈的頭,這意味着全部非限定性的變量和函數名都會做爲該對象的屬性來查詢。例如,當JavaScript 代碼引用 parseInt() 函數時,它引用的是全局對象的 parseInt 屬性。全局對象是做用域鏈的頭,還意味着在頂層 JavaScript 代碼中聲明的全部變量都將成爲全局對象的屬性。
全局對象只是一個對象,而不是類。既沒有構造函數,也沒法實例化一個新的全局對象。
在 JavaScript 代碼嵌入一個特殊環境中時,全局對象一般具備環境特定的屬性。實際上,ECMAScript 標準沒有規定全局對象的類型,JavaScript 的實現或嵌入的 JavaScript 均可以把任意類型的對象做爲全局對象,只要該對象定義了這裏列出的基本屬性和函數。例如,在容許經過 LiveConnect 或相關的技術來腳本化 Java 的 JavaScript 實現中,全局對象被賦予了這裏列出的 java 和 Package 屬性以及 getClass() 方法。而在客戶端 JavaScript 中,全局對象就是 Window 對象,表示容許 JavaScript 代碼的 Web 瀏覽器窗口。

頂層函數(全局函數)

函數 描述
decodeURI() 解碼某個編碼的 URI。
decodeURIComponent() 解碼一個編碼的 URI 組件。
encodeURI() 把字符串編碼爲 URI。
encodeURIComponent() 把字符串編碼爲 URI 組件。
escape() 對字符串進行編碼。
eval() 計算 JavaScript 字符串,並把它做爲腳本代碼來執行。
getClass() 返回一個 JavaObject 的 JavaClass。
isFinite() 檢查某個值是否爲有窮大的數。
isNaN() 檢查某個值是不是數字。
Number() 把對象的值轉換爲數字。
parseFloat() 解析一個字符串並返回一個浮點數。
parseInt() 解析一個字符串並返回一個整數。
String() 把對象的值轉換爲字符串。
unescape() 對由 escape() 編碼的字符串進行解碼。

頂層屬性(全局屬性)

方法 描述
Infinity 表明正的無窮大的數值。
java 表明 java.* 包層級的一個 JavaPackage。
NaN 指示某個值是否是數字值。
Packages 根 JavaPackage 對象。
undefined 指示未定義的值。

在 JavaScript 核心語言中,全局對象的預約義屬性都是不可枚舉的,全部能夠用 for/in 循環列出全部隱式或顯式聲明的全局變量,以下所示:

var variables = "";
for (var name in this) 
{
variables += name + "、";
}
document.write(variables);

結果:

2.十、JavaScript避免使用的語法

1)、 ==

Javascript有兩組相等運算符,一組是==和!=,另外一組是===和!==。前者只比較值的相等,後者除了值之外,還比較類型是否相同。

請儘可能不要使用前一組,永遠只使用===和!==。由於==默認會進行類型轉換,規則十分難記。若是你不相信的話,請回答下面五個判斷式的值是true仍是false:

  false == 'false'
  false == undefined
  false == null
  null == undefined
  0 == ''
前三個是false,後兩個是true。
答案

2)、with

with的本意是減小鍵盤輸入。好比

  obj.a = obj.b;
  obj.c = obj.d;

能夠簡寫成

  with(obj) {
    a = b;
    c = d;
  }

可是,在實際運行時,解釋器會首先判斷obj.b和obj.d是否存在,若是不存在的話,再判斷全局變量b和d是否存在。這樣就致使了低效率,並且可能會致使意外,所以最好不要使用with語句。

3)、eval

eval用來直接執行一個字符串。這條語句也是不該該使用的,由於它有性能和安全性的問題,而且使得代碼更難閱讀。

eval可以作到的事情,不用它也能作到。好比

  eval("myValue = myObject." + myKey + ";");

能夠直接寫成

  myValue = myObject[myKey];

至於ajax操做返回的json字符串,可使用官方網站提供的解析器json_parse.js運行。

4)、 continue

這條命令的做用是返回到循環的頭部,可是循環原本就會返回到頭部。因此經過適當的構造,徹底能夠避免使用這條命令,使得效率獲得改善。

5)、switch 貫穿

switch結構中的case語句,默認是順序執行,除非遇到break,return和throw。有的程序員喜歡利用這個特色,好比

  switch(n) {
    case 1:
    case 2:
      break;
  }

這樣寫容易出錯,並且難以發現。所以建議避免switch貫穿,凡有case的地方,一概加上break。

  switch(n) {
    case 1:
      break;
    case 2:
      break;
  }

6)、單行的塊結構

if、while、do和for,都是塊結構語句,可是也能夠接受單行命令。好比

  if (ok) t = true;

甚至寫成

  if (ok)
    t = true;

這樣不利於閱讀代碼,並且未來添加語句時很是容易出錯。建議無論是否只有一行命令,都一概加上大括號。

  if (ok){
    t = true;
  }

7)、 ++和--

遞增運算符++和遞減運算符--,直接來自C語言,表面上可讓代碼變得很緊湊,可是實際上會讓代碼看上去更復雜和更晦澀。所以爲了代碼的整潔性和易讀性,不用爲好。

8)、位運算符

Javascript徹底套用了Java的位運算符,包括按位與&、按位或|、按位異或^、按位非~、左移<<、帶符號的右移>>和用0補足的右移>>>。

這套運算符針對的是整數,因此對Javascript徹底無用,由於Javascript內部,全部數字都保存爲雙精度浮點數。若是使用它們的話,Javascript不得不將運算數先轉爲整數,而後再進行運算,這樣就下降了速度。並且"按位與運算符"&同"邏輯與運算符"&&,很容易混淆。

9)、function語句

在Javascript中定義一個函數,有兩種寫法:

  function foo() { }

  var foo = function () { }

兩種寫法徹底等價。可是在解析的時候,前一種寫法會被解析器自動提高到代碼的頭部,所以違背了函數應該先定義後使用的要求,因此建議定義函數時,所有采用後一種寫法。

10)、基本數據類型的包裝對象

Javascript的基本數據類型包括字符串、數字、布爾值,它們都有對應的包裝對象String、Number和Boolean。因此,有人會這樣定義相關值:

  new String("Hello World");
  new Number(2000);
  new Boolean(false);

這樣寫徹底沒有必要,並且很是費解,所以建議不要使用。

另外,new Object和new Array也不建議使用,能夠用{}和[]代替。

11)、new語句

Javascript是世界上第一個被大量使用的支持Lambda函數的語言,本質上屬於與Lisp同類的函數式編程語言。可是當前世界,90%以上的程序員都是使用面向對象編程。爲了靠近主流,Javascript作出了妥協,採納了類的概念,容許根據類生成對象。

類是這樣定義的:

  var Cat = function (name) {
    this.name = name;
    this.saying = 'meow' ;
  }

而後,再生成一個對象

  var myCat = new Cat('mimi');

這種利用函數生成類、利用new生成對象的語法,其實很是奇怪,一點都不符合直覺。並且,使用的時候,很容易忘記加上new,就會變成執行函數,而後莫名其妙多出幾個全局變量。因此,建議不要這樣建立對象,而採用一種變通方法。

Douglas Crockford給出了一個函數:

  Object.beget = function (o) {
    var F = function (o) {};
    F.prototype = o ;
    return new F;
  };

建立對象時就利用這個函數,對原型對象進行操做:

  var Cat = {
    name:'',
    saying:'meow'
  };

  var myCat = Object.beget(Cat);

對象生成後,能夠自行對相關屬性進行賦值:

  myCat.name = 'mimi';

12)、void

在大多數語言中,void都是一種類型,表示沒有值。可是在Javascript中,void是一個運算符,接受一個運算數,並返回undefined。

  void 0; // undefined

這個命令沒什麼用,並且很使人困惑,建議避免使用。

3、BOM

3.一、BOM概要

BOM(Browser Object Model) 即瀏覽器對象模型,主要是指一些瀏覽器內置對象如:window、location、navigator、screen、history等對象,用於完成一些操做瀏覽器的特定API。

用於描述這種對象與對象之間層次關係的模型,瀏覽器對象模型提供了獨立於內容的、能夠與瀏覽器窗口進行互動的對象結構。BOM由多個對象組成,其中表明瀏覽器窗口的Window對象是BOM的頂層對象,其餘對象都是該對象的子對象。

  • BOM是browser object model的縮寫,簡稱瀏覽器對象模型
  • BOM提供了獨立於內容而與瀏覽器窗口進行交互的對象
  • 因爲BOM主要用於管理窗口與窗口之間的通信,所以其核心對象是window
  • BOM由一系列相關的對象構成,而且每一個對象都提供了不少方法與屬性
  • BOM缺少標準,JavaScript語法的標準化組織是ECMA,DOM的標準化組織是W3C
  • BOM最初是Netscape瀏覽器標準的一部分

BOM結構

從上圖能夠看出:DOM是屬於BOM的一個屬性。

window對象是BOM的頂層(核心)對象,全部對象都是經過它延伸出來的,也能夠稱爲window的子對象。

因爲window是頂層對象,所以調用它的子對象時能夠不顯示的指明window對象。

如下兩種寫法都可:

document.write("best.cnblogs.com");
window.document.write("best.cnblogs.com");

3.二、BOM導圖

BOM部分主要是針對瀏覽器的內容,其中經常使用的就是window對象和location

window是全局對象不少關於瀏覽器的腳本設置都是經過它。

location則是與地址欄內容相關,好比想要跳轉到某個頁面,或者經過URL獲取必定的內容。

navigator中有不少瀏覽器相關的內容,一般判斷瀏覽器類型都是經過這個對象。

screen經常用來判斷屏幕的高度寬度等。

history訪問瀏覽器的歷史記錄,如前進、後臺、跳轉到指定位置。

3.三、window對象

window對象在瀏覽器中具備雙重角色:它既是ECMAscript規定的全局global對象,又是javascript訪問瀏覽器窗口的一個接口。

moveBy() 函數
moveTo() 函數
resizeBy() 函數
resizeTo() 函數
scrollTo() 函數
scrollBy() 函數
focus() 函數
blur() 函數
open() 函數
close() 函數
opener 屬性
alert() 函數
confirm() 函數
prompt() 函數
defaultStatus 屬性
status 屬性
setTimeout() 函數
clearTimeout() 函數
setInterval() 函數
clearInterval() 函數
View Code

 

一、獲取窗口相對於屏幕左上角的位置

            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保存的是頁面可見區域距離屏幕左側的距離,而chrome,firefox,safari中,screenTop/screenY保存的則是整個瀏覽器區域距離屏幕左側的距離。也就是說,兩者差了一個瀏覽器工具欄的像素高度。

二、移動窗口,調整窗口大小

window.moveTo(0,0)
window.moveBy(20,10)
window.resizeTo(100,100);
window.resizeBy(100,100); 

注意,這幾個方法在瀏覽器中極可能會被禁用。

三、得到瀏覽器頁面視口的大小

var pageWith=document.documentElement.clientWidth||document.body.clientWidth;
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;

四、導航和打開窗口

window.open()既能夠導航到特定的URL,也能夠打開一個新的瀏覽器窗口,其接收四個參數,要加載的url,窗口目標(能夠是關鍵字_self,_parent,_top,_blank),一個特性字符串,以及一個表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值。一般只須要傳遞第一個參數。注意,在不少瀏覽器中,都是阻止彈出窗口的。

五、定時器

setTimeout(code,millisec)

setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式。

code 必需,要調用的函數後要執行的 JavaScript 代碼串。=

millisec 必需,在執行代碼前需等待的毫秒數。

clearTimeout(對象) 清除已設置的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>

結果:

setInterval(code,millisec[,"lang"])

setInterval() 方法可按照指定的週期(以毫秒計)來調用函數或計算表達式
code 必需,要調用的函數或要執行的代碼串。

millisec 必需,週期性執行或調用code之間的時間間隔,以毫秒計。

clearInterval(對象) 清除已設置的setInterval對象

6.系統對話框,這些對話框外觀由操做系統/瀏覽器設置決定,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>

結果:

六、scroll系列方法

scrollHeight和scrollWidth 對象內部的實際內容的高度/寬度(不包括border)

scrollTop和scrollLeft 被捲去部分的頂部/左側 到 可視區域 頂部/左側 的距離

onscroll事件 滾動條滾動觸發的事件

頁面滾動座標:

var scrollTop = window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

3.四、document 對象

請參考DOM一節的內容

write() 函數
writeln() 函數
document.open() 函數
document.close() 函數

3.五、location對象

location對象提供了當前窗口加載的文檔的相關信息,還提供了一些導航功能。事實上,這是一個很特殊的對象,location既是window對象的屬性,又是document對象的屬性。

location.hash  #contents  返回url中的hash,若是不包含#後面的內容,則返回空字符串

location.host  best.cnblogs.com:80  返回服務器名稱和端口號

location.port  80  返回端口號

location.hostname  best.cnblogs.com  返回服務器名稱

location.href  http://best.cnblogs.com  返回當前加載頁面的完整url

location.pathname  /index.html  返回url中的目錄和文件名

location.protocol http  返回頁面使用的協議

location.search  ?q=javascript  返回url中的查詢字符串

改變瀏覽器的位置:location.href=http://www.baidu.com

若是使用location.replace('http://www.baidu.com'),不會在歷史記錄中生成新紀錄,用戶不能回到前一個頁面。

location.reload():重置當前頁面,可能從緩存,也可能從服務器;若是強制從服務器取得,傳入true參數 

示例:

<!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>

結果:

3.六、history對象

history對象保存着用戶上網的歷史記錄,使用go()實如今用戶的瀏覽記錄中跳轉:

history.go(-1) 等價於history.back()

history.go(1) 等價於 history.forward()

history.go(1) //前進兩頁

history.go('cnblogs.com')

3.七、navigator對象

這個對象表明瀏覽器實例,其屬性不少,但經常使用的不太多。以下:

navigator.userAgent:用戶代理字符串,用於瀏覽器監測中、

navigator.plugins:瀏覽器插件數組,用於插件監測

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類型數組");
    document.write(navigator.mimeTypes);
    document.write("<br/>是否鏈接到網絡");
    document.write(navigator.onLine);
    document.write("<br/>客戶端計算機操做系統或者CPU");
    document.write(navigator.oscpu);
    document.write("<br/>瀏覽器所在的系統平臺");
    document.write(navigator.platform);
    document.write("<br/>瀏覽器中插件信息數組");
    document.write(navigator.plugins);
    document.write("<br/>用戶的首選項");
    // document.write(navigator.preference());
    document.write("<br/>產品名稱");
    document.write(navigator.product);
    document.write("<br/>產品的次要信息");
    document.write(navigator.productSub);
    document.write("<br/>操做系統的語言");
    document.write(navigator.systemLanguage);
    document.write("<br/>瀏覽器的用戶代理字符串");
    document.write(navigator. userAgent);
    document.write("<br/>操做系統默認語言");
    document.write(navigator.userLanguage);
    document.write("<br/>用戶我的信息對象");
    document.write(navigator.userProfile);
    document.write("<br/>瀏覽器品牌");
    document.write(navigator.vendor);
    document.write("<br/>瀏覽器供應商次要信息");
    document.write(navigator.vendorSub);
</SCRIPT>
</body>
</html>
View Code

運行結果:

/*
瀏覽器名稱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類型數組[object MimeTypeArray]
是否鏈接到網絡true
客戶端計算機操做系統或者CPUundefined
瀏覽器所在的系統平臺Win32
瀏覽器中插件信息數組[object PluginArray]
用戶的首選項
產品名稱Gecko
產品的次要信息20030107
操做系統的語言undefined
瀏覽器的用戶代理字符串Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36
操做系統默認語言undefined
用戶我的信息對象undefined
瀏覽器品牌Google Inc.
瀏覽器供應商次要信息
*/

4、DOM

 DOM(文檔對象模型)是針對HTML和XML文檔的一個API,經過DOM能夠去改變文檔。

DOM模型將整個文檔(XML文檔和HTML文檔)當作一個樹形結構,並用document對象表示該文檔。

DOM規定文檔中的每一個成分都是一個節點(Node):

文檔節點(Document):表明整個文檔
元素節點(Element):文檔中的一個標記
文本節點(Text):標記中的文本
屬性節點(Attr):表明一個屬性,元素纔有屬性

4.一、節點類型

12中節點類型都有NodeType屬性來代表節點類型

節點類型 描述
1 Element 表明元素
2 Attr 表明屬性
3 Text 表明元素或屬性中的文本內容。
4 CDATASection 表明文檔中的 CDATA 部分(不會由解析器解析的文本)。
5 EntityReference 表明實體引用。
6 Entity 表明實體。
7 ProcessingInstruction 表明處理指令。
8 Comment 表明註釋。
9 Document 表明整個文檔(DOM 樹的根節點)。
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); //結點類型 1    Element    表明元素
            console.log(div1.nodeName); //DIV 結點名稱
            var id = div1.getAttributeNode("id"); //得到div1的屬性結點id
            console.log(id.nodeType); //2    Attr    表明屬性
            console.log(id.nodeName); //id 結點名稱 
        </script>
    </body>

</html>

結果:

4.二、節點關係

nodeType 返回節點類型的數字值(1~12)
nodeName 元素節點:標籤名稱(大寫)、屬性節點:屬性名稱、文本節點:#text、文檔節點:#document
nodeValue 文本節點:包含文本、屬性節點:包含屬性、元素節點和文檔節點:null
parentNode 父節點
parentElement 父節點標籤元素
childNodes 全部子節點
children 第一層子節點
firstChild 第一個子節點,Node 對象形式
firstElementChild 第一個子標籤元素
lastChild 最後一個子節點
lastElementChild 最後一個子標籤元素
previousSibling 上一個兄弟節點
previousElementSibling 上一個兄弟標籤元素
nextSibling 下一個兄弟節點
nextElementSibling 下一個兄弟標籤元素
childElementCount 第一層子元素的個數(不包括文本節點和註釋)
ownerDocument 指向整個文檔的文檔節點

節點關係方法:
hasChildNodes() 包含一個或多個節點時返回true
contains() 若是是後代節點返回true
isSameNode()、isEqualNode() 傳入節點與引用節點的引用爲同一個對象返回true
compareDocumentPostion() 肯定節點之間的各類關係

示例:

<!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結點
            var childs=div1.childNodes;  //全部子節點
            for(var i=0;i<childs.length;i++){
                console.log(childs[i]);
            }
            console.log(div1.hasChildNodes());
        </script>
    </body>
</html>

結果:

4.三、選擇器

getElementById()

一個參數:元素標籤的ID
getElementsByTagName() 一個參數:元素標籤名
getElementsByName() 一個參數:name屬性名
getElementsByClassName() 一個參數:包含一個或多個類名的字符串

classList

返回全部類名的數組

  • add (添加)
  • contains (存在返回true,不然返回false)
  • remove(刪除)
  • toggle(存在則刪除,不然添加)
querySelector() 接收CSS選擇符,返回匹配到的第一個元素,沒有則null
querySelectorAll() 接收CSS選擇符,返回一個數組,沒有則返回[]

示例:

<!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>

結果:

4.四、樣式操做方法style

style.cssText 可對style中的代碼進行讀寫
style.item() 返回給定位置的CSS屬性的名稱
style.length style代碼塊中參數個數
style.getPropertyValue() 返回給定屬性的字符串值
style.getPropertyPriority() 檢測給定屬性是否設置了!important,設置了返回"important";不然返回空字符串
style.removeProperty() 刪除指定屬性
style.setProperty() 設置屬性,可三個參數:設置屬性名,設置屬性值,是否設置爲"important"(可不寫或寫"")

代碼:

<!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>

結果:

4.五、元素節點ELEMENT

nodeName 訪問元素的標籤名
tagName 訪問元素的標籤名
createElement() 建立節點
appendChild() 末尾添加節點,並返回新增節點
insertBefore() 參照節點以前插入節點,兩個參數:要插入的節點和參照節點
insertAfter() 參照節點以後插入節點,兩個參數:要插入的節點和參照節點
replaceChild() 替換節點,兩個參數:要插入的節點和要替換的節點(被移除)
removeChild() 移除節點
cloneNode() 克隆,一個布爾值參數,true爲深拷貝,false爲淺拷貝
importNode() 從文檔中複製一個節點,兩個參數:要複製的節點和布爾值(是否複製子節點)
insertAdjacentHTML()

插入文本,兩個參數:插入的位置和要插入文本

  • "beforebegin",在該元素前插入
  • "afterbegin",在該元素第一個子元素前插入
  • "beforeend",在該元素最後一個子元素後面插入
  • "afterend",在該元素後插入

示例:

<!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數組的第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> 

結果:

4.六、屬性節點attributes

attributes

獲取全部標籤屬性
getAttribute() 獲取指定標籤屬性
setAttribute() 設置指定標籤屬
removeAttribute() 移除指定標籤屬

var s = document.createAttribute("age")

s.nodeValue = "18"

建立age屬性

設置屬性值爲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");  //設置屬性
            console.log(txtName.getAttribute("title"));  //得到屬性
            
            //建立一個屬性
            var placeholder=document.createAttribute("placeholder");
            placeholder.nodeValue="請輸入姓名";  //設置屬性值
            txtName.setAttributeNode(placeholder);  //添加屬性
        </script>
    </body>

</html>

結果:

4.七、文本節點TEXT

innerText 全部的純文本內容,包括子標籤中的文本
outerText 與innerText相似
innerHTML 全部子節點(包括元素、註釋和文本節點)
outerHTML 返回自身節點與全部子節點
textContent 與innerText相似,返回的內容帶樣式
data 文本內容
length 文本長度
createTextNode() 建立文本
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.八、文檔節點 Document

document.documentElement 表明頁面中的<html>元素
document.body 表明頁面中的<body>元素
document.doctype 表明<!DOCTYPE>標籤
document.head 表明頁面中的<head>元素
document.title 表明<title>元素的文本,可修改
document.URL 當前頁面的URL地址
document.domain 當前頁面的域名
document.charset 當前頁面使用的字符集
document.defaultView 返回當前 document對象所關聯的 window 對象,沒有返回 null
document.anchors 文檔中全部帶name屬性的<a>元素
document.links 文檔中全部帶href屬性的<a>元素
document.forms 文檔中全部的<form>元素
document.images 文檔中全部的<img>元素
document.readyState 兩個值:loading(正在加載文檔)、complete(已經加載完文檔)
document.compatMode

兩個值:BackCompat:標準兼容模式關閉、CSS1Compat:標準兼容模式開啓

write()、writeln()、

open()、close()

write()文本原樣輸出到屏幕、writeln()輸出後加換行符、

open()清空內容並打開新文檔、close()關閉當前文檔,下次寫是新文檔

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM</title>
    </head>
    <body>
        <script type="text/javascript">
            console.log("標題" + document.title);
            console.log("地址" + document.URL);
            console.log("域名" + document.domain);
            console.log("編碼" + document.charset);
            document.open
        </script>
    </body>
</html>

結果:

5、學習資料

深刻理解JavaScript系列(1):編寫高質量JavaScript代碼的基本要點

深刻理解JavaScript系列(2):揭祕命名函數表達式

深刻理解JavaScript系列(3):全面解析Module模式

深刻理解JavaScript系列(4):當即調用的函數表達式

深刻理解JavaScript系列(5):強大的原型和原型鏈

深刻理解JavaScript系列(6):S.O.L.I.D五大原則之單一職責SRP

深刻理解JavaScript系列(7):S.O.L.I.D五大原則之開閉原則OCP

深刻理解JavaScript系列(8):S.O.L.I.D五大原則之里氏替換原則LSP

深刻理解JavaScript系列(9):根本沒有「JSON對象」這回事!

深刻理解JavaScript系列(10):JavaScript核心(晉級高手必讀篇)

深刻理解JavaScript系列(11):執行上下文(Execution Contexts)

深刻理解JavaScript系列(12):變量對象(Variable Object)

深刻理解JavaScript系列(13):This? Yes, this!

深刻理解JavaScript系列(14):做用域鏈(Scope Chain)

深刻理解JavaScript系列(15):函數(Functions)

深刻理解JavaScript系列(16):閉包(Closures)

深刻理解JavaScript系列(17):面向對象編程之通常理論

深刻理解JavaScript系列(18):面向對象編程之ECMAScript實現

深刻理解JavaScript系列(19):求值策略

深刻理解JavaScript系列(20):《你真懂JavaScript嗎?》答案詳解

深刻理解JavaScript系列(21):S.O.L.I.D五大原則之接口隔離原則ISP

深刻理解JavaScript系列(22):S.O.L.I.D五大原則之依賴倒置原則DIP

深刻理解JavaScript系列(23):JavaScript與DOM(上)——也適用於新手

深刻理解JavaScript系列(24):JavaScript與DOM(下

深刻理解JavaScript系列(25):設計模式之單例模式

深刻理解JavaScript系列(26):設計模式之構造函數模式

深刻理解JavaScript系列(27):設計模式之建造者模式

深刻理解JavaScript系列(28):設計模式之工廠模式

深刻理解JavaScript系列(29):設計模式之裝飾者模式

深刻理解JavaScript系列(30):設計模式以外觀模式

深刻理解JavaScript系列(31):設計模式之代理模式

深刻理解JavaScript系列(32):設計模式之觀察者模式

深刻理解JavaScript系列(33):設計模式之策略模式

深刻理解JavaScript系列(34):設計模式之命令模式

深刻理解JavaScript系列(35):設計模式之迭代器模式

深刻理解JavaScript系列(36):設計模式之中介者模式

深刻理解JavaScript系列(37):設計模式之享元模式

深刻理解JavaScript系列(38):設計模式之職責鏈模式

深刻理解JavaScript系列(39):設計模式之適配器模式

深刻理解JavaScript系列(40):設計模式之組合模式

深刻理解JavaScript系列(41):設計模式之模板方法

深刻理解JavaScript系列(42):設計模式之原型模式

深刻理解JavaScript系列(43):設計模式之狀態模式

深刻理解JavaScript系列(44):設計模式之橋接模式

深刻理解JavaScript系列(45):代碼複用模式(避免篇)

深刻理解JavaScript系列(46):代碼複用模式(推薦篇)

深刻理解JavaScript系列(47):對象建立模式(上篇)

深刻理解JavaScript系列(48):對象建立模式(下篇)

深刻理解JavaScript系列(49):Function模式(上篇

深刻理解JavaScript系列(50):Function模式(下篇)

深刻理解JavaScript系列(結局篇)

6、做業

6.1)、儘可能多的輸出javascript中爲false的狀況

6.2)、儘可能多的輸出javascript中爲undefined的狀況

6.3)、用示例說明未定義全局變量,特別是沒有使用var關鍵字時

6.4)、請定對照「數組」一節的內容,練習數組定義與每個已列出的數組方法

6.5)、請使用純JavaScript(不容許使用任何三方庫,如jQuery)完成下列功能:

要求:

  • 全選、反選、子項所有選項時父項被選擇
  • 完成全部功能
  • 鼠標移動到每一行上時高亮顯示(js)
  • 儘可能使用彈出窗口完成增長、修改、詳細功能
  • 刪除時提示
  • 使用正則驗證
  • 封裝代碼,最終運行的代碼只有一個對象,只對外暴露一個對象
  • 越漂亮越好

6.6)、請寫出如下兩個正則表達式並使用兩個文本框模擬用戶提交數據時驗證:

//身份證
//411081199004235955 41108119900423595x 41108119900423595X
//郵箱
//zhangguo123@qq.com zhangguo@sina.com.cn

6.7)、請寫一個javascript方法getQuery(key)用於根據key得到url中的參值,若是不指定參數則返回一個數組返回全部參數,如:

url: http://127.0.0.1?id=1&name=tom
getQuery("id") 返回 1
getQuery() 返回[{key:id,value:1},{key:name,value:tom}]

//思考一個若是有多個想同的key時怎樣處理

翻轉任務:

6.八、請完成一個TaskList(任務列表)

一、使用DOM+數組完成上述功能

二、列表、添加、修改、刪除、多刪除

三、狀態切換

四、不使用jQuery

五、不須要後臺,全選,反選,子項聯動父項

六、任務只能是2-20位的合法字符,中文,英文,數字

7、示例下載

https://git.coding.net/zhangguo5/javascript_01.git

https://git.dev.tencent.com/zhangguo5/javascriptpro.git

8、視頻

http://www.bilibili.com/video/av17173253/

參考與引用 :http://www.w3school.com.cn/

相關文章
相關標籤/搜索