JS教程：從0開始

時間 2019-12-08

標籤教程開始欄目 JavaScript 简体版

原文原文鏈接

一。 JS簡介

1. JavaScript概述

JavaScript 是世界上最流行的編程語言。這門語言可用於 HTML 和 web，更可普遍用於服務器、PC、筆記本電腦、平板電腦和智能手機等設備。javascript

JavaScript是一種面向對象的，動態的腳本語言，主要被做爲客戶端腳本語言在用戶的瀏覽器上運行，不須要編譯便可運行，不須要服務器的支持。css

JavaScript具備以下特色：html

1) JavaScript 是腳本語言。java

2) JavaScript是弱類型的語言。web

3) JavaScript 是一種輕量級的編程語言。正則表達式

4) JavaScript 是可插入HTML頁面的編程代碼。編程

5) JavaScript 插入HTML頁面後，可由全部的現代瀏覽器執行。windows

而咱們以前學習的C#語言是服務器端語言，須要運行在服務器上。數組

那麼咱們以前學習了C#語言，爲何還要學習JavaScript呢？由於隨着社會的發展，打開瀏覽器來使用Web應用程序作一些業務處理已經成爲主流，這也是B/S架構的應用程序取代C/S架構應用程序的緣由所在。那麼在瀏覽器裏能被瀏覽器解析的網頁語言就是HTML，因爲HTML是靜態的,不能處理動態的數據。而JavaScript能夠操做HTML語言，實現動態數據交互功能。因此咱們要學習JavaScript語言來彌補HTML語言的不足，實現動態數據的交互。瀏覽器

另外，在Web世界裏，也只有JavaScript能跨平臺、跨瀏覽器驅動網頁，與用戶交互。

那麼，咱們學習JavaScript語言須要哪些條件呢？

1) 首先要學習HTML語言，這是靜態網頁語言，用於在網頁上顯示相關靜態信息。

2) 再者要學習CSS樣式，這是一種可讓HTML呈現的內容樣式更加豐富，能呈現各類各樣的效果展現數據。

2. JavaScript簡介

2.1. 寫入HTML輸出

在VS2013中建立一個空白的Web應用程序項目，ASP.NET Web應用程序是徹底支持JavaScript代碼的編寫的。

而後建立一個HTML頁面，如圖2-1所示：

圖2-1

在圖2-1中選擇「HTML頁」，點擊「添加」按鈕。如圖2-2所示：

圖2-2

如今咱們編寫第一行JavaScript代碼：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <script type="text/javascript">
 7         document.write("你好！");
 8     </script>
 9 </head>
10 <body>
11 </body>
12 </html>

從代碼上能夠看出來，JavaScript代碼是與HTML代碼混合在一塊兒編寫的。

1) 首先將以下代碼段寫在<head></head>標記內：

1 <script type="text/javascript">
2 ----JavaScript代碼段
3 </script>

也就是將<script>標記放在<head>標記內。而後在<script>標記中編寫Js代碼，另外，還能夠放在<body>標記內。

將上面的代碼直接在瀏覽器裏運行：

圖2-3

可見，document.write()方法與C#中的Response.Write()方法的做用是同樣的，都是在頁面上輸出內容，直接寫入HTML輸出。

另外，document.writeln()也是用來輸出內容的，只是比write()多出一個\n，可是在瀏覽器中，\n被解析爲空格了，因此看不到換行效果。

在html中，換行使用<br/>表示：document.write("<br/>");

全部的HTML代碼都是能夠放在document.write()方法中輸出的。

1 <script type="text/javascript">
2 
3     document.write("<h3>歡迎學習JavaScript腳本語言</h3>");
4     document.write("<div>姓名：<input id='name' type='text'/></div>");
5     document.write("<div>年齡：<input id='age' type='text'/></div>");
6     document.write("<div><input id=\"register\" type=\"button\" value=\"提交\"/></div>");
7 
8 </script>

在document.write()方法中能夠直接輸出HTML代碼並被瀏覽器解析，在雙引號中可使用單引號嵌套，還可使用轉義字符\」表示雙引號。

若是要在控制檯輸出內容，可使用console.log()輸出，按F12能夠呼出控制檯，經常使用於輸出測試數據。

2) 也能夠將JavaScript代碼單獨放在一個.js文件中，而後在<head>或<body>標記內引用該文件：

圖2-4

在圖2-4中選擇「JavaScript文件」，如圖2-5所示：

圖2-5

在圖2-5中編寫以下代碼：

圖2-6

而後將」 JavaScript1.js」拖放到「HtmlPage1.html」的<head>標記內：

圖2-7

再次運行一下：

圖2-8

若是HTML內容顯示完成後,再使用document.write()，則會覆蓋原來的內容。

2.2. 對事件的反應

JavaScript不只能夠將HTML代碼直接在頁面上輸出，還能夠對事件作出反應、改變HTML內容、改變HTML 圖像、驗證輸入等功能。

JavaScript是以事件驅動的編程語言，咱們能夠在事件發生時執行 JavaScript代碼，好比當用戶在按鈕上點擊時就會觸發一段JavaScript代碼去執行。

這裏添加一個Input，type=「button」的按鈕控件：

而後編寫以下代碼：

1 <input id="Button1" type="button" value="單擊我" onclick="return confirm('是否確認刪除？')" />

在此代碼中，咱們給input標記添加了onclick屬性，該屬性的值就是按鈕單擊時觸發的事件。

return confirm('是否確認刪除？')

這個咱們以前在ASP.NET WebForm就接觸過，用來彈出確認框。

在圖中單擊按鈕：

已經彈出確認框了，表示按鈕的事件已經觸發了。

在任何的HTML標記上均可以使用onclick執行事件。

1 <div onclick="getData()">你好</div>
2 
3 <span onclick="getData()">你好</span>
4 
5 <img src="" onclick="getData()" />
6 
7 <input type="button" onclick="getData()" />·

2.3. 改變HTML內容

使用JavaScript代碼能夠改變HTML標記的內容，好比給HTML中的div標記改變內容。

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <script type="text/javascript">
 7         function setValue() {
 8             //全部的變量所有使用var關鍵字定義
 9             var div1 = document.getElementById("div1");
10             //給div標記賦值
11             div1.innerText = "你好";
12         }
13     </script>
14 </head>
15 <body>
16     <div id="div1">Hello</div>
17     <input id="Button1" type="button" onclick="setValue()" value="賦值" />
18 </body>
19 </html>

在JavaScript中，全部的變量所有使用var關鍵字定義。

在改變HTML標記以前，首先要使用document.getElementById()方法獲取該HTML元素，而後使用相關的屬性必變元素的內容。

若是改變div標記的內容，則要使用innerText屬性。將上面的代碼運行：

點擊一下「賦值」按鈕，以下圖所示：

可見，使用JavaScript代碼已經將div標記中原來的Hello內容修改成「你好「了。

1) JavaScript獲取文本框的值代碼爲：

//獲取HTML元素

var name = document.getElementById("txtName");

//獲取HTML文本框的值

window.alert(name.value);

2) JavaScript給文本框賦值的代碼爲：

name.value = "請輸入姓名";

2.4. 改變HTML圖像

在HTML中，圖像標記是img。給img標記指定圖像代碼以下：

使用img標記的src屬性指定圖片的虛擬路徑。使用alt屬性指定當圖片不顯示時顯示的文本內容。

使用js改變img的圖片，代碼以下：

 1 <script type="text/javascript">
 2     function setImgUrl() {
 3         //獲取img元素
 4         var img1 = document.getElementById("img1");
 5         //改變圖片
 6         img1.src = "../Images/002.png";
 7     }
 8 </script>
 9 <body>
10       <img id="img1" alt="這是圖片" src="../Images/001.png" />
11       <input id="Button1" type="button" onclick="setImgUrl()" value="執行" />
12 </body>·

點擊一下按鈕：

2.5. 驗證輸入

使用JS代碼能夠在客戶端驗證HTML表單控件值的輸入：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <script type="text/javascript">
 7         function validData() {
 8             //獲取HTML 元素的值
 9             var name = document.getElementById("txtName");
10             var age = document.getElementById("txtAge");
11             //非空判斷
12             if (name.value != "" && age.value != "") {
13                 document.write("驗證經過！");
14             }
15             else {
16                 alert("用戶名和密碼不可爲空！");
17             }
18         }
19     </script>
20 </head>
21 <body>
22     姓名：<input type="text" id="txtName" />
23     年齡：<input id="txtAge" type="text" />
24     <input id="Button1" type="button" onclick="validData()" value="提交" />
25 </body>
26 </html>

若是要驗證在文本框中輸入的字符是不是數字，可使用isNaN()方法來判斷，

當isNaN()=true，表示輸入的不是數字，當isNaN()=false，表示輸入的是數字：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <script>
 7         function isNumber() {
 8             var n = document.getElementById("Text1");
 9             if(n.value=="" || isNaN(n.value)){
10                 alert('您輸入的不是數字，請從新輸入！');
11             }
12         }
13     </script>
14 </head>
15 <body>
16     <input id="Text1" type="text" />
17     <input id="Button1" type="button" value="測試是否爲數字" onclick="isNumber()" />
18 </body>
19 </html>

3. JavaScript用法

對於Script標記，在HTML中有兩種用法：

1) 在HTML代碼中嵌入JavaScript代碼：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        document.write("你好");
        document.write("Hello");
    </script>
</head>

通常是在<head>標記內使用<script>標記來嵌入JavaScript代碼在HTML代碼中，固然也能夠在<body>標記內使用<script>標記。

2) 使用script標記引用外部的*.js文件：

在js文件內，只編寫Js代碼便可。

因爲瀏覽器是從上到下的順序執行HTML代碼的，因此若是<head>標記內包含大量的JavaScript代碼，則可能網頁的加載速度就會變慢，此時，能夠將Js代碼放在<body>標記的底部，以加快網頁的加載速度。

4. JavaScript語法簡介

4.1. JavaScript語法

JavaScript是一種輕量級的腳本語言，而且是弱類型語言，而C#是強類型的語言。之因此稱爲弱類型語言，是由於定義的變量能夠存儲任意類型的數據。

在JavaScritp中，變量所有統一使用var關鍵字來定義。

1 <script type="text/javascript">
2     var x1 = 100;
3     x1 = "ABC";
4     x1 = true;
5 </script>

在此處先使用var定義了變量x1，並賦值爲100，後來又賦值了字符串」ABC」和布爾類型true，這就是弱類型的表現。這在C#中是不會容許的。最終x1變量的值就是true。

JavaScript語言是區分大小寫的。

而且標識符只能以字母、下劃線和美圓符號$開頭，而且也不能是關鍵字和保留字，但標識符中能夠包含保留字和關鍵字。

4.2. 函數的定義和使用

JavaScript中的函數能夠理解爲C#中的方法，都是用來封裝功能的段碼段。

JavaScript函數的定義都是使用function關鍵字定義的：

1 function f1() {
2     alert("這是函數");
3 }

JavaScript函數不須要定義返回類型，但有返回值，有返回值時使用return語句返回便可：

1 function f2() {
2     return "你好";
3 }

JavaScript函數也能夠帶有參數，但不須要指定參數類型，只須要參數名便可：

1 function f3(str1, str2, number1, b1) {
2     return str1 + str2 + number1 + b1;
3 }

還有另一種定義函數的方法：

1 var f4 = function () {
2     return "Hello";
3 }

這種形式的定義也是正確的。

定義的函數就能夠直接調用了，通常會在HTML元素的事件中調用：

1 <body>
2     <input id="Button1" type="button" value="button" onclick="f1()" />
3     <input id="Button1" type="button" value="button" onclick="f3('a','B',100,true)" />
4     <input id="Button1" type="button" value="button" onclick="f4()"/>
5 </body>

4.3. 常的HTML事件

常見的HTML事件有：單擊事件onclick、鼠標移至HTML元素上onmouseover、鼠標離開HTML元素onmouseout等。

<body>

</body>

4.4. JavaScript關鍵字和保留字

JavaScript關鍵字用於標識要執行的操做，和其餘任何編程語言同樣，JavaScript 保留了一些關鍵字爲本身所用。

下面是JavaScript中的關鍵字和保留字：

4.5. 註釋

單行註釋使用//表示。

多行註釋或塊註釋使用/* */表示。

二。 JavaScript瀏覽器對象BOM

1. 概述

BOM稱爲瀏覽器對象模型，主要用來對瀏覽器進行相關的操做，有了BOM，才使JavaScript能夠操做瀏覽器的相關對象，例如：打開窗口、關閉窗口，彈出提示框等等。

瀏覽器對象模型（Browser Object Model (BOM)）尚無正式標準，但現代的瀏覽器都支持BOM。

2. window對象

2.1. 基本概念

瀏覽器對象模型 (BOM) 使 JavaScript 有能力與瀏覽器「對話」。因爲現代瀏覽器已經（幾乎）實現了 JavaScript 交互性方面的相同方法和屬性，所以常被認爲是 BOM 的方法和屬性。

常見的alert()、confirm()都屬於window對象的方法。

全局變量是 window 對象的屬性。全局函數是 window 對象的方法。

定義的全局變量x已經成爲window對象的屬性。

定義的全局函數成爲了window對象的方法。

2.2. Window尺寸

有三種方法可以肯定瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）。

對於Internet Explorer十、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 瀏覽器窗口的內部高度

window.innerWidth - 瀏覽器窗口的內部寬度

對於 Internet Explorer 八、七、六、5：

document.documentElement.clientHeight

document.documentElement.clientWidth

或者

document.body.clientHeight

document.body.clientWidth

那麼兼容通用的獲取瀏覽器的窗口高度和寬度：

var w=window.innerWidth

|| document.documentElement.clientWidth

|| document.body.clientWidth;

var h=window.innerHeight

|| document.documentElement.clientHeight

|| document.body.clientHeight;

x=document.getElementById("demo");

x.innerHTML="瀏覽器的內部窗口寬度：" + w + "，高度：" + h + "。"

</script>

2.3. 其它window方法

這些屬性有的是對open()打開的窗口生效。

1) window.open() ：打開新窗口。

function openWin() {

window.open("HtmlPage1.html");

}

</script>

2) window.close() ：關閉當前窗口。

function closeWin() {

window.close();

}

3) window.moveTo() ：移動窗口。

var w;

function openWindow() {

w = window.open("HtmlPage1.html", "", "width=200,height=100");

}

function moveWindow() {

w.moveTo(300, 400);

}

</script>

moveTo() 方法可把窗口的左上角移動到一個指定的座標。

4) window.resizeTo() ：調整窗口的尺寸。

var w;

function openWindow() {

w = window.open("HtmlPage1.html", "", "width=200,height=100");

}

function moveWindow() {

w.moveTo(300, 400);

}

function resizeWindow() {

w.resizeTo(400, 600);

}

</script>

resizeTo()把窗口大小調整爲指定的寬度和高度。

3. window.screen

window.screen 對象包含有關用戶屏幕的信息。window.screen 對象在編寫時能夠不使用 window 這個前綴。

1) availHeight：獲取屏幕（不是瀏覽器）的可用高度，不包括任務欄，單位是像素。

2) avaiWidth：獲取屏幕（不是瀏覽器）的可用寬度，不包括任務欄，單位是像素。

3) colorDepth：返回屏幕的色彩，也就是屏幕調色板的比特深度，如今大部分都是24色。

4) height：返回屏幕的總高度，包括任務欄。

5) pixelDepth：返回屏幕顏色的分辨率，每像素的位數，例如：24位。

6) width：返回屏幕的總寬度，包括任務欄。

var aWidth = window.screen.availWidth;

var aHeight = window.screen.availHeight;

document.write("可用寬度是：" + aWidth);

document.write("可用高度是：" + aHeight);

</script>

因爲當前電腦的分辨率是1366*768，因爲高度不包括任務欄，因此可用高度變成了728，這說明任務欄的高度是40。

4. window.location

window.location對象用於得到當前頁面的地址 (URL)，並也可把瀏覽器重定向到新的頁面。

1) hash：返回URL的錨部分，也就是URL含#及後面的內容。

2) host：返回URL的主機名和端口號：

3) hostname：返回URL的主機名：

4) port：返回URL的端口號：

5) protocol：返回URL的Web協議：

6) search：返回URL的查詢部分:

4.1. href

使用window.location.href能夠獲取當前瀏覽器的完整頁面地址。

var strHref = location.href;

document.write(strHref);

</script>

也能夠給location.href賦值URL地址實現頁面的重定向。以下代碼：

window.location.href = "http://baidu.com";

window.location.href = "HtmlPage1.html";

4.2. pathname

location.pathname 屬性返回URL的路徑名（不包含域名和端口號）。

var pathName = location.pathname;

document.write(pathName);

</script>

4.3. assign

location.assign() 方法加載新的文檔。

location.assign("http://baidu.com");

location.assign("HtmlPage1.html");

</script>

Location.assign()方法與location.href屬性實現的效果是同樣的，都是重定向到新的頁面。

Location對象的其它方法和屬性：

1) location.hostname 返回 web 主機的域名

2) location.pathname 返回當前頁面的路徑和文件名

3) location.port 返回 web 主機的端口（80 或 443）

4) location.protocol 返回所使用的 web 協議（http:// 或 https://）

5. window.history

window.history對象包含瀏覽器的歷史記錄。

window.history 對象在編寫時可不使用 window 這個前綴。

爲了保護用戶隱私，對 JavaScript 訪問該對象的方法作出了限制。

經常使用的一些方法：

1) history.back() - 與在瀏覽器點擊後退按鈕相同，加載歷史列表中的前一個 URL。

2) history.forward() - 與在瀏覽器中點擊前進按鈕向前相同，history.forward() 方法加載歷史列表中的下一個 URL。

//後退

history.back();

//前進

history.forward();

3) history.go()：加載history列表中某個具體的頁面，加載的頁面必須是歷史訪問過的。

該參數能夠是數字，使用的是要訪問的 URL 在 History 的 URL 列表中的相對位置。（-1上一個頁面，1下一個頁面)。或一個字符串，字符串必須是局部或完整的URL，該函數會去匹配字符串的第一個URL。

go(-1): 返回上一頁，原頁面表單中的內容會丟失；

back(-1): 返回上一頁，原頁表表單中的內容會保留。

window.history.go(-2)表示後退2頁。

6. window.navigator

window.navigator對象包含有關訪問者瀏覽器的信息。

navigator.appName用於獲取瀏覽器的名稱。

1) appCodeName：返回瀏覽器的代碼名，目前主流的瀏覽器(IE11/Edge/fireFox/Google Chrom)的appCodeName都是：Mozilla。

2) appName：返回瀏覽器的名稱。目前主流的瀏覽器(IE11/Edge/fireFox/Google Chrom)的appName都是：Netscape。

3) appVersion：返回瀏覽器的平臺和版本信息。每一個瀏覽器返回的信息不同。

FireFox

Edge

4) cookieEnabled：返回當前瀏覽器是否啓用了Cookie。目前瀏覽器大都支持Cookie，返回true。

5) platform：返回運行瀏覽器的操做系統。若是運行的是windows操做系統，則返回Win32。

6) userAgent：返回客戶端發送服務器的用戶代理字符串。每一個瀏覽器返回的值不太同樣。

7. 彈窗

7.1. 警告框

JavaScript中的警告框使用window.alert()方法來實現。顯示帶有一段消息和一個確認按鈕的警告框。

<!DOCTYPE html>

<head>

function alertPage() {

if (Text1.value == "") {

window.alert("用戶名不能爲空！");

}

</script>

</head>

<body>

用戶名：<input id="Text1" type="text" />

</body>

</html>

7.2. 確認框

確認框使用confirm()方法表示，顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。

注意：confirm()會返回一個布爾類型的值，若是返回的值爲true，則表示用戶點擊了「肯定」按鈕，不然點擊了「取消」或關閉按鈕。

<!DOCTYPE html>

<head>

function confirmPage() {

var b = window.confirm("是否確認刪除？");

if (b == true) {

document.write("確認須要刪除！")

}else

{

document.write("不須要刪除！");

}

</script>

</head>

<body>

</body>

</html>

當點擊了「肯定」按鈕。

7.3. 提示框

提示框使用prompt()方法表示，prompt()方法用於顯示可提示用戶進行輸入的對話框。這個方法返回用戶輸入的字符串。

<!DOCTYPE html>

<head>

function promptPage() {

var x = window.prompt("請輸入您的姓名");

document.write(x);

}

</script>

</head>

<body>

</body>

</html>

若是沒有在文本框中輸入任何內容，則接收的值爲null。

7.4. 換行

在HTML中，可使用的換行有：<br/>，還可使用<p/>。

可是在JavaScript的全部彈窗中要使用換行，則要使用\n實現：

var x = window.prompt("請輸入您的姓名:\n包含全名");

8. 計時事件

經過使用 JavaScript，咱們有能力作到在一個設定的時間間隔以後來執行代碼，而不是在函數被調用後當即執行。咱們稱之爲計時事件。

8.1. setTimeout()方法

setTimeout()方法也稱爲超時調用。用於在指定的毫秒數以後執行一段JavaScript代碼，只執行一次，其語法以下：

var t=setTimeout("javascript語句",毫秒)

注意：1000毫秒等於1秒。

案例：當按鈕被點擊時，一個提示框會在5秒中後彈出。

<!DOCTYPE html>

<head>

function setTimeOutDemo(){

window.setTimeout("alert('您好！')", 5000);

}

</script>

</head>

<body>

</body>

</html>

通常狀況下，咱們會給setTimeOut()方法第1個參數傳遞一個函數,而不是JS代碼。以下代碼：

function setTimeOutDemo(){

//window.setTimeout("alert('您好！')", 5000);

window.setTimeout(function () {

window.alert("Hello");

}, 5000);

}

</script>

8.2. clearTimeout()方法

若是要取消setTimeout()方法執行的代碼，可使用clearTimeout()。

function setTimeOutDemo(){

//window.setTimeout("alert('您好！')", 5000);

var timeOutID = window.setTimeout(function () {

window.alert("Hello");

}, 5000);

//取消執行

window.clearTimeout(timeOutID);

}

</script>

clearTimeout()方法須要一個超時ID。

8.3. setInterval()和clearInterval()方法

setInterval() 方法可按照指定的週期（以毫秒計）來重複調用函數或計算表達式。

setInterval()也稱爲間隔調用。若是不中止，就是死循環，無限循環。

setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的ID值可用做 clearInterval() 方法的參數。

基本語法以下：

setInterval("javascript語句",毫秒)

案例：模擬時鐘

<!DOCTYPE html>

<head>

//時鐘開始

var id;

function start() {

var div1 = document.getElementById("div1");

id = setInterval(function () {

div1.innerText = new Date();

},1000);

}

function end() {

clearInterval(id);

}

</script>

</head>

<body>

</body>

</html>

三。 JavaScript HTML DOM操做

1. DOM簡介

1.1. 基本概念

HTML DOM稱爲文檔對象模型，當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）DOM。

HTML DOM 模型被構造爲對象的樹。

經過可編程的文檔對象模型，JavaScript 得到了足夠的能力來建立動態的 HTML。

1) JavaScript 可以改變頁面中的全部 HTML 元素

2) JavaScript 可以改變頁面中的全部 HTML 屬性

3) JavaScript 可以改變頁面中的全部 CSS 樣式

4) JavaScript 可以對頁面中的全部事件作出反應

1.2. 查找HTML元素

在JavaScript中，若是想要操做HTML元素，則首先必需要找到該元素，查找到HTML元素以後就變爲對象，那麼給對象賦值和獲取值就能夠操做HTML元素了。

JavScript可以操做HTML元素，就是經過DOM來實現的。

1.2.1. 經過id找到HTML元素

在HTML中，全部的標記均可以具備一個惟一的id值，經過這個id值就能夠輕鬆的找到該HTML元素。

在DOM中查找HTML元素的最簡單的方法，就是經過使用元素的 id值。若是未找到，則返回null，若是找到，則返回該元素的對象。若是存在id相同的，則只查找到第1個HTML元素。

基本語法以下：

var 變量名= document.getElementById("HTML元素的id值");

<!DOCTYPE html>

<head>

//查找到id爲div1的div元素

var div1 = document.getElementById("div1");

//查找id爲p1的p元素

var p1 = document.getElementById("p1");

//查找id爲span1的span元素

var span1 = document.getElementById("span1");

//查找id爲Button1的button元素

var button1 = document.getElementById("Button1");

</script>

</head>

<body>

</span>

</p>

</div>

</body>

</html>

1.2.2. 經過標籤名查找HTML元素

HTML標記的標籤名是指某一類HTML元素，例如：p標籤名錶示全部的p元素，div標籤名錶示全部的div元素。

經過標籤名能夠在整個HTML DOM樹中遍歷全部的HTML元素，從而按標籤名查找，返回的結果是一個包含相同標籤名的元素集合。

基本語法以下：

var 集合名= document.getElementsByTagName("標籤名");

注意：getElementsByTagName()方法返回的是一個包含多個元素的集合。

<!DOCTYPE html>

<head>

var tagNames = document.getElementsByTagName("p");

console.log(tagNames);

</script>

</head>

<body>

<div>

</div>

<div>

<p id="p2">Hello</p>

</div>

</body>

</html>

可見，在圖中，getElementsByTagName()返回的類型是HTMLCollection集合。其中的length屬性能夠獲取一共查找到了多少個元素。經過索引值能夠獲取查找到的元素對象。索引值是從0開始的，固然也能夠經過id值查找。HTMLCollection[「id」]。

1.2.3. 經過name查找HTML元素

經過HTML元素的name屬性值查找HTML元素，使用getElementsByName() 方法。因爲在HTML代碼中，有的元素的name值可能會相同，因此

getElementsByName()方法返回的是一個NodeList集合。

<!DOCTYPE html>

<head>

function getName() {

var name = document.getElementsByName("btnName");

console.log(name.value);

}

</script>

</head>

<body>

</div>

</body>

</html>

1.2.4. 經過類名找到HTML元素

這裏說的類名是指CSS中的類名。這樣咱們就能夠經過CSS的類名來查找HTML元素，使用getElementsByClassName()方法，返回的是一個HTMLCollection集合。

基本語法以下：

var 集合名= document.getElementsByClassName("類名");

<!DOCTYPE html>

<head>

function getClassName() {

var className = document.getElementsByClassName("topdiv");

console.log(className);

}

</script>

.topdiv{

width:200px;

line-height:30px;

height:30px;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

2. DOM HTML

HTML DOM容許JavaScript改變HTML元素的內容。

1) 改變HTML輸出流

在JavaScript中，使用document.write() 可直接向 HTML 輸出流寫內容。注意：document.write()會將頁面上原來的內容所有覆蓋掉。

document.write(new Date().toDateString());

2) 改變HTML內容

對於HTML元素的內容，可使用innerHTML和innerText這兩個屬性獲取或賦值。

innerHTML屬性能夠設置帶有html標記的內容：

div1.innerHTML= "<span style='color:red'>你好</span>";

innerText屬性只能設置純文本內容：

div1.innerText = "你還好嗎？";

3) 改變HTML屬性的值

改變HTML屬性是指能夠修改屬性的值，從而達到不一樣的效果。

//將div1元素的id值修改成div2

div1.id = "div2";

最經常使用的還有一種就是改變圖片的地址，從而達到切換圖片的效果：

document.getElementById("img1").src = "/Images/003.png";

3. DOM CSS

HTML DOM容許JavaScript改變HTML元素的樣式。

要想改變HTML元素的樣式，則仍是須要查找到該元素，而後使用以下語法改變樣式：

document.getElementById(id).style.屬性名=新樣式

<!DOCTYPE html>

<head>

function editCSS() {

//查找到該元素

var div1 = document.getElementById("div1");

//改變樣式

div1.style.color = "blue";

}

</script>

</head>

<body>

</body>

</html>

4. DOM 事件

4.1. 基本概念

HTML DOM使JavaScript有能力對HTML事件作出反應。能夠在事件發生時執行JavaScript代碼，例如當用戶在HTML元素上點擊時。

HTML具備的事件以下：

1) 當用戶點擊鼠標時

2) 當網頁已加載時

3) 當圖像已加載時

4) 當鼠標移動到元素上時

5) 當輸入字段被改變時

6) 當提交 HTML 表單時

7) 當用戶觸發按鍵時

4.2. HTML事件屬性

如需向HTML元素分配事件，可使用事件屬性，事件屬性大都以on開頭。

在VS開發工具中，全部以閃電圖標出現的都是事件。

<!DOCTYPE html>

<head>

function f1() {

}

</script>

</head>

<body>

</body>

</html>

事件屬性的值都是以函數的形式出現的，也就是直接調用函數。

4.3. 使用HTML DOM來分配事件

HTML DOM 容許經過使用JavaScript來向HTML元素分配事件。在上圖中，咱們都是直接在HTML標記上寫事件屬性，是在HTML代碼中指定的。固然也能夠在Js代碼中指定：

<!DOCTYPE html>

<head>

</head>

<body>

//向button1分配onclick事件

document.getElementById("Button1").onclick = function () {

document.write("單擊了按鈕。");

}

</script>

</body>

</html>

在此代碼中，使用JS代碼給按鈕分配了onclick事件屬性，而且還指定事件代碼，是一個匿名的函數。

在這裏，咱們將JS代碼放在了按鈕的後面，這是由於JS代碼首先要查找按鈕，只有查找到以後才能夠分配事件。

4.4. onload和onunload事件

onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。

onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本。

onload 和 onunload 事件可用於處理 cookie。

通常會在<body>標記上使用onload和onunload事件。

4.5. onchange事件

onchange事件常結合對輸入字段的驗證來使用。

當輸入的內容發生改變時則觸發onchange事件。

<!DOCTYPE html>

<head>

function isEmptyString(str) {

if (str.value == "") {

alert("用戶名不能爲空");

}

</script>

</head>

<body>

用戶名: <input id="Text1" type="text" onchange="isEmptyString(this)"/>

</body>

</html>

4.6. onmouseover 和 onmouseout 事件

onmouseover和onmouseout事件可用於在用戶的鼠標移至HTML 元素上方或移出元素時觸發函數。

<!DOCTYPE html>

<head>

function overColor() {

var t = document.getElementById("Text1");

t.style.border = "1px solid #ddd;";

t.style.color = "blue";

t.style.backgroundColor = "#ccc";

}

function outColor() {

var t = document.getElementById("Text1");

t.style.border = "";

t.style.color = "";

t.style.backgroundColor = "";

}

</script>

</head>

<body>

</body>

</html>

上圖是默認的效果。

上圖是鼠標移至文本框上以後觸發了onmouseover事件，執行了overColor()函數中的代碼。

上圖是鼠標離開了文本框時觸發了outColor()事件。

4.7. onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 構成了鼠標點擊事件的全部部分。首先當點擊鼠標按鈕時，會觸發 onmousedown 事件，當釋放鼠標按鈕時，會觸發 onmouseup 事件，最後，當完成鼠標點擊時，會觸發 onclick 事件。

注意：鼠標按下、鼠標釋放包括左鍵和右鍵。但對於onclick事件，則只是鼠標左鍵單擊時觸發。

<!DOCTYPE html>

<head>

//當鼠標按下時

function down() {

var btn = document.getElementById("Button1");

btn.value = "鼠標已按下";

}

//當鼠標鬆開時

function up() {

var btn = document.getElementById("Button1");

btn.value = "鼠標已鬆開";

}

//產生的單擊事件

function aClick() {

var btn = document.getElementById("Button1");

btn.value = "已單擊";

}

</script>

</head>

<body>

</body>

</html>

4.8. ondblclick事件

ondblclick表示雙擊事件，雙擊鼠標左鍵來執行事件代碼。

5. DOM EventListener

5.1. addEventListener()方法基本概念

addEventListener() 方法用於向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不會覆蓋已存在的事件句柄。

能夠向一個元素添加多個事件句柄。能夠向同個元素添加多個同類型的事件句柄，如：兩個 "click" 事件。

能夠向任何 DOM 對象添加事件監聽，不只僅是 HTML 元素。如： window 對象。

addEventListener() 方法能夠更簡單的控制事件（冒泡與捕獲）。

當使用 addEventListener() 方法時, JavaScript 從 HTML 標記中分離開來，可讀性更強，在沒有控制HTML標記時也能夠添加事件監聽。

基本語法以下：

元素對象.addEventListener(event, function, useCapture);

第一個參數是事件的類型 (如 "click" 或 "mousedown"，不須要前綴on)。

第二個參數是事件觸發後調用的函數。

第三個參數是個布爾值用於描述事件是冒泡仍是捕獲。該參數是可選的。

5.2. 向元素添加事件句柄

要給元素添加事件，首先須要查找到該元素，而後使用addEventListener()方法添加事件。

<!DOCTYPE html>

<head>

</head>

<body>

var btn1 = document.getElementById("Button1");

btn1.addEventListener("click", function () {

alert("單擊了我，執行了click事件");

});

//也能夠指定外部的函數

btn1.addEventListener("click", fk1());

</script>

</body>

</html>

addEventListener() 方法容許向同個元素添加多個事件，且不會覆蓋已存在的事件。

5.3. 向window對象添加事件句柄

addEventListener() 方法容許在 HTML DOM 對象上添加事件監聽， HTML DOM 對象如： HTML 元素, HTML 文檔, window 對象。或者其餘支持的事件對象如: xmlHttpRequest 對象。

當用戶重置窗口大小時添加事件監聽：

window.addEventListener("resize", function(){

document.getElementById("demo").innerHTML = sometext;

});

這說明能夠直接給window對象添加監聽事件。

5.4. 傳遞參數

當傳遞參數值時，使用"匿名函數"調用帶參數的函數：

元素對象.addEventListener("click", function(){ myFunction(p1, p2); });

5.5. removeEventListener()方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);

5.6. 冒泡事件和捕獲事件

事件傳遞有兩種方式：冒泡與捕獲。

事件傳遞定義了元素事件觸發的順序。若是你將 <p> 元素插入到 <div> 元素中，用戶點擊 <p> 元素, 哪一個元素的 "click" 事件先被觸發呢？

在冒泡中，內部元素的事件會先被觸發，而後再觸發外部元素，即： <p> 元素的點擊事件先觸發，而後會觸發 <div> 元素的點擊事件。

在捕獲中，外部元素的事件會先被觸發，而後纔會觸發內部元素的事件，即： <div> 元素的點擊事件先觸發，而後再觸發 <p> 元素的點擊事件。

addEventListener() 方法能夠指定 "useCapture" 參數來設置傳遞類型：

addEventListener(event, function, useCapture);

默認值爲 false, 即冒泡傳遞，當值爲 true 時, 事件使用捕獲傳遞。

5.7. 瀏覽器支持狀況

IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。可是，對於這類瀏覽器版本可使用 detachEvent() 方法來移除事件句柄:

element.attachEvent(event, function);

element.detachEvent(event, function);

通用跨瀏覽器的添加事件句柄方法：

var x = document.getElementById("myBtn");

if (x.addEventListener) { // 全部主流瀏覽器，除了 IE 8 及更早版本

x.addEventListener("click", myFunction);

} else if (x.attachEvent) { // IE 8 及更早版本

x.attachEvent("onclick", myFunction);

}

6. DOM元素操做

6.1. 添加新的HTML元素

如需向 HTML DOM 添加新元素，必須首先建立該元素（元素節點），而後向一個已存在的元素追加該元素。

<!DOCTYPE html>

<head>

//建立新的元素

function createNewElement() {

//創鍵一個p元素

var p1 = document.createElement("p");

//建立一個文本內容節點

var text1 = document.createTextNode("你好");

//將文本內容節點添加到p1元素中

p1.appendChild(text1);

//最後將p1元素添加到已有的元素後面

var div1 = document.getElementById("div1");

div1.appendChild(p1);

}

</script>

</head>

<body>

</body>

</html>

JavaScript都是使用appendChild()方法來添加子元素的。

6.2. 刪除HTML元素

如需刪除 HTML 元素，必須首先得到該元素的父元素對象，而後再查找到要刪除的子元素對象。

使用removeChild()方法從父元素中移除子元素。

<!DOCTYPE html>

<head>

//刪除元素

function delElement() {

//查找到要刪除元素所在的父元素

var parentElement = document.getElementById("div1");

//查找要刪除的子元素

var p1 = document.getElementById("p1");

parentElement.removeChild(p1);

}

</script>

</head>

<body>

你好

</p>

</div>

</body>

</html>

四。JS類型轉換，簡單驗證及JS CSS

1. JavaScript類型轉換

JavaScript 是一個腳本語言。它是一個輕量級，功能強大的編程語言，而且是面向對象的語言。

JavaScript是弱類型，鬆散類型的，只能使用關鍵字var來定義變量。如：

var x1 = 100;

x1 = "ABC";

</script>

在JavaScript中，因爲是弱類型的，因此給x1最初賦值爲100，後來又賦值爲字符串」ABC」，這在JavaScript中是容許的，而C#中是絕對不容許的。

那麼最終x1的值就是」ABC」了。

var x1 = 100;

x1 = "ABC";

document.write(x1);

</script>

輸出一下結果：

1.1. JavaScript數據類型

JavaScript中的數據類型分爲：基本數據類型和引用數據類型。其中基本數據類型有String、Number、Boolean。而引用類型有object、Date、Array等。

1) 數值使用Number表示，能夠用來表示整數、小數或科學計數法，不像C#分的那麼細。

//Number

var n1 = 100;

var n2 = 12.5;

var n3 = 100e6;

</script>

在JavaScript中，使用parseInt()轉換爲整數，parseFloat()轉換爲小數。true轉NaN,false轉NaN。」」字符串轉爲NaN，非數字字符串轉爲NaN。

Number()也強制類型轉換。轉換規則與parseInt()是不同的

var n = 200;

//字符串形式的數值轉換爲整數

var nx = parseInt("200");

//字符串形式的數值轉換爲小數

var nf = parseFloat("29.65");

2) 字符串使用String表示，須要使用單引號或雙引號括起來，而C#只能使用雙引號括起來。

//String

var s1 = "ABC";

var s2 = 'ABC';

3) 布爾類型使用Boolean表示，只能是true或false。

//Boolean

var b1 = false;

var b2 = true;

4) 數組使用Array表示，定義一個數組須要使用new關鍵字，數組對象是引用類型。定義的數組沒有賦值，默認爲undefined。

//Array

var array1 = new Array();

//賦值

array1[0] = "ABCV";

array1[1] = 100;

//可使用[]

var array2 = ["ABCV", 100];

5) 對象使用Object表示，定義一個對象，也須要new關鍵字。Object是引用類型。

//Object

var o1 = new Object();

//添加屬性

o1.name = "小明";

o1.age = 22;

o1.sex = '男';

//對象字面量表示法，使用冒號:將屬性和屬性值分開,每一個屬性使用逗號分開

var o2 = { name: "小明", age: 22, sex: "男" };

6) 函數使用Function表示， JavaScript函數與C#中的方法有類似之處。函數能夠有返回值，須要使用return語句，可是不須要指定返回類型。函數的參數是任意的。

定義一個函數須要使用function關鍵字：

//function

//不帶參數

function f1() {

document.write("你好");

}

//帶參數，沒有類型，只有參數名

function f2(name, age, sex) {

var x = name + age + sex;

document.write(x);

}

//也能夠這樣定義

var f3 = function () {

var x2 = "123";

document.write(x2);

}

7) 日期使用Date表示，Date是引用類型，使用時須要使用new關鍵字實例化。以下代碼：

//Date日期類型

var d = new Date();

document.write(d);

下面是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 日至今的毫秒數。

8) 數學對象使用Math表示，不須要實例化，能夠直接使用。以下代碼：

//數學對象

var m = Math.tan(23);

document.write(m);

Math對象經常使用的方法：

abs(x)	返回數的絕對值。
ceil(x)	對數進行上舍入。
floor(x)	對數進行下舍入。
max(x,y)	返回 x 和 y 中的最高值。
min(x,y)	返回 x 和 y 中的最低值。
random()	返回 0 ~ 1 之間的隨機數。
round(x)	把數四捨五入爲最接近的整數。

9) null類型，表示空引用。

10) undefined類型，表示未定義值，如定義的變量沒有賦值，則就是undefined。

1.2. JavaScript變量

變量用於存儲數據值。JavaScript使用關鍵字var來定義變量，使用等號來爲變量賦值：

//先定義後賦值

var a;

a = "abc";

//直接定義和賦值

var b = 100;

//改變變量的值

b = true;

b = "ABC";

</script>

1.3. JavaScript語句

在HTML中，JavaScript語句是向瀏覽器發出的命令。JavaScript語句是用分號結尾的，能夠省略分號。但不建議這樣作，當對JS代碼進行壓縮時，省略分號就不容許了。

1.4. JavaScript關鍵字

JavaScript關鍵字用於標識要執行的操做，和其餘任何編程語言同樣，JavaScript 保留了一些關鍵字爲本身所用。

下面是JavaScript中的關鍵字：

1.5. JavaScript標識符

JavaScript標識符必須以字母、下劃線（_）或美圓符（$）開始。

後續的字符能夠是字母、數字、下劃線或美圓符（數字是不容許做爲首字符出現的）。

JavaScript中的標識符是區分大小寫的，與C#同樣。

1.6. JavaScript註釋

JavaScript中的註釋分爲單行註釋和多行註釋。註釋是不

1) 單行註釋使用//表示，只能註釋一行代碼，與C#是徹底同樣的。

//定義單價

var price = 200.87;

2) 多行註釋使用/* */表示，能夠同時註釋多行代碼，與C#也是徹底同樣的。

//多行註釋

var a = 100;

var b = 200;

var c = 300;

1.7. typeof操做符

使用typeof()操做符是數據類型檢測方法，能夠據值來檢測是什麼數據類型。以下代碼：

document.write(typeof ("ABC"));

document.write("<br/>");

document.write(typeof "abc");

document.write("<br/>");

document.write(typeof (100));

document.write("<br/>");

document.write(typeof (true));

document.write("<br/>");

document.write(typeof (null));

document.write("<br/>");

document.write(typeof(undefined));

</script>

運行結果以下：

1.8. 運算符和表達式

一、算術運算符： + - * / % ++ --

二、賦值運算符：= += -=

三、比較運算符：> < >= <= == !=

四、邏輯運算符：&& || !

五、類型檢測運算符

typeof（），檢索數據類型，返回數據類型

IsNaN(),判斷是不是非數字，返回true或false，非數字返回true。

1.9. 數據類型轉換

1) 任何數據轉換爲字符串類型，可使用toString()方法和String()方法。

2) 任何數據轉換爲整數可使用Number()函數和parseInt()方法。

3) 任何數據轉換爲小數可使用Number()函數和parseFloat()方法。

4) 任何數據轉換爲布爾類型，則使用Boolean()函數。0轉換爲false，非0轉換爲true。Null、undefined都是false，空字符串爲false，非空字符串爲true。

2. JavaScript表單驗證

可使用C#中的一些非空判斷技巧用在JavaScript表單驗證中。

目標：練習JavaScript給文本框賦值和取值，並進行非空判斷。

【項目案例】：獲取用戶名和密碼

【項目背景】：登陸是項目中常見的效果，好比上淘寶網購物，登陸QQ，都要先登陸，才能獲取用戶信息，那麼我首先來實現登陸時如何獲取用戶信息。

完整代碼以下：

<!DOCTYPE html>

<head>

//獲取值

function getData() {

//獲取用戶名

var name = document.getElementById("txtName").value;

//獲取密碼

var age = document.getElementById("txtPwd").value;

if (name != "" && age != "") {

window.alert("用戶名是：" + name + "，密碼是：" + age);

}

else

{

window.alert("用戶名或密碼不可爲空。");

}

function clearData() {

//獲取用戶名

document.getElementById("txtName").value = "";

//獲取密碼

document.getElementById("txtPwd").value = "";

}

</script>

</head>

<body>

<h3>用戶信息註冊</h3>

用戶名：<input id="txtName" type="text" /><p />

密碼：<input id="txtPwd" type="password" /><p />

</body>

</html>

五。正則表達式語法

1. 正則表達式

1.1. 概念

正則表達式（英語：Regular Expression，在代碼中常簡寫爲regex、regexp或RE）使用單個字符串來描述、匹配一系列符合某個句法規則的字符串搜索模式。

搜索模式可用於文本搜索和文本替換。

1.2. 什麼是正則表達式

1) 正則表達式是由一個字符序列造成的搜索模式。

2) 當你在文本中搜索數據時，你能夠用搜索模式來描述你要查詢的內容。

3) 正則表達式能夠是一個簡單的字符，或一個更復雜的模式。

4) 正則表達式可用於全部文本搜索和文本替換的操做。

2. 正則表達式語法

JavaScript正則表達式字面量表示法的語法以下：

/模式/[修飾符]

例如：var patt = /BaWei/i;

其中，/BaWei/i是一個正則表達式，BaWei是一個搜索模式，用於檢索。i是一個修飾符，i表示不區分大小寫進行匹配。

3. 字符串方法

在 JavaScript 中，正則表達式一般用於兩個字符串方法 : search() 和 replace()。

3.1. search()方法

search()方法用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，並返回第一個匹配的子字符串的起始位置。未搜索到，則search()方法返回-1。

3.1.1. search()方法使用正則表達式

//正則表達式

var patt = /BaWei/i;

//字符串

var str1 = "Hello BaWei School";

//返回查找的索引位置

var index = str1.search(patt);

document.write(index);

</script>

在此代碼中，/BaWei/i是一個正則表達式，表示在字符串中搜索是否存在BaWei，i表示不區分大小寫，若是匹配到了，則返回相應的索引值，若是沒有匹配到，則返回-1。

var x = /[0-9]/i;

var s1 = "Hello World 8";

var index = s1.search(x);

document.write(index);

</script>

3.1.2. search()方法使用字符串

search方法可以使用字符串做爲參數。字符串參數會轉換爲正則表達式。

//字符串

var str = "BaWei";

//字符串

var str1 = "Hello BaWei School";

//返回查找的索引位置

var index = str1.search(str);

document.write(index);

</script>

3.2. replace()方法

replace()方法用於在字符串中用一些字符替換另外一些字符，或替換一個與正則表達式匹配的子字符串。

注意：若是不使用g修飾符，則只替換第一個匹配到的字符串。若是使用g修飾符，則所有匹配替換。

3.2.1. replace()方法使用正則表達式

案例：使用正則表達式且不區分大小寫將字符串中的 Microsoft 替換爲 BaWei。

var str = "Visit Microsoft!";

var res = str.replace(/Microsoft/i, "BaWei");

document.write(res);

</script>

replace()方法的參數說明以下：

1) 第1個參數能夠是查找的字符串，也能夠是一個正則表達式。

2) 第2個參數是最終要替換爲的新字符串。

3) 功能是將第1個參數匹配到的值替換爲第2個參數的值。

4) 返回的結果就是替換後的新字符串。

3.2.2. replace()方法使用字符串

replace()方法的第一個參數除了使用正則表達式以外，還可使用字符串。

var str = "Visit Microsoft!";

var res = str.replace("Microsoft", "BaWei");

document.write(res);

</script>

3.3. exec()方法

exec() 方法是一個正則表達式方法。用於在正則表達式中。

exec() 方法用於檢索字符串中的正則表達式的匹配。

該函數返回一個數組，其中存放匹配的結果。若是未找到匹配，則返回值爲 null。

var x = /a/g.exec("123a890a77777a");

console.log(x);

</script>

3.4. test()方法

test() 方法是一個正則表達式方法。

test() 方法用於檢測一個字符串是否匹配某個模式，若是字符串中含有匹配的文本，則返回 true，不然返回 false。

如下實例用於搜索字符串中的字符 "a"：

var x = /a/g.test("123a890a77777a");

console.log(x);

</script>

4. 正則表達式修飾符

4.1. /g修飾符和match()方法

/g修飾符，表示執行全局匹配，並非全部與正則表達式相關的函數都支持全局匹配，例如：search()方法就不支持/g修飾符，而match()和replace()方法就支持/g。

var patt = /BaWei/g;

var str = "ABCBaWei 123BaWei!";

var res = str.match(patt);

document.write(res);

</script>

字符串match()方法使用正則表達式模式對字符串執行查找，並將包含查找的結果做爲數組Array返回。

4.2. /m修飾符

/m表示多行查找，經常使用於^和$匹配中，^表示開頭，$表示結尾。

通常狀況下，m和g配合使用纔有意義。

var patt = /^BaWei/g;

var str = "BaWei\nBaWei";

var res = str.match(patt);

document.write(res);

</script>

只查找到了一個。

var patt = /^BaWei/gm;

var str = "BaWei\nBaWei";

var res = str.match(patt);

document.write(res);

</script>

使用/gm，全局多行查找。

4.3. /i修飾符

/i修飾符表示不區分大小寫匹配。

var patt = /Ho/;

var str = "123HOABC";

var res = str.search(patt);

document.write(res);

</script>

沒有找到。

var patt = /Ho/i;

var str = "123HOABC";

var res = str.search(patt);

document.write(res);

</script>

5. 正則表達式模式

六。JavaScript RegExp對象

1. 語法

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

1.1. 直接量(字面量)表示法

在上一節咱們學習了直接量（或字面量）表示法使用正則表達式，基本語法以下：

/pattern/attributes

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

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

1.2. RegExp對象

使用regExp對象能夠更加靈活的操做正則表達式，基本語法以下：

new RegExp(pattern, attributes);

new RegExp(正則表達式,修飾符);

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

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

var reg1 = new RegExp("Hello[A-Z]", "i");

var s = reg1.test("123HelloB");

document.write(s);

</script>

2. 修飾符

注意：search()方法不支持g修飾符標誌，而replace()和match()方法支持g修飾符標誌。

3. 方括號

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

var reg1 = new RegExp("[tyu]");

var b = reg1.test("y");

document.write(b);

</script>

var str = "abcd";

var patt1 = /[^abc]/g;

document.write(str.match(patt1));

var str = "a123";

var patt1 = /[^abc]/g;

document.write(str.match(patt1));

4. 元字符

var patt2 = /a.b/gi;

var str1 = "a1b";

document.write(patt2.test(str1));

var patt2 = /a.b/gi;

var str1 = "aMb";

document.write(patt2.test(str1));

var patt3 = /a\wb/gi;

var str2 = "aHb";

document.write(patt3.test(str2));

對於\w，數字、字母和下劃線都是能夠的。

var patt3 = /a\wb/gi;

var str2 = "a&b";

document.write(patt3.test(str2));

對於\b的使用，匹配單詞邊界：

/\bm/ 匹配 "moon" 中的 'm'；

/oo\b/ 不匹配 "moon" 中的 'oo'，由於 'oo' 後面的 'n' 是一個單詞字符；

/oon\b/ 匹配 "moon" 中的 'oon'，由於 'oon' 位於字符串的末端，後面沒有單詞字符；

/\w\b\W/ 不匹配任何字符，由於單詞字符以後毫不會同時緊跟着非單詞字符和單詞字符。

5. 量詞

6. RegExp對象方法

經常使用正則表達式

驗證數字：^[0-9]*$

驗證n位的數字：^\d{n}$

驗證至少n位數字：^\d{n,}$

驗證m-n位的數字：^\d{m,n}$

驗證零和非零開頭的數字：^(0|[1-9][0-9]*)$

驗證有兩位小數的正實數：^[0-9]+(.[0-9]{2})?$

驗證有1-3位小數的正實數：^[0-9]+(.[0-9]{1,3})?$

驗證整數和一位小數:^[0-9]+(.[1-9]{1})?$

驗證非零的正整數：^\+?[1-9][0-9]*$

驗證非零的負整數：^\-[1-9][0-9]*$

驗證非負整數（正整數 + 0） ^\d+$

驗證非正整數（負整數 + 0） ^((-\d+)|(0+))$

驗證長度爲3的字符：^.{3}$

驗證由26個英文字母組成的字符串：^[A-Za-z]+$

驗證由26個大寫英文字母組成的字符串：^[A-Z]+$

驗證由26個小寫英文字母組成的字符串：^[a-z]+$

驗證由數字和26個英文字母組成的字符串：^[A-Za-z0-9]+$

驗證由數字、26個英文字母或者下劃線組成的字符串：^\w+$

驗證用戶密碼:^[a-zA-Z]\w{5,17}$ 正確格式爲：以字母開頭，長度在6-18之間，只能包含字符、數字和下劃線。

驗證是否含有 ^%&',;=?$\" 等字符：[^%&',;=?$\x22]+

驗證漢字：^[\u4e00-\u9fa5]+$

驗證Email地址：^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$

驗證InternetURL：^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ；^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$

驗證電話號碼：^($\d{3,4}$|\d{3,4}-)?\d{7,8}$：--正確格式爲：XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX。

驗證身份證號（15位或18位數字）：^\d{15}|\d{}18$

驗證一年的12個月：^(0?[1-9]|1[0-2])$ 正確格式爲：「01」-「09」和「1」「12」

驗證一個月的31天：^((0?[1-9])|((1|2)[0-9])|30|31)$ 正確格式爲：0一、09和一、31。

整數：^-?\d+$

非負浮點數（正浮點數 + 0）：^\d+(\.\d+)?$

正浮點數 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$

非正浮點數（負浮點數 + 0） ^((-\d+(\.\d+)?)|(0+(\.0+)?))$

負浮點數 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$

浮點數 ^(-?\d+)(\.\d+)?

0-100之間的數，小數點後面最多兩位^(?:(?!0\d)\d{1,2}(?:\.\d{1,2})?|100(?:\.0{1,2})?)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。