當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

最全JavaScript学习总结(JavaScript学习历程和心得范文)

發布時間：2023/12/15 综合教程 29 生活家

生活随笔收集整理的這篇文章主要介紹了最全JavaScript学习总结(JavaScript学习历程和心得范文) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本文主要和大家分享JavaScript學習總結(一) ECMAScript、BOM、DOM（核心、瀏覽器對象模型與文檔對象模型），JavaScript是一種解釋執行的腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型，它遵循ECMAScript標準。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，主要用來給HTML增加動態功能。

一、JavaScript簡介

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

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

JavaScript是一種可以同時運行在前端與后臺的語言，如Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環境（類似Java或.NET）。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。

1.1、javascript組成

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

文檔對象模型（DOM），描述處理網頁內容的方法和接口。

瀏覽器對象模型（BOM），描述與瀏覽器進行交互的方法和接口。

JavaScript由對象組成，一切皆為對象。

1.2、JavaScript腳本語言特點

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

基于對象。JavaScript是一種基于對象的腳本語言,它不僅可以創建對象,也能使用現有的對象。

b)、簡單。JavaScript語言中采用的是弱類型的變量類型,對使用的數據類型未做出嚴格的要求,是基于Java基本語句和控制的腳本語言,其設計簡單緊湊。

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

d)、跨平臺性。JavaScript腳本語言不依賴于操作系統,僅需要瀏覽器的支持。因此一個JavaScript腳本在編寫后可以帶到任意機器上使用,前提上機器上的瀏覽器支持JavaScript腳本語言,目前JavaScript已被大多數的瀏覽器所支持。

二、ECMAScript（JavaScript核心與語法）

2.1、ECMAScript定義

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

2)、ECMAScript可以為不同種類的宿主環境提供核心的腳本編程能力，即ECMAScript不與具體的宿主環境相綁定，如JavaScript的宿主環境是瀏覽器，AS的宿主環境是Flash。、

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

2.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）原始數據類型和引用數據類型變量在內存中的存放如下：

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.3、局部變量和全局變量

在函數中聲明的變量只能在函數中使用，當你退出函數時，變量就會被釋放，這種變量被稱為局部變量。因為每個局部變量只在各自的函數中有效，所以你可以在不同的函數中使用名稱相同的變量。

如果在函數之外聲明變量，那么頁面中所有的函數都可以使用它。在全局變量被聲明后，它們就開始生效了。在網頁被關閉后，變量才會失效。

注意：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.4、數組（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.1、創建


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.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是下標
}

登錄后復制

結果：

2.4.3、添加元素

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

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

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

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

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

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

登錄后復制

運行結果：

2.4.4、刪除

移除最后一個元素并返回該元素值

arrayObj.pop();

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

arrayObj.shift();

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

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

登錄后復制

結果：

2.4.5、截取和合并

以數組的形式返回數組的一部分，注意不包括 end 對應的元素，如果省略 end 將復制 start 之后的所有元素

arrayObj.slice(start, [end]);

將多個數組（也可以是字符串，或者是數組和字符串的混合）連接為一個數組，返回連接好的新的數組

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

登錄后復制

結果：

2.4.6、拷貝

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

arrayObj.slice(0);

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

arrayObj.concat();

因為數組是引用數據類型，直接賦值并沒有達到真正實現拷貝，地址引用，我們需要的是深拷貝。

2.4.7、排序

反轉元素（最前的排到最后、最后的排到最前），返回數組地址

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.8、合并成字符

返回字符串，這個字符串將數組的每一個元素值連接在一起，中間用 separator 隔開。

arrayObj.join(separator);

示例代碼：


//4.8、合并成字符與將字符拆分成數組
      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.1、創建
      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.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是下標
      }
      
      //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);
      //刪除指定位置與個數
      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、合并成字符與將字符拆分成數組
      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>

登錄后復制

2.5、正則表達式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	執行多行匹配。

方括號

方括號用于查找某個范圍內的字符：

表達式	描述
[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.6、字符串對象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.7、時間日期對象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.8、數學對象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.9、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.10、JavaScript避免使用的語法

1）、 ==

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

請盡量不要使用前一組，永遠只使用===和!==。因為==默認會進行類型轉換，規則十分難記。如果你不相信的話，請回答下面五個判斷式的值是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是否存在。這樣就導致了低效率，而且可能會導致意外，因此最好不要使用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
這個命令沒什么用，而且很令人困惑，建議避免使用。

三、BOM

3.1、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("www.jb51.net");
window.document.write(www.jb51.net);

登錄后復制

3.2、BOM導圖

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

window是全局對象很多關于瀏覽器的腳本設置都是通過它。

location則是與地址欄內容相關，比如想要跳轉到某個頁面，或者通過URL獲取一定的內容。

navigator中有很多瀏覽器相關的內容，通常判斷瀏覽器類型都是通過這個對象。

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

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

3.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() 函數

登錄后復制

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

2、移動窗口，調整窗口大小


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、導航和打開窗口

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

5、定時器

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>

登錄后復制

結果：

6、scroll系列方法

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

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

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

頁面滾動坐標:

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

3.4、document 對象

請參考DOM一節的內容

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

3.5、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.6、history對象

history對象保存著用戶上網的歷史記錄，使用go()實現在用戶的瀏覽記錄中跳轉：


history.go(-1) 等價于history.back()
history.go(1) 等價于 history.forward()
history.go(1) //前進兩頁
history.go('jb51.net')

登錄后復制

3.7、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>

登錄后復制

運行結果：


/*
瀏覽器名稱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.
瀏覽器供應商次要信息
*/

登錄后復制

四、DOM

DOM（文檔對象模型）是針對HTML和XML文檔的一個API，通過DOM可以去改變文檔。

DOM模型將整個文檔（XML文檔和HTML文檔）看成一個樹形結構，并用document對象表示該文檔。

DOM規定文檔中的每個成分都是一個節點（Node）：

文檔節點（Document）：代表整個文檔
元素節點（Element）：文檔中的一個標記
文本節點（Text）：標記中的文本
屬性節點（Attr）：代表一個屬性，元素才有屬性

4.1、節點類型

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>
    <p id="p1"></p>
    <script type="text/javascript">
      var p1 = document.getElementById("p1");
      console.log(p1.nodeType); //結點類型 1  Element  代表元素
      console.log(p1.nodeName); //p 結點名稱
      var id = p1.getAttributeNode("id"); //獲得p1的屬性結點id
      console.log(id.nodeType); //2  Attr  代表屬性
      console.log(id.nodeName); //id 結點名稱 
    </script>
  </body>

</html>

登錄后復制

結果：

4.2、節點關系

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>
    <p id="p1">
      <p id="p1">p1</p>
      <p id="p2">p2</p>
      <p id="p3">p3</p>
    </p>
    <script type="text/javascript">
      var p1 = document.getElementById("p1");
      console.log(p1.firstChild); //換行
      console.log(p1.firstElementChild); //p1結點
      var childs=p1.childNodes; //所有子節點
      for(var i=0;i<childs.length;i++){
        console.log(childs[i]);
      }
      console.log(p1.hasChildNodes());
    </script>
  </body>
</html>

登錄后復制

結果：

4.3、選擇器

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>
    <p id="p1" class="c1 c2 red">
      <p id="p1">p1</p>
      <p id="p2">p2</p>
      <p id="p3">p3</p>
    </p>
    <script type="text/javascript">
      var ps = document.getElementsByTagName("p");
      console.log(ps);

      var p1 = document.querySelector("#p1");
      console.log(p1.classList);
      p1.classList.add("blue"); //增加新式
      p1.classList.toggle("green"); //有就刪除，沒有就加
      p1.classList.toggle("red");
      console.log(p1.classList);
    </script>
  </body>

</html>

登錄后復制

結果：

4.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">
      .#p1{
        background-color: red;
      }
    </style>
  </head>

  <body>
    <p id="p1" class="c1 c2 red">
      <p id="p1">p1</p>
      <p id="p2">p2</p>
      <p id="p3">p3</p>
    </p>
    <script type="text/javascript">
      var p1=document.getElementById("p1");
      p1.style.backgroundColor="lightgreen"; //background-color 去-變Camel命令
    </script>
  </body>

</html>

登錄后復制

結果：

4.5、元素節點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.6、屬性節點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.7、文本節點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.8、文檔節點 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>

登錄后復制

結果：

五、學習資料

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

六、作業

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時怎樣處理

登錄后復制

總結

以上是生活随笔為你收集整理的最全JavaScript学习总结(JavaScript学习历程和心得范文)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【ubuntu】服务器新增user，并且
下一篇：【Ubuntu-ROS】ubuntu16