JavaScript
ECMAScript
BOM
DOM
事件
* 概念： 一門客戶端腳本語言
* 運行在客戶端瀏覽器中的。每一個瀏覽器都有JavaScript的解析引擎
* 腳本語言：不需要編譯，直接就可以被瀏覽器解析執(zhí)行了
* 功能：
* 可以來增強用戶和html頁面的交互過程，可以來控制html元素，讓頁面有一些動態(tài)的效果，增強用戶的體驗。
* JavaScript發(fā)展史：
1. 1992年，Nombase公司，開發(fā)出第一門客戶端腳本語言，專門用于表單的校驗。命名為：C--，后來更名為：ScriptEase
2. 1995年，Netscape(網(wǎng)景)公司，開發(fā)了一門客戶端腳本語言：LiveScript。后來，請來SUN公司的專家，修改LiveScript，命名為JavaScript
3. 1996年，微軟抄襲JavaScript開發(fā)出JScript語言
4. 1997年，ECMA(歐洲計算機制造商協(xié)會)，制定出客戶端腳本語言的標(biāo)準(zhǔn)：ECMAScript，就是統(tǒng)一了所有客戶端腳本語言的編碼方式。
* JavaScript = ECMAScript + JavaScript自己特有的東西(BOM+DOM)
* ECMAScript：客戶端腳本語言的標(biāo)準(zhǔn)
1. 基本語法：
(1) 與html結(jié)合方式
1. 內(nèi)部JS：
* 定義<script>，標(biāo)簽體內(nèi)容就是js代碼
2. 外部JS：
* 定義<script>，通過src屬性引入外部的js文件
* 注意：
1. <script>可以定義在html頁面的任何地方。但是定義的位置會影響執(zhí)行順序。
2. <script>可以定義多個。
(2) 注釋
1. 單行注釋：//注釋內(nèi)容
2. 多行注釋：/*注釋內(nèi)容*/
(3) 數(shù)據(jù)類型：
1. 原始數(shù)據(jù)類型(基本數(shù)據(jù)類型)：
1. number：數(shù)字。 整數(shù)/小數(shù)/NaN(not a number 一個不是數(shù)字的數(shù)字類型)
2. string：字符串。 字符串 "abc" "a" 'abc'
3. boolean: true和false
4. null：一個對象為空的占位符
5. undefined：未定義。如果一個變量沒有給初始化值，則會被默認(rèn)賦值為undefined
2. 引用數(shù)據(jù)類型：對象
(4) 變量
* 變量：一小塊存儲數(shù)據(jù)的內(nèi)存空間
* Java語言是強類型語言，而JavaScript是弱類型語言。
* 強類型：在開辟變量存儲空間時，定義了空間將來存儲的數(shù)據(jù)的數(shù)據(jù)類型。只能存儲固定類型的數(shù)據(jù)
* 弱類型：在開辟變量存儲空間時，不定義空間將來存儲的數(shù)據(jù)的數(shù)據(jù)類型，可以存放任意類型的數(shù)據(jù)。
* 語法：
* var 變量名 = 初始化值;
* typeof運算符：獲取變量的類型。
* 注：null運算后得到的是object
(5) 運算符
1. 一元運算符：只有一個運算數(shù)的運算符
++，-- ， +(正號) -(負(fù)號)
* ++ --: 自增(自減)
* ++(--) 在前，先自增(自減)，再運算
* ++(--) 在后，先運算，再自增(自減)
* +(-)：正負(fù)號
* 注意：在JS中，如果運算數(shù)不是運算符所要求的類型，那么js引擎會自動的將運算數(shù)進行類型轉(zhuǎn)換
* 其他類型轉(zhuǎn)number：
* string轉(zhuǎn)number：按照字面值轉(zhuǎn)換。如果字面值不是數(shù)字，則轉(zhuǎn)為NaN（不是數(shù)字的數(shù)字）
* boolean轉(zhuǎn)number：true轉(zhuǎn)為1，false轉(zhuǎn)為0
2. 算數(shù)運算符
+ - * / % ...
和Java沒有區(qū)別
3. 賦值運算符
= += -+ ...
和Java沒有區(qū)別
4. 比較運算符
> < >= <= == ===(全等于)
* 比較方式
1. 類型相同：直接比較
* 字符串：按照字典順序比較。按位逐一比較，直到得出大小為止。
2. 類型不同：先進行類型轉(zhuǎn)換，再比較
* ===：全等于。在比較之前，先判斷類型，如果類型不一樣，則直接返回false
5. 邏輯運算符
&& || !
* 其他類型轉(zhuǎn)boolean：
1. number：0或NaN為假，其他為真
2. string：除了空字符串("")，其他都是true
3. null&undefined:都是false
4. 對象：所有對象都為true
6. 三元運算符
? : 表達式
var a = 3;
var b = 4;
var c = a > b ? 1:0;
* 語法：
* 表達式? 值1:值2;
* 判斷表達式的值，如果是true則取值1，如果是false則取值2；
(6) 流程控制語句：
1. if...else...
2. switch:
* 在Java中，switch語句可以接受的數(shù)據(jù)類型： byte int shor char,枚舉(1.5) ,String(1.7)
* switch(變量):
case 值:
* 在JS中,switch語句可以接受任意的原始數(shù)據(jù)類型
3. while
4. do...while
5. for
(7) JS特殊語法：
1. 語句以;結(jié)尾，如果一行只有一條語句則 ;可以省略 (不建議)
2. 變量的定義使用var關(guān)鍵字，也可以不使用
* 用： 定義的變量是局部變量
* 不用：定義的變量是全局變量(不建議)
(8) 練習(xí)：99乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>99乘法表</title>
<style>
td{
border: 1px solid;
}
</style>
<script>
document.write("<table align='center'>");
//1.完成基本的for循環(huán)嵌套，展示乘法表
for (var i = 1; i <= 9 ; i++) {
document.write("<tr>");
for (var j = 1; j <=i ; j++) {
document.write("<td>");
//輸出 1 * 1 = 1
document.write(i + " * " + j + " = " + ( i*j) +" ");
document.write("</td>");
}
/*//輸出換行
document.write("<br>");*/
document.write("</tr>");
}
//2.完成表格嵌套
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
2. 基本對象：
(1) Function：函數(shù)(方法)對象
創(chuàng)建：
1.
var fun = new Function(形式參數(shù)列表,方法體); //了解，不使用這種方式。
2.
function 方法名稱(形式參數(shù)列表){
方法體
}
3.
var 方法名 = function(形式參數(shù)列表){
方法體
}
屬性：
length:代表形參的個數(shù)
特點：
1. 方法定義時，形參的類型不用寫,返回值類型也不寫。
2. 方法是一個對象，如果定義名稱相同的方法，會覆蓋。
3. 在JS中，方法的調(diào)用只與方法的名稱有關(guān)，和參數(shù)列表無關(guān)。
4. 在方法聲明中有一個隱藏的內(nèi)置對象（數(shù)組），arguments,封裝所有的實際參數(shù)。
調(diào)用：
方法名稱(實際參數(shù)列表);
(2) Array：數(shù)組對象
創(chuàng)建：
1. var arr = new Array(元素列表);
2. var arr = new Array(默認(rèn)長度);
3. var arr = [元素列表];
方法：
join(參數(shù)):將數(shù)組中的元素按照指定的分隔符拼接為字符串。（不傳參數(shù)默認(rèn)以逗號為分隔符）
push():向數(shù)組的末尾添加一個或更多元素，并返回新的長度。
concat():連接兩個或更多的數(shù)組并返回結(jié)果。
reverse():顛倒數(shù)組中元素的順序。
sort():對數(shù)組中的元素進行排序。
屬性：
length:數(shù)組的長度
特點：
1. JS中，數(shù)組元素的類型可變的。
2. JS中，數(shù)組長度可變。
(3) Boolean
(4) Date：日期對象
創(chuàng)建：
var date = new Date();
方法：
toLocaleString():返回當(dāng)前date對象對應(yīng)的時間本地字符串格式
getTime():獲取毫秒值。返回當(dāng)前日期對象描述的時間到1970年1月1日零點的毫秒值差
(5) Math：數(shù)學(xué)對象
創(chuàng)建：
* 特點：Math對象不用創(chuàng)建，直接使用。 Math.方法名();
方法：
random():返回 0 ~ 1 之間的隨機數(shù)。 含0不含1
ceil(x)：對數(shù)進行上舍入。
floor(x)：對數(shù)進行下舍入。
round(x)：把數(shù)四舍五入為最接近的整數(shù)。
屬性：
PI
練習(xí)：
取1~100之間的隨機整數(shù)
1. Math.random()產(chǎn)生隨機數(shù)：范圍(0,1]小數(shù)
2. 乘以100 --> [0,99.9999]小數(shù)
3. 舍棄小數(shù)部分：floor --> [0,99]整數(shù)
4. +1 --> [1,100]整數(shù)
var number = Math.floor(Math.random()*100)+1;
(6) Number
(7) String
(8) RegExp：正則表達式對象
正則表達式：定義字符串的組成規(guī)則。
1. 單個字符:[]
如： [a]:一個a [ab]:一個a或一個b [a-zA-Z0-9_]：一個小寫字母或大寫字母或數(shù)字或_
* 特殊符號代表特殊含義的單個字符:
\d:單個數(shù)字字符 [0-9]
\w:單個單詞字符[a-zA-Z0-9_]
2. 量詞符號
?：表示出現(xiàn)0次或1次
*：表示出現(xiàn)0次或多次
+：出現(xiàn)1次或多次
{m,n}:表示 m <= 數(shù)量 <= n
* m如果缺?。?{,n}:最多n次
* n如果缺省：{m,} 最少m次
*
3. 開始結(jié)束符號
* ^:開始
* $:結(jié)束
正則對象：
1. 創(chuàng)建
1. var reg = new RegExp("正則表達式");
2. var reg = /正則表達式/;
2. 方法
1. test(參數(shù)):驗證指定的字符串是否符合正則定義的規(guī)范
(9) Global
特點：全局對象，這個Global中封裝的方法不需要對象就可以直接調(diào)用。 方法名();
方法：
encodeURI():url編碼
decodeURI():url解碼
encodeURIComponent():url編碼,編碼的字符更多
decodeURIComponent():url解碼
parseInt():將字符串轉(zhuǎn)為數(shù)字
* 逐一判斷每一個字符是否是數(shù)字，直到不是數(shù)字為止，將前邊數(shù)字部分轉(zhuǎn)為number
isNaN():判斷一個值是否是NaN
* NaN六親不認(rèn)，連自己都不認(rèn)。NaN參與的==比較全部為false
eval():將JavaScript字符串轉(zhuǎn)為腳本代碼來執(zhí)行。
URL編碼
平醬 = %C6%BD%BD%B4
* 功能：控制html文檔的內(nèi)容
* 獲取頁面標(biāo)簽(元素)對象：Element
* document.getElementById("id值"):通過元素的id獲取元素對象
* 操作Element對象：
1. 修改屬性值：
(1) 明確獲取的對象是哪一個？
(2) 查看API文檔，找其中有哪些屬性可以設(shè)置
2. 修改標(biāo)簽體內(nèi)容：
* 屬性：innerHTML
(1) 獲取元素對象
(2) 使用innerHTML屬性修改標(biāo)簽體內(nèi)容
* 功能： 某些組件被執(zhí)行了某些操作后，觸發(fā)某些代碼的執(zhí)行。
* 造句： xxx被xxx,我就xxx
* 我方水晶被摧毀后，我就責(zé)備對友。
* 敵方水晶被摧毀后，我就夸獎自己。
* 如何綁定事件
1. 直接在html標(biāo)簽上，指定事件的屬性(操作)，屬性值就是js代碼
事件：onclick --- 單擊事件
2. 通過js獲取元素對象，指定事件屬性，設(shè)置一個函數(shù)
* 代碼：
<body>
<img id="light" src="img/off.gif" onclick="fun();">
<img id="light2" src="img/off.gif">
<script>
function fun(){
alert('我被點了');
alert('我又被點了');
}
function fun2(){
alert('咋老點我？');
}
//1.獲取light2對象
var light2 = document.getElementById("light2");
//2.綁定事件
light2.onclick = fun2;
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>電燈開關(guān)</title>
</head>
<body>
<img id="light" src="img/off.gif">
<script>
/*
分析：
1.獲取圖片對象
2.綁定單擊事件
3.每次點擊切換圖片
* 規(guī)則：
* 如果燈是開的 on,切換圖片為 off
* 如果燈是關(guān)的 off,切換圖片為 on
* 使用標(biāo)記flag來完成
*/
//1.獲取圖片對象
var light = document.getElementById("light");
var flag = false;//代表燈是滅的。 off圖片
//2.綁定單擊事件
light.onclick = function(){
if(flag){//判斷如果燈是開的，則滅掉
light.src = "img/off.gif";
flag = false;
}else{
//如果燈是滅的，則打開
light.src = "img/on.gif";
flag = true;
}
}
</script>
</body>
</html>
1. 概念：Browser Object Model 瀏覽器對象模型
* 將瀏覽器的各個組成部分封裝成對象。
2. 組成：
* Window：窗口對象
* Navigator：瀏覽器對象
* Screen：顯示器屏幕對象
* History：歷史記錄對象
* Location：地址欄對象
3. Window：窗口對象
創(chuàng)建：
方法：
1. 與彈出框有關(guān)的方法：
alert() 顯示帶有一段消息和一個確認(rèn)按鈕的警告框。
confirm() 顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對話框。
* 如果用戶點擊確定按鈕，則方法返回true
* 如果用戶點擊取消按鈕，則方法返回false
prompt() 顯示可提示用戶輸入的對話框。
* 返回值：獲取用戶輸入的值
2. 與打開關(guān)閉有關(guān)的方法：
close() 關(guān)閉瀏覽器窗口。
* 調(diào)用此方法的窗口對象被關(guān)閉
open() 打開一個新的瀏覽器窗口
* 傳入鏈接，則打開一個新的此鏈接對應(yīng)的瀏覽器窗口
* 返回新的Window對象
3. 與定時器有關(guān)的方式
setTimeout() 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式。
* 參數(shù)：
1. "js代碼"或者方法對象
2. 毫秒值
* 返回值：唯一標(biāo)識，用于取消定時器
clearTimeout() 取消由 setTimeout() 方法設(shè)置的 timeout。
setInterval() 按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式。
clearInterval() 取消由 setInterval() 設(shè)置的 timeout。
屬性：
1. 獲取其他BOM對象
history
location
Navigator
Screen:
2. 獲取DOM對象
document
特點:
* Window對象不需要創(chuàng)建可以直接使用 window 使用。 window.方法名(); 直接調(diào)用方法
* window引用可以省略。 方法名();
4. Location：地址欄對象
創(chuàng)建(獲取)：
1. window.location
2. location
方法：
* reload() 重新加載當(dāng)前文檔。刷新
屬性
* href 設(shè)置或返回完整的URL。
5. History：歷史記錄對象
創(chuàng)建(獲取)：
1. window.history
2. history
方法：
* back() 加載 history 列表中的前一個 URL。
* forward() 加載 history 列表中的下一個 URL。
* go(參數(shù)) 加載 history 列表中的某個具體頁面。
* 參數(shù)：
* 正數(shù)：前進幾個歷史記錄
* 負(fù)數(shù)：后退幾個歷史記錄
屬性：
* length 返回當(dāng)前窗口歷史列表中的 URL 數(shù)量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<script>
var number = 1;
function fun(){
number++;
if(number > 3) {
number = 1;
}
var img = document.getElementById("img");
img.src = "img/banner_"+number+".jpg";
}
setInterval(fun,3000);
</script>
</head>
<body>
<img id = "img" src="img/banner_1.jpg" width="100%">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自動跳轉(zhuǎn)首頁</title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body>
<p>
<span id="time">5</span>秒之后自動跳轉(zhuǎn)首頁...
</p>
<script>
/*
分析：
1. 顯示首頁效果 <p>
2. 倒計時讀秒效果實現(xiàn)
2.1 定義一個方法，獲取span標(biāo)簽，修改span標(biāo)簽體內(nèi)容，時間--
2.2 定義一個定時器，1秒執(zhí)行一次該方法
3. 在方法中判斷時間如果<=0，則跳轉(zhuǎn)到首頁
*/
//2.倒計時讀秒效果實現(xiàn)
var time = document.getElementById("time");
var second = 5;
function showTime() {
second--;
if (second <= 0) {
//跳轉(zhuǎn)到首頁
location.href = "https://www.baidu.com";
}
time.innerHTML = second + "";
}
//設(shè)置定時器，1秒執(zhí)行一個該方法
setInterval(showTime,1000);
</script>
</body>
</html>
* 概念： Document Object Model 文檔對象模型
* 將標(biāo)記語言文檔的各個組成部分，封裝為對象?？梢允褂眠@些對象，對標(biāo)記語言文檔進行CRUD的動態(tài)操作
* W3C DOM 標(biāo)準(zhǔn)被分為 3 個不同的部分：
* 核心 DOM - 針對任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型
* Document：文檔對象
* Element：元素對象
* Attribute：屬性對象
* Text：文本對象
* Comment:注釋對象
* Node：節(jié)點對象，其他5個的父對象
* XML DOM - 針對 XML 文檔的標(biāo)準(zhǔn)模型
* HTML DOM - 針對 HTML 文檔的標(biāo)準(zhǔn)模型
* 核心DOM模型
* Document：文檔對象
* 創(chuàng)建(獲取)：在html dom模型中可以使用window對象來獲取
1. window.document
2. document
* 方法：
1. 獲取Element對象：
1. getElementById() ： 根據(jù)id屬性值獲取元素對象。id屬性值一般唯一
2. getElementsByTagName()：根據(jù)元素名稱獲取元素對象們。返回值是一個數(shù)組
3. getElementsByClassName():根據(jù)Class屬性值獲取元素對象們。返回值是一個數(shù)組
4. getElementsByName(): 根據(jù)name屬性值獲取元素對象們。返回值是一個數(shù)組
2. 創(chuàng)建其他DOM對象：
createAttribute(name)
createComment()
createElement()
createTextNode()
* 屬性
* Element：元素對象
* 獲取/創(chuàng)建：通過document來獲取和創(chuàng)建
* 方法：
1. removeAttribute()：刪除屬性
* 參數(shù)："需要刪除的屬性"
2. setAttribute()：設(shè)置屬性
* 參數(shù)： "需要設(shè)置的屬性","屬性值"
* Node：節(jié)點對象，其他5個的父對象
* 特點：所有dom對象都可以被認(rèn)為是一個節(jié)點
* 方法：
* CRUD dom樹：
* appendChild()：向節(jié)點的子節(jié)點列表的結(jié)尾添加新的子節(jié)點。
* removeChild()：刪除（并返回）當(dāng)前節(jié)點的指定子節(jié)點。
* replaceChild()：用新節(jié)點替換一個子節(jié)點。
* 屬性：
* parentNode 返回節(jié)點的父節(jié)點。
> 超鏈接功能：
> 1. 可以被點擊：樣式
> 2. 點擊后跳轉(zhuǎn)到href指定的url，若不想跳轉(zhuǎn)可設(shè)置為 href="javascript:void(0)";
* HTML DOM
1. 標(biāo)簽體的設(shè)置和獲?。篿nnerHTML (可以直接用+=對標(biāo)簽體內(nèi)容進行追加)
2. 使用html元素對象的屬性
3. 控制元素樣式
1. 使用元素的style屬性來設(shè)置
方法： div.style.要設(shè)置的屬性 = "修改的屬性值";
如：
//修改樣式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
2. 提前定義好類選擇器的樣式，通過元素的className屬性來設(shè)置其class屬性值。
實現(xiàn)了一個可以動態(tài)添加刪除信息的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態(tài)表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="請輸入編號">
<input type="text" id="name" placeholder="請輸入姓名">
<input type="text" id="gender" placeholder="請輸入性別">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<caption>學(xué)生信息表</caption>
<tr>
<th>編號</th>
<th>姓名</th>
<th>性別</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐沖</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="delTr(this);">刪除</a></td>
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="delTr(this);">刪除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0)" onclick="delTr(this);">刪除</a></td>
</tr>
</table>
<script>
/*
分析：
1.添加：
1.1 給添加按鈕綁定單擊事件
1.2 獲取文本框內(nèi)容
1.3 創(chuàng)建td，設(shè)置td的文本為文本框的內(nèi)容
1.4 創(chuàng)建tr
1.5 將td添加到tr中
1.6 獲取table，將tr添加到table中
2.刪除：
2.1 確定點擊的是哪一個超鏈接
2.2 怎么刪除？
removeChild():通過父節(jié)點刪除子節(jié)點
*/
//1.獲取按鈕
/*
document.getElementById("btn_add").onclick = function () {
//2.獲取文本框內(nèi)容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//3.創(chuàng)建td，賦值tf的標(biāo)簽體
//id的td
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
//name的td
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
//gender的td
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
//a標(biāo)簽的td
var td_a = document.createElement("td");
var ele_a = document.createElement("a");
ele_a.setAttribute("href","javascript:void(0);");
ele_a.setAttribute("onclick","delTr(this);")
var text_a = document.createTextNode("刪除");
ele_a.appendChild(text_a);
td_a.appendChild(ele_a);
//4.創(chuàng)建tr
var tr = document.createElement("tr");
//5.添加td到tr中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//6.獲取table
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
*/
//使用innerHTML添加
document.getElementById("btn_add").onclick = function () {
//獲取文本框內(nèi)容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//獲取table
var table = document.getElementsByTagName("table")[0];
//追加一行
table.innerHTML += "<tr>\n" +
" <td>"+id+"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+gender+"</td>\n" +
" <td><a href=\"javascript:void(0)\" onclick=\"delTr(this);\">刪除</a></td>\n" +
" </tr>";
}
//刪除方法
function delTr(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
* 概念：某些組件被執(zhí)行了某些操作后，觸發(fā)某些代碼的執(zhí)行。
* 事件：某些操作。如：單擊，雙擊，鍵盤按下了，鼠標(biāo)移動了
* 事件源：組件。如：按鈕 文本輸入框...
* 監(jiān)聽器：代碼。
* 注冊監(jiān)聽：將事件，事件源，監(jiān)聽器結(jié)合在一起。當(dāng)事件源上發(fā)生了某個事件，則觸發(fā)執(zhí)行某個監(jiān)聽器代碼。
* 常見的事件：
1. 點擊事件：
(1) onclick 單擊事件
(2) ondblclick 雙擊事件
2. 焦點事件
(1) onblur 失去焦點
* 一般用于表單校驗
(2) onfocus 元素獲得焦點
3. 加載事件：
(1) onload：一張頁面或一幅圖像完成加載
4. 鼠標(biāo)事件：
(1) onmousedown 鼠標(biāo)按鈕被按下
* 定義方法時，定義一個形參，接受event對象。
* event對象的button屬性可以獲取鼠標(biāo)按鈕鍵被點擊了，左鍵0，滾輪1，右鍵2。
(2) onmouseup 鼠標(biāo)按鍵被松開
(3) onmousemove 鼠標(biāo)被移動
(4) onmouseover 鼠標(biāo)移到某元素之上
(5) onmouseout 鼠標(biāo)從某元素移開
5. 鍵盤事件：
(1) onkeydown 某個鍵盤按鍵被按下
(2) onkeyup 某個鍵盤按鍵被松開
(3) onkeypress 某個鍵盤按鍵被按下并松開
6. 選擇和改變
(1) onchange 域的內(nèi)容被改變
(2) onselect 文本被選中
7. 表單事件：
(1) onsubmit 確認(rèn)按鈕被點擊
* 可以阻止表單的提交
* 方法返回false則表單被阻止提交
(2) onreset 重置按鈕被點擊
* 除了使用onsubmit方法確認(rèn)表單是否提交
* 還可以在提交按鈕綁定函數(shù) onclick="return checkForm();" 需要return checkForm函數(shù)的結(jié)果。
實現(xiàn)為學(xué)生信息表添加表單全選，全部選，反選按鈕功能，以及鼠標(biāo)經(jīng)過的顏色改變。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格全選</title>
<style>
table{
border: 1px solid;
width: 500px;
margin-left: 30%;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
margin-top: 10px;
margin-left: 30%;
}
.out{
background-color: white;
}
.over{
background-color: pink;
}
</style>
<script>
/*
分析：
1.全選：
* 獲取所有的checkbox
* 遍歷checkbox，設(shè)置每一個checkbox的狀態(tài)為選中 checked=true
*/
//1.在頁面加載完后綁定事件
window.onload = function () {
//2.給全選按鈕綁定單擊事件
document.getElementById("SelectAll").onclick = function () {
//全選
//1.獲取所有的checkbox
var cbs = document.getElementsByName("cb");
//2.遍歷
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = true;
}
}
document.getElementById("unSelectAll").onclick = function () {
//全不選
//1.獲取所有的checkbox
var cbs = document.getElementsByName("cb");
//2.遍歷
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
}
document.getElementById("SelectRev").onclick = function () {
//反選
//1.獲取所有的checkbox
var cbs = document.getElementsByName("cb");
//2.遍歷
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = ! cbs[i].checked;
}
}
document.getElementById("firstcb").onclick = function () {
//第一個cb點擊
//1.獲取所有的checkbox
var cbs = document.getElementsByName("cb");
//2.遍歷
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = this.checked;
}
}
//給所有tr綁定鼠標(biāo)移到元素之上和移出元素之上事件
var trs = document.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++){
//移到元素之上
trs[i].onmouseover = function () {
this.className = "over";
}
//移出元素
trs[i].onmouseout = function () {
this.className = "out";
}
}
}
</script>
</head>
<body>
<table>
<caption>學(xué)生信息表</caption>
<tr>
<th><input type="checkbox" name="cb" id="firstcb"></th>
<th>編號</th>
<th>姓名</th>
<th>性別</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>1</td>
<td>令狐沖</td>
<td>男</td>
<td><a href="javascript:void(0);">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);">刪除</a></td>
</tr>
</table>
<div>
<input type="button" id="SelectAll" value="全選">
<input type="button" id="unSelectAll" value="全不選">
<input type="button" id="SelectRev" value="反選">
</div>
</body>
</html>
將在html&css部分實現(xiàn)的注冊頁面添加了用戶名和密碼的格式校驗功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注冊頁面</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("img/register_bg.png") no-repeat center;
padding-top: 25px;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*讓div水平居中*/
margin: auto;
}
.rg_left{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child{
color:#FFD026;
font-size: 20px;
}
.rg_left > p:last-child{
color:#A6A6A6;
font-size: 20px;
}
.rg_center{
float: left;
/* border: 1px solid red;*/
}
.rg_right{
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child{
font-size: 15px;
}
.rg_right p a {
color:pink;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px ;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6 ;
/*設(shè)置邊框圓角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode{
width: 110px;
}
#img_check{
height: 32px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026 ;
}
.error{
color: red;
}
#td_sub{
padding-left: 150px;
}
</style>
<script>
/*
分析：
1.給表單綁定onsubmit事件。監(jiān)聽器中判斷每一個方法校驗的結(jié)果。
如果都為true，則監(jiān)聽器方法返回true
如果有一個為false，則監(jiān)聽器方法返回false
2.定義一些方法分別校驗各個表單項。
3.給各個表單項綁定onblur事件
*/
window.onload = function () {
//給表單綁定onsubmit事件
document.getElementById("form").onsubmit = function () {
//調(diào)用用戶校驗方法 checkUsername();
//調(diào)用密碼校驗方法 checkPassword();
return checkUsername() && checkPassword();
}
//給用戶名和密碼框分別綁定離焦事件
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
}
//校驗用戶名
function checkUsername() {
var username = document.getElementById("username").value;
var reg_username = /^\w{6,12}$/;
var flag = reg_username.test(username);
var s_username = document.getElementById("s_username");
if (flag) {
s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'>";
} else {
s_username.innerHTML = "用戶名格式錯誤！"
}
return flag;
}
//校驗密碼
function checkPassword() {
var password = document.getElementById("password").value;
var reg_password = /^\w{6,12}$/;
var flag = reg_password.test(password);
var s_password = document.getElementById("s_password");
if (flag) {
s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'>";
} else {
s_password.innerHTML = "密碼格式錯誤！"
}
return flag;
}
</script>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用戶注冊</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!--定義表單 form-->
<form action="#" method="post">
<table>
<tr>
<td class="td_left"><label for="username">用戶名</label></td>
<td class="td_right">
<input type="text" name="username" id="username" placeholder="請輸入用戶名">
<span id="s_username" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="password">密碼</label></td>
<td class="td_right">
<input type="password" name="password" id="password" placeholder="請輸入密碼">
<span id="s_password" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="請輸入郵箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="請輸入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手機號</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="請輸入手機號"></td>
</tr>
<tr>
<td class="td_left"><label>性別</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="請輸入出生日期"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode" >驗證碼</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="請輸入驗證碼">
<img id="img_check" src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注冊"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有賬號?<a href="#">立即登錄</a></p>
</div>
</div>
</body>
</html>