Web前端基礎：

Web前端：HTML最強總結附詳細代碼
Web前端：CSS最強總結附詳細代碼
Web前端：JavaScript最強總結附詳細代碼

Web前端工具：

Web前端： JQuery最強總結附上詳細代碼
Web前端：Bootstrap最強總結附詳細代碼

Web前端：JavaScript最強總結

基本概念
- 概念
- 作用
- 用法
JavaScript顯示資料
JavaScript的注釋
JavaScript基本語法
- JavaScript的陳述句
- JavaScript的資料型別
- - 值型別(基本型別)
  - 參考資料型別
  - JavaScript擁有動態型別
- JavaScript中的運算子
JavaScript物件
- JavaScript的String物件
- JavaScript的Array物件
- JavaScript的Date物件
- JavaScript的Math物件
JavaScript的函式
- JavaScript的常用全域函式
- JavaScript的自定義函式
- JavaScript的匿名函式
JavaScript變數的作用域
- 區域 JavaScript 變數
- 全域 JavaScript 變數
- 變數的生命周期
JavaScript自定義物件
- 定義物件
- 物件的屬性
- 訪問物件的屬性
- 訪問物件的方法
JavaScript Window--瀏覽器物件模型
- window物件
- window物件屬性
- - history物件
  - location物件
- window物件方法
- - 打開和關閉瀏覽器案例
  - 彈框案例
  - 定時器案例
JavaScript之事件
- HTML事件
- 常用的HTML事件
JavaScript之DOM模型
- document物件
- document物件常用方法
- - 查找 HTML 元素常用方法
  - 修改 HTML 內容和屬性
  - 修改 HTML 元素的css
- HTML DOM 元素 (節點)
- - 創建新的 HTML 元素
  - 替換 HTML 元素
  - 洗掉HTML元素
表單驗證
- 表單驗證意義與場景
- 表單驗證常用事件與屬性
JavaScript的 RegExp 物件
- 概念
- 語法
- 修飾符
- 正則運算式模式
- 正則運算式的方法test(str)
- 常用的正則運算式校驗案例
JavaScript案例
- 全選/全不選
- 動態表格
- 省市級聯特效

基本概念

概念

JavaScript 是腳本語言，是一種解釋性腳本語言(代碼不進行預編譯)
JavaScript 是一種輕量級的編程語言，
JavaScript 是可插入 HTML 頁面的編程代碼
JavaScript 插入 HTML 頁面后，可由所有的現代瀏覽器執行
JavaScript 很容易入門

作用

為網頁添加各式各樣的動態功能,
為用戶提供更流暢美觀的瀏覽效果，通常JavaScript腳本是通過嵌入在HTML中來實作自身的功能的

用法

HTML頁面中的JavaScript

在html頁面中的腳本必須位于script圍堵標簽之間，script標簽放在head中可以，body中也可以，放在最后也可以，對位置要求不嚴格

我們可以在 HTML 檔案中放入不限數量的script標簽，通常的做法是把內容統一放入head或者頁面底部，這樣就可以把它們安置到同一處位置，不會干擾頁面的內容

PS：有些案例中可能會在 script 標簽中出現type=“text/javascript”，現在完全可以省略了，JavaScript已經是所有現代瀏覽器以及 HTML5 中的默認腳本語言

<!DOCTYPE html>
<html>
    <head>
		<meta charset="utf-8" />
		<title>JavaScript的用法</title> 
		<script>
	            alert("hello JavaScript1-1");
	   	</script>
		<script>
	            alert("hello JavaScript1-2");
	    </script>
 	</head>
    <body>
		<script>
            alert("hello JavaScript2-1");
        </script>
		<script>
            alert("hello JavaScript2-2");
        </script>
    </body>
</html>
<script>
    alert("hello JavaScript3-1");
</script>
<script>
    alert("hello JavaScript3-2");
</script>

外部的JavaScript

可以把腳本保存到外部檔案中，外部檔案通常包含被多個網頁使用的代碼，外部 JavaScript 檔案的檔案擴展名是 .js，

當我們使用外部檔案時，在HTML頁面的script 標簽的 “src” 屬性中設定該 .js 檔案:

myScript.js檔案 //外部js檔案中不能有script標簽，直接撰寫JavaScript腳本代碼即可 function fun1(){
    alert("hello JavaScript");
}

.html檔案

<!DOCTYPE html>
    <html>
        <head>
            <script src="js/myScript.js"/>
        </head>
        <body>
            <script>
				fun1();//呼叫腳本中的內容s 
			</script>
        </body>
</html>
外部檔案引入一次即可，在head或者body中都可以，

PS:外部腳本不能包含 script 標簽，

標簽屬性中的JavaScript

直接撰寫在HTML標簽的一些屬性中，用于簡單的JavaScript代碼的撰寫，用的偏少，

<a href="javascript:alert('ok')">登錄</a>

JavaScript顯示資料

使用window.alert()彈出框
PS:這里的window可以省略，等價于alert(“hello world”);

使用document.write()將內容寫入到html檔案

使用innerHTML寫入到html元素

在這里插入圖片描述

JavaScript的注釋

JavaScript注釋與java的單行和多行注釋相同，
單行注釋以 // 開頭，
多行注釋以 /* 開始，以 */ 結尾，

JavaScript基本語法

JavaScript 是一個腳本語言，它是一個輕量級，但功能強大的編程語言，

JavaScript語法跟Java很相似，但是也有區別，JavaScript是弱語言型別，即有些時候有些錯誤不影響運行，但是依然推薦大家按照規范去撰寫代碼，語言弱，程式員不能弱，

變數

宣告變數的關鍵字:var
語法:var 變數名稱;

var myCompany; //宣告變數 
myCompany='開課吧';//賦值 
var x=5;//宣告的同時賦值
var y=6;
var z=x+y;//變數也可以存盤運算式

變數的命名規則

變數必須以字母開頭
變數也能以 $ 和 _ 符號開頭
變數名稱對大小寫敏感(y 和 Y 是不同的變數) 不能使用關鍵字保留字

變數的命名規范:

見名知意，例如:breadPirce,userService等，避免無意義的a,b,c等
推薦駝峰命名法，即第一個單詞的首字母小寫，以后每個單詞的首字母大寫，例如lastName

JavaScript的陳述句

JavaScript 陳述句向瀏覽器發出的命令，陳述句的作用是告訴瀏覽器該做什么，

JavaScript 是腳本語言，瀏覽器會在讀取代碼時，逐行地執行腳本代碼，而對于傳統編程來說，會在執行前對所有代碼進行編譯，

JavaScript中也有分支結構和回圈結構，語法與java類似，此處就不再深入講解，細節上的內容等我們后面使用過的時候再給大家單獨指出，

PS:一般一行只寫一條陳述句，每句結尾撰寫分號結束，

JavaScript的資料型別

值型別(基本型別)

字串String

字串是存盤字符的變數，字串可以是引號中的任意文本，必須使用單引號或雙引號;

var myCompany; //宣告變數 myCompany='開課吧'; //賦值 var x=5;//宣告的同時賦值
var y=6;
var z=x+y;//變數也可以存盤運算式
var gameName="英雄聯盟";
var hairstylist='tony'; //PS:注意引號嵌套
var message1='我的發型師是"tony"老師'; 
var message2="我的發型師是'tony'老師";

布爾Boolean

只能有兩個值:true 或 false，

var isUnderstand = true;
var isSingle = false;

空Null

var email = null;

未定義Undefined
表示變數不含有值，可以通過將變數的值設定為 null 來清空變數，
共有4中情況會出現undefined的值

變數宣告且沒有賦值

var obj; 
alert(obj);//obj值為undefined

獲取物件中不存在的屬性時

var obj;
alert(obj.name);//報錯資訊: "Uncaught TypeError: Cannot read property 'name' of undefined"

函式需要實參，但是呼叫時沒有傳值，形參是undefined;
函式呼叫沒有回傳值或者return后沒有資料，接收函式回傳的變數是undefined

function printNum(num){
    alert(num);
}
var result=printNum();//呼叫函式未傳遞引數，執行函式的時候num的值是undefined alert(result);
//result的值也是undefined，因為printNum()沒有回傳值

參考資料型別

物件(Object)、陣列(Array)、函式(Function)，后續章節詳細介紹，

JavaScript擁有動態型別

JavaScript 擁有動態型別，這意味著相同的變數可用作不同的類

var param; // param型別為 undefined 
param = 5; // 現在 param 為數字
param = "John"; // 現在 param 為字串

PS:雖然JavaScript支持這種寫法，但是我不推薦這種寫法，大家盡量開始宣告變數的時候就確定好將要 盛放什么型別的值，以后盡量不隨意改變，

JavaScript中的運算子

運算子型別	符號
算數運算子	±* /%、++、 –
賦值運算子	:=、 +=、-=、*=、 /=、%=
字串的連接符	+
邏輯運算子	&&
條件運算子	?:
比較運算子	== 、!=、> 、<、 >=、 <=

比較特殊的運算子：

比較運算	描述
===	絕對等于(值和型別均相等)
!==	不絕對等于(值和型別有一個不相等，或兩個都不相等)

var x=5;
var  res=(x===5); // true
res=(x==='5');// false
res=(x!==5); // false
res=(x!=='5');// true

JavaScript物件

JavaScript的String物件

String物件屬性–長度屬性

var str="我喜歡看NBA,最喜歡的球員是\'小學生\'庫里"; //注意:字串中出現的\'是一個字符，轉義為一個單引號 
console.log(str); //獲取字串的長度:，切記:所有轉移符號的長度都算一個，即\'長度為1 
console.log("字串的長度="+str.length);//22

JavaScript的Array物件

Array 物件用于在變數中存盤多個值，也就是陣列

宣告陣列
在這里插入圖片描述

陣列的長度 length屬性

var nameArr=["寶玉","黛玉","湘云"];
var len=nameArr.length; //獲取陣列的長度，因為是屬所以不是length()

JavaScript的Date物件

創建日期物件

var date1 = new Date();
var date2 = new Date(milliseconds);
var date3 = new Date(dateString);
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

日期物件的常用方法

方法	描述
getDate()	從 Date 物件回傳一個月中的某一天 (1 ~ 31)
getDay()	從 Date 物件回傳一周中的某一天 (0 ~ 6)
getFullYear()	從 Date 物件以四位數字回傳年份
getHours()	回傳 Date 物件的小時 (0 ~ 23)
getMinutes()	回傳 Date 物件的分鐘 (0 ~ 59)
getMonth()	從 Date 物件回傳月份 (0 ~ 11)
getSeconds()	回傳 Date 物件的秒數 (0 ~ 59)
setDate()	設定 Date 物件中月的某一天 (1 ~ 31)
setFullYear()	設定 Date 物件中的年份(四位數字)
setHours()	設定 Date 物件中的小時 (0 ~ 23)
setMinutes()	設定 Date 物件中的分鐘 (0 ~ 59)
setSeconds()	設定 Date 物件中的秒鐘 (0 ~ 59)
setMonth()	設定 Date 物件中月份 (0 ~ 11)

JavaScript的Math物件

Math常用屬性

var pi=Math.PI;//回傳圓周率

Math常用方法

var num=Math.random();// 回傳 0 ~ 1 之間的亂數， 
var max=Math.max(12,34,-90,9);//回傳 n個數值中的最大值，
var min=Math.min(12,34,-90,9);//回傳 n個數值中的最小值，

JavaScript的函式

JavaScript的常用全域函式

JavaScript中有個常用的全域屬性NaN,即非數值(Not a Number)，NaN 屬性用于參考特殊的非數字值，該屬性指定的并不是不合法的數字

isNaN(param)

用于檢查其引數是否是非數值字
是數值的回傳false，不是數值回傳true

console.log(isNaN(666));//false
console.log(isNaN(1+2));//false
console.log(isNaN("hello"));//true

parseFloat(String)

可決議一個字串，并回傳一個浮點數，該函式指定字串中的首個字符是否是數字，如果是，則對字串進行決議，直到到達數字的末端為止，然后以數字回傳該數字，而不是作為字串，

console.log(parseFloat("66"));//66 
console.log(parseFloat("199.99"));//199.99 
console.log(parseFloat("1024 2048 4096"));//1024 
console.log(parseFloat(" 128 "));//128 
console.log(parseFloat("10年"));//10 
console.log(parseFloat("今天是8號"));//NaN

字串中只回傳第一個數字，
開頭和結尾的空格是允許的，
如果字串的第一個字符不能被轉換為數字，那么 parseFloat() 會回傳 NaN，

parseInt(string,radix)

可決議一個字串，并回傳一個整數

引數	描述
string	必需，要被決議的字串，
radix	可選，表示要決議的數字的基數，該值介于 2 ~ 36 之間

當引數 radix 的值為 0，或沒有設定該引數時，parseInt() 會根據 string 來判斷數字的基數，
當忽略引數 radix , JavaScript 默認數字的基數如下:

如果 string 以 “0x” 開頭，parseInt() 會把 string 的其余部分決議為十六進制的整數
如果 string 以 0 開頭，那么 ECMAScript v3 允許 parseInt() 的一個實作把其后的字符決議為八進制或十六進制的數字
如果 string 以 1 ~ 9 的數字開頭，parseInt() 將把它決議為十進制的整數

console.log(parseInt("66"));//66 
console.log(parseInt("199.99"));//199 
console.log(parseInt("1024 2048 4096"));//1024 
console.log(parseInt(" 128 "));//128 
console.log(parseInt("10年"));//10 
console.log(parseInt("今天是8號"));//NaN
console.log(parseInt("10",10));//10
console.log(parseInt("010"));//10
console.log(parseInt("10",8));//8
console.log(parseInt("0x10"));//16
console.log(parseInt("10",16));//16 

PS:舊瀏覽器由于使用舊版本的ECMAScript(ECMAScript版本小于ECMAScript 5，當字串以"0"開 頭時默認使用八進制，ECMAScript 5使用的是十進制)，所以在決議("010") 將輸出8，

只有字串中的第一個數字會被回傳，
開頭和結尾的空格是允許的，
如果字串的第一個字符不能被轉換為數字，那么 parseInt() 會回傳 NaN，在字串以"0"為開始時舊的瀏覽器默認使用八進制基數，ECMAScript 5，默認的是十進制的基數，

JavaScript的自定義函式

自定義函式語法
使用function關鍵字定義函式

function 自定義函式名稱(引數串列){
	 //函式體
}

自定義函式實體
注意:1、函式的形參直接寫引數名稱，不需要宣告型別，即不需要寫var.
2、函式的回傳取決于函式體中是否有return關鍵字，

在這里插入圖片描述

JavaScript的匿名函式

在這里插入圖片描述

JavaScript變數的作用域

區域 JavaScript 變數

在 JavaScript 函式內部宣告的變數(使用 var)是變數，所以只能在函式內部訪問，

在不同的函式中可以宣告名稱相同變數，因為區域變數出該函式就失效了，

全域 JavaScript 變數

在函式外宣告的變數是變數，網頁上的所有腳本和函式都能訪問它，

<script>
	var userId = 1001; //全域變數:整個script腳本中都可用,要注意先后順序
	function printMessage() {
		var userName = "李白";//區域變數:只在當前函式中生效 
		document.write(userId);//使用全域變數的時候，保證使用(方法被呼叫)之前定義并賦值
		document.write(message);
    printMessage();
</script>
<script>
    function printMessage2() {
		var userName2 = "李白2";
		document.write(userId);//這里也可以使用userId 
		//document.write(userName1);//錯誤:呼叫不到printMessage函式中的區域變數 
		document.write(userName2);//正確:可以使用自己函式中的區域變數
}
</script>

變數的生命周期

JavaScript 變數的生命期從它們被宣告的時間開始，
區域變數會在函式運行以后被洗掉，全域變數會在頁面關閉后被洗掉，

JavaScript自定義物件

物件也是一個變數，但物件可以包含多個值(多個變數)

定義物件

物件中可以有屬性，也可以有方法

在這里插入圖片描述

物件的屬性

可以說 “JavaScript 物件是變數的容器”，
但是，我們通常認為 “JavaScript 物件是鍵值對的容器”，
鍵值對通常寫法為 name : value (鍵與值以冒號分割)，
鍵值對在 JavaScript 物件通常稱為物件屬性，

訪問物件的屬性

//訪問物件的屬性
//方式1:
var n = student.name;
//方式2:
var n2 = student["name"];

訪問物件的方法

在這里插入圖片描述

JavaScript Window–瀏覽器物件模型

瀏覽器物件模型 (BOM) 使 JavaScript 有能力與瀏覽器"對話"，

BOM:Browser Object Model，中文瀏覽器物件模型，

雖然現在BOM尚無正式標準，但是由于現代瀏覽器已經(幾乎)實作了 JavaScript 互動性方面的相同方法和屬性，因此window常被認為是 BOM 的方法和屬性，

window物件

所有瀏覽器都支持 window 物件，它表示瀏覽器視窗，( 沒有應用于 window 物件的公開標準，不過所有瀏覽器都支持該物件)，

所有 JavaScript 全域物件、函式以及變數均自動成為 window 物件的成員，全域變數是 window 物件的屬性，

全域函式是 window 物件的方法，

Window 物件表示瀏覽器中打開的視窗，

window物件屬性

屬性	描述
document	對 Document 物件的只讀參考
history	對 History 物件的只讀參考
location	用于視窗或框架的 Location 物件
name	設定或回傳視窗的名稱

history物件

window.history 物件包含瀏覽器的歷史，
window.history物件在撰寫時可不使用 window 這個前綴，

常用方法:

history.back() - 與在瀏覽器點擊后退按鈕相同
history.forward() - 與在瀏覽器中點擊向前按鈕相同
history.go(1/-1)
引數為1:等同于 history.forward()，
引數為-1，等同于 history.back()

<a href="javascript:window.history.forward()">前進</a> 
<a href="javascript:window.history.back()">后退</a>
<a href="javascript:window.history.go(1)">前進go</a> 
<a href="javascript:window.history.go(-1)">后退go</a>

location物件

window.location 物件用于獲得當前頁面的地址 (URL)，并把瀏覽器重定向到新的頁面，

常用屬性和方法:

window.location 物件在撰寫時可不使用 window 這個前綴，
href 當前視窗正在瀏覽的網頁地址
replace(url) 轉向到url網頁地址
reload() 重新載入當前網址，如同按下重繪按鈕

<a href="javascript:alert(window.location.href)">獲取當前頁面的URL地址</a>
<a href="javascript:window.location.reload()">重繪</a><br />
<a href="javascript:window.location.replace('index.html')">跳轉到index</a><br />
<a href="javascript:location.replace('https://www.baidu.com')">跳轉到百度</a><br />

window物件方法

方法	描述
alert()	顯示帶有一段訊息和一個確認按鈕的警告框
confirm()	顯示帶有一段訊息以及確認按鈕和取消按鈕的對話框
prompt()	顯示可提示用戶輸入的對話框
open()	設定或回傳視窗的名稱
close()	打開一個新的瀏覽器視窗或查找一個已命名的視窗
setTimeout()	關閉瀏覽器視窗
setInterval()	在指定的毫秒數后呼叫函式或計算運算式
clearInterval()	取消由 setInterval() 設定的 timeout
clearTimeout()	取消由 setTimeout() 方法設定的 timeout

打開和關閉瀏覽器案例

<a href="javascript:window.open('https://www.baidu.com')">打開百度</a> 
<a href="javascript:window.open('index.html')">打開-index</a>
<a href="javascript:window.close()">關閉當前頁面</a>

彈框案例

<script>
	//window物件常用的彈框方法
	//1、基本彈框
	window.alert("只有一個確定按鈕的對話框"); 
	//2、對話框:有確定和取消兩個看你，點擊確定回傳true，點擊取消回傳false 
	var res=window.confirm("確認要關閉嗎?");
	if(res){
		alert("點擊了確定按鈕"); 
	}else{
		alert("點擊取消按鈕"); 
	}
	//3、輸入框:prompt(提示資訊，默認值) 
	var age=prompt("請輸入年齡:",19);
	alert("輸入的年齡資訊是:"+age);
</script>

定時器案例

<div id="today1"> 
	div--顯示時間1
</div>
<a href="javascript:window.clearInterval(flag1)">停止定時器clearInterval</a> 
<div id="today2">
	div--顯示時間2 
</div>
<a href="javascript:window.clearTimeout(flag2)">停止定時器clearTimeout</a> 
<script>
	function showTime1(){
	  	var time=new Date();
        var y=time.getFullYear();
        var mon=time.getMonth();
        var d=time.getDate();
		var h=time.getHours();
		var m=time.getMinutes();
		var s=time.getSeconds(); 			
		document.getElementById("today1").innerHTML=y+"年"+mon+"月"+d+"日
"+h+":"+m+":"+s;
    }
	//定時器setInterval(定時呼叫的函式,時間間隔毫秒)
    var flag1=window.setInterval("showTime1()",1000);
</script>
<script>
    function showTime2(){
        var time=new Date();
        var y=time.getFullYear();
        var mon=time.getMonth();
        var d=time.getDate();
        
        var h=time.getHours();
        var m=time.getMinutes();
        var s=time.getSeconds();
        
		document.getElementById("today2").innerHTML=y+"年"+mon+"月"+d+"日 "+h+":"+m+":"+s;
        flag2=window.setTimeout("showTime2()",1000);
    }
	//在指定的毫秒數后呼叫函式或計算運算式，
    var flag2=window.setTimeout("showTime2()",1000);
</script>

JavaScript之事件

HTML 事件是發生在 HTML 元素上的事情，當在 HTML 頁面中使用 JavaScript 時， JavaScript 可以觸發這些事件，

HTML事件

HTML 事件可以是瀏覽器行為，也可以是用戶行為，

例如頁面加載完成、你點擊個按鈕、文本框輸入了文字等等，都是HTML事件的案例，

通過當事件發生時，我們希望可以做些事情，例如點擊完畢按鈕之后希望跳轉頁面、文本框輸入完畢之后驗證有效性等，那么這些要做的事情我們就可以通過JavaScript實作，

常用的HTML事件

事件	描述
onchange	HTML 元素改變
onclick	用戶點擊 HTML 元素
onmouseover	用戶在一個HTML元素上移動滑鼠
onmouseout	用戶從一個HTML元素上移開滑鼠
onkeydown	用戶按下鍵盤按鍵
onload	瀏覽器已完成頁面的加載
onfocus	元素獲取焦點時觸發
onblur	元素失去焦點時觸發

<script>
	function fun1(){
		alert('選擇的內容發生了變化');
    }
    
    function fun2(){
		alert("觸發了單擊事件"); 
	}
	
	function fun3() {
	 	document.getElementById("btn").innerHTML="滑鼠移動到按鈕上了";
    }
    
    function fun4() {
		document.getElementById("btn").innerHTML="點擊我試試"; 
	}
	
	function fun5() { 
		alert("鍵盤按下了");
    }
    
    function fun6() {
		alert("獲取到了焦點");
	}
	
	function fun7() { 
		alert("input失去了焦點");
    }
    
    function myLoad(){
		alert("頁面加載完畢"); 
	}
</script>
    <body onl oad="myLoad()">
        <input id="userName" onkeydown="fun5()" onfocus="fun6()" onblur="fun7()"/>
        <input id="password" type="password" />
        <button id="btn" type="button" onclick="fun2()"  
		onmouseover="fun3()" onm ouseout="fun4()">點擊我試試</button>
		
		<select id="month" onchange="fun1()"> 
			<option>1月份</option> 
			<option>2月份</option>
	    </select>
	</body>

JavaScript之DOM模型

通過 HTML DOM，可訪問 JavaScript HTML 檔案的所有元素，

DOM:Document Object Model,檔案物件模型

當網頁被加載時，瀏覽器會創建頁面的檔案物件模型

HTML DOM 模型被構造為物件的樹:

在這里插入圖片描述
通過可編程的物件模型，JavaScript 獲得了足夠的能力來創建動態的 HTML：

JavaScript 能夠改變頁面中的所有 HTML
元素 JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應

document物件

當瀏覽器載入 HTML 檔案, 它就會成為 Document 物件

Document 物件是 HTML 檔案的根節點
Document 物件使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問

提示: Document 物件是 Window 物件的一部分，可通過 window.document 屬性對其進行訪問，

document物件常用方法

查找 HTML 元素常用方法

方法	描述
document.getElementById()	回傳對擁有指定 id 的第一個物件的參考，
document.getElementsByClassName()	回傳檔案中所有指定類名的元素集合，作為 NodeList 物件
document.getElementsByTagName()	回傳帶有指定標簽名的物件集合
document.getElementsByName()	回傳帶有指定名稱的物件集合

<script>
    function myLoad(){
		//頁面加載完畢之后再去獲取頁面上的元素，否則獲取不到
		//根據ID 獲取元素，只能獲取到唯一元素(如果有重名的ID元素，獲取到的是第一個元素) var div=document.getElementById("myDiv");
		console.log(div);
		//根據指定的類樣式的名稱獲取元素，回傳集合
		var list=document.getElementsByClassName("demo"); 		
		console.log("根據類樣式的名稱獲取到的元素的集合長度是:"+list.length); for(var i=0;i<list.length;i++){
        console.log(list[i]);
	}
	
	//根據指定HTML標簽名稱獲取元素，回傳集合
	var list2=document.getElementsByTagName("li"); 
	console.log("根據標簽的名稱獲取到的元素的集合長度是:"+list2.length); 
	for(var i=0;i<list2.length;i++){
            console.log(list2[i]);
        }
	//根據指定HTML元素的name屬性獲取元素，回傳集合
	var list3=document.getElementsByName("myli"); console.log("根據標簽的名稱屬性獲取到的元素的集合長度是:"+list3.length); 
	for(var i=0;i<list3.length;i++){
            console.log(list3[i]);
    	}
}
</script>
<body onl oad="myLoad()">
    <p  class="demo"></p>
    <div id="myDiv" class="demo">
		div
    </div>
    <ul class="demo">
        <li>li11111111111</li>
        <li name="myli">li11111111111</li>
        <li>li11111111111</li>
        <li name="myli">li11111111111</li>
    </ul>
</body>

修改 HTML 內容和屬性

修改內容

修改 HTML 內容的最簡單的方法是使用 innerHTML 屬性

修改 HTML 元素的內容的語法:
document.getElementById(id).innerHTML= HTML，

PS: 絕對不要在檔案(DOM)加載完成之后使用 document.write()，這會覆寫該檔案

修改 HTML 屬性

修改 HTML 元素屬性的語法: 
方式1:
document.getElementById(id).attribute=新屬性值;

方式2:
document.getElementById(id).setAttribute(屬性名，屬性值);

<div id="mydiv">div</div>
var mydiv=document.getElementById("mydiv"); 
mydiv.innerHTML="新的div內容"; document.getElementById("myimg").src="x1.jpg";

<h1 style="color: green;" id="myh1">hello world</h1> var h1=document.getElementById("myh1"); h1.setAttribute("class","bg");//設定屬性 
console.log(h1.getAttribute("class"));//獲取屬性class 
console.log(h1.getAttribute("style"));//獲取屬性style

修改 HTML 元素的css

修改 HTML 元素css的語法:
document.getElementById(id).style.property=新樣式

document.getElementById("myli").style.color="blue"; 
document.getElementById("myli").style.fontFamily="微軟雅黑"; 
document.getElementById("myli").style.fontSize="24px";

HTML DOM 元素 (節點)

創建新的 HTML 元素

要創建新的 HTML 元素 (節點)需要先創建一個元素，然后在已存在的元素中添加它，

<button type="button" onclick="createNewP()">動態添加一個元素-- appendChild</button>
<button type="button" onclick="createNewP2()">動態添加一個元素-- insertBefore</button>
<div id="div1">
	<p id="p1">這是段落1</p> 
	<p id="p2">這是段落2</p>
</div>
<script>
	function createNewP(){
		var newElementP=document.createElement("p");//創建一個新的段落元素
		var text=document.createTextNode("這是我新創建的段落");//新創建的文本節點 //將文本的節點添加到新創建的元素中
		newElementP.appendChild(text);
		//獲取一個頁面已經存在的元素
		var div=document.getElementById("div1"); //添加新創建的元素p到已經存在的元素div中
		div.appendChild(newElementP);
	}
	function createNewP2(){
		var newElementP=document.createElement("p");//創建一個新的段落元素
		var text=document.createTextNode("這是我新創建的段落p2");//新創建的文本節點 //將文本的節點添加到新創建的元素中
		newElementP.appendChild(text);
//獲取一個頁面已經存在的元素
		var div=document.getElementById("div1"); 
		var p1=document.getElementById("p1");
		//添加新創建的元素p到已經存在的元素div中,指定插入到段落P1前面
        div.insertBefore(newElementP,p1);
    }
</script>

替換 HTML 元素

-replaceChild()方法

<div id="div1">
	<p id="p1">這是一個段落，</p>
	<p id="p2">這是另外一個段落，</p>
</div>
<button type="button" onclick="changeElemnt()">替換p1</button> <script>
	function changeElemnt(){
		var newElementP=document.createElement("p");//創建一個新的段落元素
		var text=document.createTextNode("這是我新創建的段落p");//新創建的文本節點 //將文本的節點添加到新創建的元素中
		newElementP.appendChild(text);
//獲取要被替換的元素p1及其父元素div
		var div=document.getElementById("div1");
		var p1=document.getElementById("p1");
//將div中的元素p1替換為新創建的元素
		div.replaceChild(newElementP,p1);
	}
</script>

洗掉HTML元素

-removeChild()方法

<div id="div1">
	<p id="p1">這是一個段落，</p>
	<p id="p2">這是另外一個段落，</p>
</div>
<button type="button" onclick="deleteElement()">洗掉p1-方式1</button> <button type="button" onclick="deleteElement()">洗掉p1-方式2</button> 
<script>
	function deleteElement(){
		var div=document.getElementById("div1"); 
		var p1=document.getElementById("p1"); //從父元素div中洗掉子元素p1 div.removeChild(p1);
    }
    function deleteElement2(){
		var p1=document.getElementById("p1"); //p1.parentNode:作用就是獲取要洗掉元素p1的父元素div p1.parentNode.removeChild(p1);
	}
</script>

表單驗證

表單驗證意義與場景

降低服務器壓力
攔截不合格的資料，避免直接提交到服務器，可以顯著降低服務器開銷
提升用戶體驗
早期的互聯網，表單項都是非常多的，注冊個賬號，經常需要填寫20+個欄位，而其中有一個填寫不正確就要等待幾十秒時間，如果有了表單驗證，反饋是實時的，而且腳本還能把你定位到填寫錯誤的具體欄位，現在雖然無重繪技術早已普及，但是只依賴服務端驗證，還是會有幾百毫秒的延遲，實際使用會有一種很難受的粘滯感，

表單驗證常用事件與屬性

表單經常需要做一些非空驗證、長度驗證、合法性驗證等，

<!DOCTYPE html>
<html>
    <head>
		<meta charset="UTF-8"> 
		<title>表單驗證</title> 
		<script>
			function validateName(){
//所有的表單項元素都value屬性
				var name=document.getElementById("userName").value; 
				var msg=document.getElementById("nameMsg"); 		
				if(name==null || name ==""){
					msg.innerHTML="用戶名不能為空!"; 		
					msg.style.color="red";
					return false;
				} else if(name.length<6){ 
					msg.innerHTML="用戶名長度必須為大于6的!"; 	
					msg.style.color="red";
					return false;
				}
			 	msg.innerHTML="用戶名可用"; msg.style.color="green"; 
			 	return true;
}
            function validatePwd(){
                var password1=document.getElementById("password1").value;
                var msg=document.getElementById("pwdMsg1");
                if(password1==null || password1 ==""){
					msg.innerHTML="密碼不能為空!"; msg.style.color="red";
					return false;
				} else if(password1.length<8){ 
					msg.innerHTML="密碼的長度必須為大于8的!"; 		
					msg.style.color="red";
					return false;
				}
				msg.innerHTML="密碼合法"; msg.style.color="green"; 
				return true;
            }
            
            function confirmPwd(){
                var pwd1=document.getElementById("password1").value;
                var pwd2=document.getElementById("password2").value;
                var msg=document.getElementById("pwdMsg2");
                if(pwd1!=pwd2){
					msg.innerHTML="兩次輸入的密碼不一致!";
					msg.style.color="red";
                    return false;
                }
				msg.innerHTML="兩次輸入的密碼一致"; 		
				msg.style.color="green";
				return true;
			}
			
            function validateGender(){
                var gender=document.getElementById("gender").value;
                if(gender==-1){
					alert("性別為必選項!");
                    return false;
                }
                return true;
            }
            function register(){
                return validateName()&&validatePwd()&&confirmPwd()&&validateGender();
            }
        </script>
    </head>
<body>
	<h1>英雄會注冊</h1>
	<form action="提交.html" method="get" onsubmit="return register()">
		*用戶名:<input type="text" id="userName" placeholder="請輸入用戶名" onblur="validateName()" />
		<span id="nameMsg">用戶名長度至少6位</span><br />
	*密碼:<input type="password" id="password1" placeholder="請輸入密碼" onblur="validatePwd()"/>
		<span id="pwdMsg1">密碼長度至少8位</span><br />
	*確認密碼:<input type="password" id="password2" placeholder="請確認密 碼" onblur="confirmPwd()" />
		<span id="pwdMsg2">確認密碼與密碼一致</span><br /> 
	*性別:<select id="gender">
			<option value="-1">請選擇性別</option>
			<option value="0">女</option>
			<option value="1">男</option>
		</select><br /><br />
	<button type="submit">注冊</button>
	<button type="reset">重置</button>
        </form>
    </body>
</html>

JavaScript的 RegExp 物件

概念

RegExp:是正則運算式(regular expression)的簡寫，

正則運算式(英語:Regular Expression，在代碼中常簡寫為regex、regexp或RE)使用單個字串來描述、匹配一系列符合某個句法規則的字串搜索模式，搜索模式可用于文本搜索和文本替換，

語法

語法:

var reg=new RegExp(/正則運算式主體/,修飾符(可選)); 或更簡單的方法
var reg=/正則運算式主體/修飾符(可選);

案例:
var reg=new RegExp(/kaikeba/i);
var reg = /kaikeba/i; //此處定義了一個一個正則運算式， kaikeba 是一個正則運算式主體 (用于檢索)，
i 是一個修飾符 (搜索不區分大小寫)，

修飾符

修飾符	描述
i	執行對大小寫不敏感的匹配
g	執行全域匹配(查找所有匹配而非在找到第一個匹配后停止)
m	執行多行匹配

正則運算式模式

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

運算式	描述
[a-z]	查找方括號之間的任何字符
[0-9]	查找任何從 0 至 9 的數字
(xIy)	查找任何以 I 分隔的選項

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

元字符	描述
\d	查找數字
\s	查找空白字符
\b	匹配單詞邊界
\uxxxx	查找以十六進制數 xxxx 規定的 Unicode 字符

量詞:

量詞	描述
n+	匹配任何包含至少一個 n 的字串
n*	匹配任何包含零個或多個 n 的字串
n?	匹配任何包含零個或一個 n 的字串

正則運算式的方法test(str)

test() 方法用于檢測一個字串是否匹配某個模式，如果字串中含有匹配的文本，則回傳 true，否則回傳 false，

var reg = /budingCode/i;
var res=reg.test("歡迎關注budingCode"); 
console.log(res);//true

var reg = /^[a-zA-Z]+[\u4e00-\u9fa5]*[0-9]$/; 
var str="a公司拼音為9";
var res=reg.test(str); console.log(res);//true 
console.log(reg.test("a你好239"));//false

常用的正則運算式校驗案例

<script> 
	/*檢查輸入的身份證號是否正確*/ 
	function checkCard(str) {
		/*15位數身份證正則運算式:
		* 編碼規則順序從左至右依次為6位數字地址碼，6位數字出生年份后兩位及日期，3位數字順序
		[1-9]\d{5} 						前六位地區，非0打頭
		\d{2}							出生年份后兩位00-99
		((0[1-9])|(10|11|12))			01-12月
		(([0-2][1-9])|10|20|30|31)		01-31天
		\d{3}							順序碼三位，沒有校驗碼
				*/
        var arg1 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/;
        if (arg1.length == 15 && !arg1.test(arg1)) {
             return false;
		}
		
		/*18位數身份證正則運算式:
		* 編碼規則順序從左至右依次為6位數字地址碼，6位數字出生年份后兩位及日期，3位數字順序
		[1-9]\d{5} 						前六位地區，非0打頭
		(18|19|([23]\d))\d{2}			出生年份后兩位00-99
		((0[1-9])|(10|11|12))			01-12月
		(([0-2][1-9])|10|20|30|31)		01-31天
		\d{3}[0-9Xx]					順序碼三位，+ 一位校驗碼
				*/
		var arg2 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
		 if (arg2.length == 18 && !arg2.test(sfzhmcode)){
             return false;
         }
        return true;
	}

	/*是否是小數*/
	function isDecimal(strValue) {
        var objRegExp = /^\d+\.\d+$/;
        return objRegExp.test(strValue);
    }
    
	/*校驗是否中文名稱組成 */ 
	function ischina(str) {
        var reg = /^[\u4E00-\u9FA5]{2,4}$/;
        return reg.test(str);
    }
    
	/*校驗是否全由8位數字組成 */ 
	function isNum(str) {
        var reg = /^[0-9]{8}$/;
        return reg.test(str);
    }
    
	/*校驗電話碼格式 :座機和手機*/ 
	function isTelCode(str) {
        var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;
        return reg.test(str);
    }
    
    /*校驗手機號*/
	function isPhoneNum(str) {
	//如果你要精確驗證手機號碼，那個你可以使用第一個正則，這是根據電信，移動，聯通目前發行的號碼來的，驗證比較精確，
        var reg = /^1[3|4|5|7|8][0-9]{9}$/;
// 如果因為現有的號碼不能滿足市場需求，電信服務商會增大號碼范圍，所以一般情況下我們 只要驗證手機號碼為11位，且以1開頭，
        var reg = /^^1[0-9]{10}$$/;
        return reg.test(str);
    }
    
	/*校驗郵件地址是否合法 */ 
	function IsEmail(str) {
        var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
        return reg.test(str);
    }
    
	/*檢查輸入的URL地址是否正確 */ 
	function checkURL(str) {
        if(str.match(/http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/i) == null)
            return false;
        } else {
            return true;
        }
	}
</script>

JavaScript案例

全選/全不選

在這里插入圖片描述

<!DOCTYPE html>
<html>
    <head>
<meta charset="UTF-8"> <title>全選</title> <script>
            function myAll(){
                var all=document.getElementById("all");
                var oneList=document.getElementsByName("one");
                for(var i=0;i<oneList.length;i++){
                    oneList[i].checked=all.checked;
                }
            }
			
            function myOne(){
                var all=document.getElementById("all");
                var oneList=document.getElementsByName("one");
                for(var i=0;i<oneList.length;i++){
                    if(oneList[i].checked==false){
                        all.checked=false;
                        return;
} }
                all.checked=true;
            }
        </script>
    </head>
    <body>
        <table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="180px">
            <tr>
				<th>全選<input id="all" type="checkbox" onclick="myAll()"/>
				</th> <th>序號</th>
				<th>名稱</th>
				<th>單價</th>
				<th>數量</th>
				<th>總計</th> </tr>
			</tr>
			<tr>
				<td><input name="one" type="checkbox" onclick="myOne()"/></td> 
				<td>1</td>
				<td>小熊餅干1</td>
				<td>￥125</td>
				<td>1</td>
				<td>￥125</td>
			</tr> 
			<tr>
				<td><input name="one" type="checkbox" onclick="myOne()"/></td> 
				<td>1</td>
				<td>小熊餅干2</td>
				<td>￥125</td>
				<td>1</td>
				<td>￥125</td>
			</tr> 
			<tr>
				<td><input name="one" type="checkbox" onclick="myOne()"/></td> 
				<td>1</td>
				<td>小熊餅干3</td>
				<td>￥125</td>
				<td>1</td>
				<td>￥125</td>
			</tr> 
        </table>
    </body>
</html>

動態表格

表格的屬性和方法	描述
table.rows	獲取表格中的所有行
tr.cells	獲取表格中某一行的所有單元格
tr.rowIndex	獲取表格中某一行的下標索引(從0開始)
td.cellIndex	獲取單元格的下標索引
table.insertRow()	在表格中創建新行，并將行添加到rows集合中
table.deleteRow()	從表格即rows集合中洗掉指定行
tr.insertCell())	在表格的行中創建新的單元格，并將單元格添加到cells集合中

遍歷表格中的內容，動態添加行、洗掉行

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8"> 
			<title>動態表格</title> 
			<style>
            td,th{
                padding: 10px;
			}
			</style>
			<script>
				function bianli(){
					var tab=document.getElementById("myTable");//獲取到了表格的js物件 //獲取表格的所有行
				var trArr=tab.rows;//遍歷行
				for(var i=0;i<trArr.length;i++){
					var trObj=trArr[i]; //alert("行的下標索引:"+trObj.rowIndex); //獲取每行的單元格的集合
					var tdArr=trObj.cells;
//遍歷每個單元格
					var str="";
					for(var j=0;j<tdArr.length;j++){
					var tdObj=tdArr[j];
					var html=tdObj.innerHTML;//獲取每個單元格中的內容 
					var index=tdObj.cellIndex;//獲取每個單元格的下標索引 str+=index+"-"+html+"=====";
				}
				console.log("行的下標索引:"+trObj.rowIndex+":"+str); }
			}
			
			function addRow(){ //獲取到表格的物件
				var tab=document.getElementById("myTable");
				//給表格添加一行
				var newTr=tab.insertRow();//創建了一個空行，在頁面上看不出來 //給新創建的行添加列
				var newTd1=newTr.insertCell();//給新的行創建了一個新的單元格
				var newTd2=newTr.insertCell();
				var newTd3=newTr.insertCell();
				var newTd4=newTr.insertCell();
				var newTd5=newTr.insertCell();
				//給每一個單元格中添加內容
				var num=parseInt(Math.random()*10)+1;
				newTd1.innerHTML=num;
				newTd2.innerHTML="小熊餅干"+num;
				newTd3.innerHTML="$125";
				newTd4.innerHTML="1";
				newTd5.innerHTML='<button type="button" onclick="delRow(this)">
				洗掉</button>'; 
			}
			
			function delRow(btn){
				var tab=document.getElementById("myTable"); 
				//btn:表示點擊的當前的洗掉按鈕， 
				//btn.parentNode獲取的按鈕的父元素td,btn.parentNode.parentNode獲取的按鈕的父元素td的父元素tr
				var trIndex=btn.parentNode.parentNode.rowIndex;
				//根據行的下標索引洗掉行
                tab.deleteRow(trIndex);
            }
        </script>
    </head>
    <body>
		<button type="button" onclick="bianli()">遍歷表格</button>
		<button type="button" onclick="addRow()">添加</button>
        <table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%"  style="text-align: center;">

		<tr> 
			<th>序號</th>
			<th>名稱</th> 
			<th>單價</th> 
			<th>數量</th> 
			<th>總計</th>
		</tr> 
		<tr>
			<td>1</td>
			<td>小熊餅干1</td>
			<td>￥125</td>
			<td>1</td>
			<td><button type="button" onclick="delRow(this)">洗掉</button>
		</tr>
		<tr>
			<td>2</td>
			<td>小熊餅干2</td>
			<td>￥125</td>
			<td>1</td>
			<td><button type="button" onclick="delRow(this)">洗掉</button>
    	</tr>
		</table>
    </body>
</html>

省市級聯特效

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
		<title>省市級聯</title> 
	</head>
    <body>
        <select onchange="changeCity(this.value)">
			<option>--請選擇省份--</option> 
			<option value="0">北京</option> 
			<option value="1">浙江省</option> 
			<option value="2">河北省</option>
			<option value="3">廣東省</option>
        </select>
        	<select id="city">
        </select>
    </body>
</html>
<script>
//創建二維陣列存盤省份和對應的城市
	var cityList=new Array();
	cityList[0] = new Array("朝陽區", "海淀區", "東城區", "西城區"); 
	cityList[1] = new Array("杭州市", "嘉興市", "寧波市", "紹興市"); 
	cityList[2] = new Array("石家莊市", "唐山市", "承德市", "張家口市");
	cityList[3] = new Array("廣州市", "惠州市", "深圳市", "茂名市");
	function changeCity(val){ //獲取到城市的下拉串列框
		var city=document.getElementById("city"); //先去清空原有的城市下拉串列內容 city.options.length=0;
		var arr=cityList[val];
		for(var i=0;i<arr.length;i++){
		//創建option元素節點
		var option=document.createElement("option"); 
		//設定option元素節點的內容和value 
		option.innerHTML=arr[i]; 
		option.value=arr[i]; 
		//將新創建的option節點添加到城市下拉框中 
		city.appendChild(option);
		} 
	}
</script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/271380.html

標籤：其他

上一篇：JavaScript ES2021 最值得期待的 5 個新特性決議

下一篇：【vue系列】小白入門篇，一天就能掌握vue開發技巧及規則

Web前端：JavaScript最強總結 附詳細代碼 （帶常用案例！）

Web前端：JavaScript最強總結

基本概念

概念

作用

用法

JavaScript顯示資料

JavaScript的注釋

JavaScript基本語法

JavaScript的陳述句

JavaScript的資料型別

值型別(基本型別)

參考資料型別

JavaScript擁有動態型別

JavaScript中的運算子

JavaScript物件

JavaScript的String物件

JavaScript的Array物件

JavaScript的Date物件

JavaScript的Math物件

JavaScript的函式

JavaScript的常用全域函式

JavaScript的自定義函式

JavaScript的匿名函式

JavaScript變數的作用域

區域 JavaScript 變數

全域 JavaScript 變數

變數的生命周期

JavaScript自定義物件

定義物件

物件的屬性

訪問物件的屬性

訪問物件的方法

JavaScript Window–瀏覽器物件模型

window物件

window物件屬性

history物件

location物件

window物件方法

打開和關閉瀏覽器案例

彈框案例

定時器案例

JavaScript之事件

HTML事件

常用的HTML事件

JavaScript之DOM模型

document物件

document物件常用方法

查找 HTML 元素常用方法

修改 HTML 內容和屬性

修改 HTML 元素的css

HTML DOM 元素 (節點)

創建新的 HTML 元素

替換 HTML 元素

洗掉HTML元素

表單驗證

表單驗證意義與場景

表單驗證常用事件與屬性

JavaScript的 RegExp 物件

概念

語法

修飾符

正則運算式模式

正則運算式的方法test(str)

常用的正則運算式校驗案例

JavaScript案例

全選/全不選

動態表格

省市級聯特效

Web前端：JavaScript最強總結附詳細代碼（帶常用案例！）