day29_BOM_DOM
復習
1. js基礎語法
運算符：
算數運算符可以與字符串進行數學運算鲸伴，js底層進行隱式轉換
比較運算符：===（恒等） 特點跟匆，比較類型+內容
流程控制語句
if判斷
條件表達式：
1）布爾
2）數值：非0為真
3）字符串：非空串為真
4）變量：null 或 undefined 都為假
for循環(huán)
普通for循環(huán)
增強for循環(huán)
索引for循環(huán)
2. js函數（方法）
在js中方法沒有重載余佛，重名的會被覆蓋
3. js事件（重點）
js通過事件監(jiān)聽用戶的行為濒旦，結合函數實現頁面交互
常用事件
單擊 onclick
獲得焦點 onfocus
失去焦點 onblur
改變 onchange
頁面加載 window.onload
事件綁定
普通函數
匿名函數
4. js常用內置對象
string
array：有點像java的list集合
date
math
全局函數
今日內容
BOM
DOM（與xml的dom4j思想完全一樣）可以實現對節(jié)點的增刪改查
正則表達式：對字符的過濾校驗
綜合案例
BOM對象
BOM簡介
BOM(browser Object Model)瀏覽器對象模型
JS把瀏覽器抽象成為一個window對象,運行我們使用js來模擬瀏覽器的行為.
Window對象
三種彈框方式
-
警告框: 提示信息
alert();
-
輸入框: 確認信息
confirm("您確定要刪除么?"); 點擊確定返回值為 true, 點擊取消 返回值為false
-
輸入框: 輸入信息
prompt(); 可以在彈出框里輸入信息, 點擊確定 返回值為輸入的信息, 否則為null值
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS三個彈框</title>
</head>
<body>
<!--
JS三個彈框
查詢手冊完成
1. 警告用戶網站內容可能不安全
2. 讓用戶確認是否刪除所有數據
3. 提示用戶輸入銀行卡密碼
-->
<script >
// 1. 警告用戶網站內容可能不安全
alert("您瀏覽器的內容可能不安全!");
// 2. 讓用戶確認是否刪除所有數據
let boo = confirm("您確定要刪除所有數據嗎?");
console.log(boo);//確定 true 取消 false
// 3. 提示用戶輸入銀行卡密碼
let str = prompt("請輸入密碼",123);
console.log(str);//確定 用戶輸入的內容 取消 null
</script>
</body>
</html>
兩種定時器方式
-
一次性定時器
setTimeout(函數, 毫秒數)
-
循環(huán)性定時器
setInterval(函數, 毫秒數)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS兩個定時器</title>
</head>
<body>
<!--
JS兩個定時器
1. 定時5秒之后在控制臺打印當前時間
setTimeout(函數,毫秒數) 創(chuàng)建一個定時器對象,定時`毫秒數`之后,調用一次`函數`
2. 點擊按鈕取消打印時間
clearTimeout(定時器) 銷毀定時器
3. 每隔2秒在控制臺打印遞增自然數
setInterval(函數,毫秒數) 創(chuàng)建一個定時器對象,間隔`毫秒數`調用`函數`,直到永遠
4. 點擊按鈕取消打印自然數
clearInterval(定時器) 銷毀定時器
總結:
1. setTimeout執(zhí)行一次 setInterval執(zhí)行無數次
2. setTimeout銷毀使用clearTimeout setInterval銷毀使用clearInterval
-->
<button onclick="myclearTimeout()">取消打印時間</button>
<button onclick="myclearInterval()">取消打印自然數</button>
<script >
// 1. 定時5秒之后在控制臺打印當前時間
function myf1(){
console.log("當前時間");
}
let timeout = setTimeout(myf1,5000);//創(chuàng)建一個定時器對象,5秒后調用一次myf1
// 2. 點擊按鈕取消打印時間
function myclearTimeout(){
clearTimeout(timeout);//銷毀定時器
}
// 3. 每隔2秒在控制臺打印遞增自然數
let k =1;
function myf2(){
console.log(k++);
}
let interval = setInterval(myf2,2000);//創(chuàng)建一個定時器對象,每隔2秒調用一次myf2,直
到永遠
// 4. 點擊按鈕取消打印自然數
function myclearInterval(){
clearInterval(interval);//銷毀定時器
}
</script>
</body>
</html>
location地址
-
獲取當前窗口地址
location.href
-
刷新當前頁面
location.reload();
-
跳轉到指定地址的頁面
location.href = "地址";
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>location地址</title>
</head>
<body>
<!--
location地址
1. 獲取當前瀏覽器地址
location.href
2. 刷新當前頁面
location.reload();
3. 跳轉頁面
location.href = "地址" ;
-->
<button onclick="addr()">獲取當前瀏覽器地址</button>
<button onclick="refresh()">刷新當前頁面</button>
<button onclick="jump()"> 跳轉頁面(必用)</button>
<script >
// 1. 獲取當前瀏覽器地址
function addr(){
console.log(location.href);//獲取當前瀏覽器地址
}
// 2. 刷新當前頁面
function refresh(){
location.reload();//刷新當前頁面
}
// 3. 跳轉頁面(必用)
function jump(){
location.;//跳轉頁面(必用)
}
</script>
</body>
</html>
DOM對象
DOM簡介
DOM(Document Object Model) 頁面文檔對象模型
JS把頁面抽象成為一個對象,允許我們使用js來操作頁面
DOM獲取元素
-
第一種 : es6之前獲取方式
-
獲取一個
document.getElementById(id屬性值)
-
獲取多個
document.getElementsByTagName(標簽名) 根據標簽名獲取, 返回數組對象
document.getElementsByClassName(標簽名) 根據class屬性獲取, 返回數組對象
document.getElementsByName(標簽名) 根據name屬性獲取, 返回數組對象
-
-
第二種: es6可根據CSS選擇器獲取
-
獲取一個
document.querySelector(id選擇器)
-
獲取多個
document.querySelectorAll(css選擇器)
-
es6之前的方式可以通過鏈式編程, 直接綁定 idea中會有提示, 而使用es6之后的方式, idea通過鏈式編程綁定事件是沒有提示的
DOM操作內容
-
獲取或者修改元素(標簽)的純文本內容
element.innerText;
-
獲取或者修改元素的html超文本內容
element.innerHTML;
-
獲取或者修改包含自身的html內容
element.outerHTML;
純文本是指獲取到的是只有文字, html超文本指獲取到的包含html語法的內容
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>dom操作內容</title>
</head>
<body>
<!--
dom操作內容
1. element.innerText; 獲取或者修改元素的純文本內容
2. element.innerHTML; 獲取或者修改元素的html內容
3. element.outerHTML; 獲取或者修改包含自身的html內容
總結:
1. innerText 獲取的是純文本 innerHTML獲取的是所有html內容
2. innerText 設置到頁面中的是純文本 innerHTML設置到頁面中的html會展示出外觀效果
3. innerHTML不包含自身 outerHTML包含自身的html內容
-->
<div id="d1">我是d1<br/></div>
<div id="d2">我是d2</div>
<div id="d3">我是d3</div>
<script>
// 1. 向body中追加html內容
document.write("<h1>大寶劍</h1>");//向body中追加html內容
// 2. 獲取元素的純文本,html內容對比
let d1 = document.querySelector("#d1");//獲取d1標簽對象
console.log(d1.innerText);//我是d1
console.log(d1.innerHTML);//我是d1<br/>
// 3. 修改元素的純文本,html內容對比
let d2 = document.querySelector("#d2");//獲取d1標簽對象
d2.innerText = "<h2>小寶劍</h2>";//修改d1的純文本內容
d2.innerHTML = "<h2>小寶劍</h2>";//修改d1的html內容
// 4. 獲取或修改包含元素自身的html內容(了解)
let d3 = document.querySelector("#d3");//獲取d1標簽對象
d3.outerHTML = "<h3>小寶劍</h3>";//修改d1的html內容
</script>
</body>
</html>
DOM操作屬性
- 獲取文本框的值,單選框或復選框的選中狀態(tài)
語法: element.properties 獲取或者修改元素對象的原生屬性
- 給元素設置自定義屬性
語法: element.setAttribute(屬性名,屬性值) 給元素設置一個屬性值,可以設置原生和自定義
- 獲取元素的自定義屬性值
語法: element.getAttribute(屬性名) 獲取元素的一個屬性值,可以獲取原生和自定義 - 移除元素的自定義屬性
語法: element.removeAttribute(屬性名)
DOM操作樣式
-
設置css樣式
js對象.style.樣式名 = "樣式值"
(樣式名是駝峰式命名,如 css格式為 font-size js格式 fontSize)
-
批量設置css樣式(不推薦)
-
語法
js對象.style.cssText = "css樣式字符串"
-
特點
沒有提示, 耦合性高
-
-
通過class設置樣式(解耦性強)
-
語法
js對象.className="class選擇器的名"
相當于是在css中把樣式寫好, 然后把這個樣式的class名字綁定給需要樣式的標簽, 即把名字給他
-
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>dom操作樣式</title>
</head>
<body>
<!--
dom操作樣式
1. 設置一個css樣式
語法: element.style.駝峰格式樣式屬性名 獲取或者修改一個css樣式
2. 批量設置css樣式
語法: element.style.cssText 獲取后者修改 標簽的style屬性的文本值
3. 通過class設置樣式
語法: element.className 獲取或者修改標簽的class屬性的文本值
4. 切換class樣式
語法: element.classList es6特別提供的操作元素class的接口
element.classList常用方法有四個:
add() 添加一個class樣式
remove() 移除一個class樣式
contains() 判斷是否包含某一個樣式
toggle() 切換一個class樣式 有則刪除,無則添加
-->
<style>
#p1{ background-color: red;}
.mp{color:green}
.mpp{background-color: lightgray;}
</style>
<p id="p1">1. 設置一個css樣式</p>
<p id="p2" >2. 批量設置css樣式</p>
<p id="p3" class="mpp">3. 通過class設置樣式</p>
<p id="p4">4. 切換class樣式</p>
<script >
let p1 = document.querySelector("#p1");//獲取段落標簽
let p2 = document.querySelector("#p2");//獲取段落標簽
let p3 = document.querySelector("#p3");//獲取段落標簽
let p4 = document.querySelector("#p4");//獲取段落標簽
// 1. 設置一個css樣式
p1.style.color = "white";//白色字體
p1.style.backgroundColor = "black";//黑色背景
console.log(p1.style.backgroundColor);//獲取一個樣式名
p1.style.display = "none";//隱藏不顯示
p1.style.display = "block";//顯示
// 2. 批量設置css樣式
p2.style.cssText = "border:1px solid gold;color:green;font-family:'楷體';";//
批量修改樣式
// 3. 通過class設置樣式
console.log(p3.className);//mpp
p3.className =p3.className+ " mp";//修改class的文本值
// 4. 切換class樣式
let classList = p4.classList;//p4的class樣式集合
classList.add("mpp");//添加一個class樣式
console.log(classList.contains("mp"));//false
classList.add("mp");//添加一個class樣式
classList.remove("mp");//移除一個class樣式
classList.toggle("mp");//切換,無則添加
classList.toggle("mp");//切換,有則刪除
</script>
</body>
</html>
DOM操作元素
-
創(chuàng)建一個標簽對象
document.createElement("標簽名")
-
給父標簽添加一個子標簽
父標簽對象.appendChild("子標簽對象名")
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>dom操作元素</title>
</head>
<body>
<!--
dom操作元素
1. 后面添加喝酒(掌握)
innerHTML 獲取或者設置標簽的html內容
2. 后面添加燙頭(了解)
document.createElement(標簽名稱) 創(chuàng)建一個標簽對象
parentNode.appendChild(newNode) 給父標簽添加一個子標簽
3.移除元素(了解)
outerHTML
-->
<div id="container">
<input id="smoke" type="checkbox" name="hobby" value="抽煙">
<label for="smoke">抽煙 </label>
<!-- <input id="drink" type="checkbox" name="hobby" value="喝酒">-->
<!-- <label for="drink">喝酒 </label>-->
<!-- <input id="perm" type="checkbox" name="hobby" value="燙頭">-->
<!-- <label for="perm">燙頭 </label>-->
</div>
<script >
let container = document.querySelector("#container");//獲取div標簽對象
//1. 后面添加喝酒(掌握) innerHTML
container.innerHTML += '<input id="drink" type="checkbox" name="hobby"
value="喝酒">' +
'<label for="drink">喝酒 </label>';//添加喝酒復選框
//2. 后面添加燙頭(了解)
let input = document.createElement("input");//創(chuàng)建一個input標簽
// console.log(input);//<input/>
input.id = "perm";//添加一個id屬性
input.type="checkbox";//添加一個type屬性
input.name = "hobby";//添加一個name屬性
input.value = "燙頭";//添加一個value屬性
console.log(input);//<input id="perm" type="checkbox" name="hobby" value="燙
頭">
container.appendChild(input);//向container中追加input元素
let label = document.createElement("label");//創(chuàng)建一個label標簽對象
// console.log(label);//<label></label>
label.setAttribute("for","perm");//添加一個for屬性
label.innerHTML = "燙頭 ";//添加html內容
console.log(label);//<label for="perm">燙頭 </label>
container.appendChild(label);//向container中追加label標簽對象
//3.移除元素(了解) outerHTML
// container.outerHTML = "";//刪除包含自身的所有html內容
</script>
</body>
</html>
正則表達式
在js中使用正則表達式
-
創(chuàng)建方式
- let regExp = new RegExp("正則表達式");
- let regExp ="/正則表達式/";
-
驗證方法
-
正則對象.test(字符串)
符合正則規(guī)則就返回true, 否則false
-
字符串對象.match(正則對象)
返回字符串中符合正則規(guī)則的內容
-
-
正則修飾符
i 忽視大小寫
g 全局匹配
m 多行匹配
-
在線正則表達式網站
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>正則表達式</title>
</head>
<body>
<!--
正則表達式
1. 理解正則表達式語法
語法:
1. /pattern/attributes (推薦使用)
2. new RegExp(pattern, attributes); (不推薦)正則表達式中的特殊符號需要轉義
pattern 正則表達式
attributes 正則表達式修飾符
i 不區(qū)分大小寫 ,匹配字符串時不區(qū)分大小寫
g 全局匹配 ,匹配到一個之后不停止,匹配字符串的所有內容
m 多行匹配 ,匹配字符串的所有行的內容
常用正則表達式對象的方法
test() 語法 RegExpObject.test(string)
如果字符串 string 中含有與 RegExpObject 匹配的文本害淤，則返回 true平窘，否則返回
false炉旷。
2. 會使用如下正則表達式匹配字符串
驗證郵編
/\d{6}/
校驗是否全由8位數字組成
/^[0-9]{8}$/
中文名稱
/^[\u4E00-\u9FA5]{2,4}$/
是否帶有小數
/^\d+\.\d+$/
驗證身份證號
/\d{17}[\d|X]|\d{15}/
校驗電話碼格式
/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/
驗證網址
/http(s)?:[//]{2}([\w-]+\.)+[\w-]+([/]{1}[\w- ./?%&=]*)?/
驗證EMail
/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
-->
<script >
//1. 理解正則表達式語法
let reg1 = new RegExp("\\d{3}");//需要轉義符,不推薦使用.創(chuàng)建一個正則表達式對象,匹配
有三個數字
console.log(reg1.test("abc"));//false
console.log(reg1.test("123"));//true
let reg2 = /\d{3}/;//不需要轉義符,推薦使用.創(chuàng)建一個正則表達式對象,匹配有三個數字
console.log(reg2.test("abc"));//false
console.log(reg2.test("123"));//true
//正則表達式修飾符(了解)
let regi = /[amn]/i;//不區(qū)分大小寫匹配amn
let resi = "ABC".match(regi);//從"ABC"中匹配regi模式字符串
console.log(resi);
let regg = /\d/g;//全局查找數字
let resg = "1 plus 2 equals 3".match(regg);
console.log(resg);
let regm = /^\d/m;//多行匹配開頭的數字
let resm = "abc1 plus 2 equals 3\n6abcmnk".match(regm);
console.log(resm);
//2. 會使用如下正則表達式匹配字符串
let email = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;//創(chuàng)建一個正則表達式
對象,匹配郵箱格式
console.log(email.test("123abc"));//false
console.log(email.test("123abc@qq.com"));//true
let phone = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;//創(chuàng)建一個正則表達式,匹配電
話號碼
console.log(phone.test("123456"));//false
console.log(phone.test("18312312312"));//true
</script>
</body>
</html>
重點案例
-表單校驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>案例-表單校驗</title>
<style type="text/css">
.regist_bg {
width: 100%;
height: 600px;
padding-top: 40px;
background-image: url(../img/bg.jpg);
}
.regist {
border: 7px inset #ccc;
width: 700px;
padding: 40px 0;
padding-left: 80px;
background-color: #fff;
margin-left: 25%;
border-radius: 10px;
}
input[type="submit"] {
background-color: aliceblue;
width: 100px;
height: 35px;
color: red;
cursor: pointer;
border-radius: 5px;
}
.warn{
color:red;
font-size: 12px;
display: none;
}
</style>
<!--
表單校驗
1. 兩次密碼輸入一致
2. 郵箱格式正確
3. 手機號格式正確
4. 提交表單時校驗表單項是否合法.
總結:
form表單的 onsubmit 事件 表單提交之前觸發(fā),用法實例:
onsubmit="return 函數()" 函數返回true則表單正常提交,函數返回false則阻止表單提交
-->
</head>
<body>
<div class="regist_bg">
<div class="regist">
<form action="#" onsubmit="return judge()">
<table width="700px" height="350px">
<tr>
<td colspan="3">
<font color="#3164af">會員注冊</font> USER
REGISTER
</td>
</tr>
<tr>
<td align="right">用戶名</td>
<td colspan="2"><input id="loginnameId" type="text"
name="loginname" size="50" /><span id="loginnamewarn" class="warn">用戶名不能為
空</span> </td>
</tr>
<tr>
<td align="right">密碼</td>
<td colspan="2"><input id="loginpwdId"
type="password" name="loginpwd" size="50" /> </td>
</tr>
<tr>
<td align="right">確認密碼</td>
<td colspan="2"><input id="reloginpwdId"
type="password" name="reloginpwd" size="50" /><span id="pwdwarn" class="warn">密
碼不一致</span> </td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input id="emailId" type="text"
name="email" size="50" /> <span id="emailwarn" class="warn">郵箱格式有誤</span>
</td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" name="username"
size="50" /> </td>
</tr>
<tr>
<td align="right">性別</td>
<td colspan="2">
<input type="radio" name="gender" value="男"
checked="checked" />男
<input type="radio" name="gender" value="女" />女
</td>
</tr>
<tr>
<td align="right">電話號碼</td>
<td colspan="2"><input id="phone" type="text"
name="phone" size="50" /> <span id="phonewarn" class="warn">手機格式有誤</span>
</td>
</tr>
<tr>
<td align="right">所在地</td>
<td colspan="3">
<select id="provinceId"
onchange="selectCity(this.value)" style="width:150px">
<option value="">----請-選-擇-省----</option>
<option value="0">北京</option>
<option value="1">遼寧省</option>
<option value="2">江蘇省</option>
</select>
<select id="cityId" style="width:150px">
<option>----請-選-擇-市----</option>
</select>
</td>
</tr>
<tr>
<td width="80" align="right">驗證碼</td>
<td width="100"><input type="text" name="verifyCode"
/> </td>
<td><img src="../img/checkMa.png" /> </td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input id="rebtn" type="submit" value="注冊" />
</td>
</tr>
</table>
</form>
</div>
</div>
<script >
let loginpwdId = document.querySelector("#loginpwdId");//獲取密碼框
let reloginpwdId = document.querySelector("#reloginpwdId");//獲取確認密碼框
let pwdwarn = document.querySelector("#pwdwarn");//密碼警告信息
let emailId = document.querySelector("#emailId");//郵件輸入框
let emailwarn = document.querySelector("#emailwarn");//郵件警告信息
// 1. 兩次密碼輸入一致
function pwd(){//校驗確認密碼
let boo = loginpwdId.value == reloginpwdId.value;//判斷密碼是否一致
if(boo){//合法,隱藏警告
pwdwarn.style.display = "none";//隱藏
}else{//不合法,顯示警告
pwdwarn.style.display = "inline";//顯示
}
return boo;//返回密碼是否合法
}
reloginpwdId.onchange = pwd;//當確認密碼值改變時調用pwd方法執(zhí)行
// 2. 郵箱格式正確
function mail(){//校驗郵件格式
let email = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;//創(chuàng)建一個正則
表達式對象,匹配郵箱格式
let boo = email.test(emailId.value);//校驗郵件格式
if(boo){//合法,隱藏警告
emailwarn.style.display = "none";//隱藏
}else{//不合法,顯示警告
emailwarn.style.display = "inline";//顯示
}
return boo;//返回郵件是否合法
}
emailId.onchange = mail;//當郵件輸入框的值改變時調用mail方法執(zhí)行
// 3. 手機號格式正確
let phone = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;//創(chuàng)建一個正則表達式,匹配電
話號碼
//4. 提交表單時校驗表單項是否合法.
function judge(){//表單提交校驗
return pwd() && mail();//所有表單項都合法才返回true
}
</script>
</body>
</html>
-商品全選
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>案例-商品全選</title>
</head>
<body>
<!--
商品全選
1. 全選 點擊全選按鈕,所有復選框都被選中
2. 反選 點擊反選按鈕,所有復選框狀態(tài)取反
-->
<button id="btn1">1. 全選</button>
<button id="btn2">2. 反選</button>
<br/>
<input type="checkbox">電腦<input type="checkbox">手機<input type="checkbox">汽車
<input type="checkbox">別墅<input type="checkbox" checked="checked">筆記本
<script >
let btn1 = document.querySelector("#btn1");//全選
let btn2 = document.querySelector("#btn2");//反選
let boxes = document.querySelectorAll('input[type="checkbox"]');//獲取所以復選
框
btn1.onclick = function(){//全選
for(let b of boxes){
b.checked = true;//全選
}
}
btn2.onclick = function(){//反選
for(let b of boxes){
b.checked = !b.checked;//反選
}
}
</script>
</body>
</html>
-省市級聯
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>案例-省市級聯</title>
<style type="text/css">
.regist_bg {
width: 100%;
height: 600px;
padding-top: 40px;
background-image: url(../img/bg.jpg);
}
.regist {
border: 7px inset #ccc;
width: 600px;
padding: 40px 0;
padding-left: 80px;
background-color: #fff;
margin-left: 25%;
border-radius: 10px;
}
input[type="submit"] {
background-color: aliceblue;
width: 100px;
height: 35px;
color: red;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="regist_bg">
<div class="regist">
<form action="#">
<table width="600" height="350px">
<tr>
<td colspan="3">
<font color="#3164af">會員注冊</font> USER
REGISTER
</td>
</tr>
<tr>
<td align="right">用戶名</td>
<td colspan="2"><input id="loginnameId" type="text"
name="loginname" size="60" /> </td>
</tr>
<tr>
<td align="right">密碼</td>
<td colspan="2"><input id="loginpwdId"
type="password" name="loginpwd" size="60" /> </td>
</tr>
<tr>
<td align="right">確認密碼</td>
<td colspan="2"><input id="reloginpwdId"
type="password" name="reloginpwd" size="60" /> </td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input id="emailId" type="text"
name="email" size="60" /> </td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" name="username"
size="60" /> </td>
</tr>
<tr>
<td align="right">性別</td>
<td colspan="2">
<input type="radio" name="gender" value="男"
checked="checked" />男
<input type="radio" name="gender" value="女" />女
</td>
</tr>
<tr>
<td align="right">電話號碼</td>
<td colspan="2"><input type="text" name="phone"
size="60" /> </td>
</tr>
<tr>
<td align="right">所在地</td>
<td colspan="3">
<select id="provinceId" style="width:150px">
<option value="">----請-選-擇-省----</option>
</select>
<select id="cityId" style="width:150px">
<option value="">----請-選-擇-市----</option>
</select>
</td>
</tr>
<tr>
<td width="80" align="right">驗證碼</td>
<td width="100"><input type="text" name="verifyCode"
/> </td>
<td><img src="../img/checkMa.png" /> </td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="submit" value="注冊" />
</td>
</tr>
</table>
</form>
</div>
</div>
<!--
省市級聯
1. 頁面加載完成后自動裝載省數據
2. 當選中省時,裝載該省的市數據
-->
<script type="text/javascript">
//準備省市數據
let provinceData = ["北京","河北","遼寧"];
//準備省對應的市數據
let cityData = {
"北京":["順義區(qū)","昌平區(qū)","朝陽區(qū)"],
"河北":["保定","石家莊","廊坊"],
"遼寧":["沈陽","鐵嶺","撫順"]
};
let provinceId = document.querySelector("#provinceId");//獲取省下拉列
表
let cityId = document.querySelector("#cityId");//獲取市下拉列表
//頁面加載完成時填充省選項
window.onload = function(){//頁面加載完成時
for(let p of provinceData){//迭代省選項
provinceId.innerHTML += "<option value='"+p+"'>"+p+"
</option>";//追加省選項
}
}
//當省選項值改變時
provinceId.onchange = function(){//省選項值改變時
//每天填充市數據時先初始化一次
cityId.innerHTML = '<option value="">----請-選-擇-市----
</option>';
console.log(this.value);//選中的省
let citys = cityData[this.value];//當前省對應的市數據
//把市數據填充到市選項中
for(let c of citys){
cityId.innerHTML += "<option value='"+c+"'>"+c+"
</option>";//追加市選項
}
}
</script>
</body>
</html>
-隔行變色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>案例-隔行變色</title>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr >
<th width="100px"><input type="checkbox" >全/<input
type="checkbox" >反選</th>
<th>分類ID</th>
<th>分類名稱</th>
<th>分類描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>1</td>
<td>手機數碼</td>
<td>手機數碼類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>2</td>
<td>電腦辦公</td>
<td>電腦辦公類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>家居飾品</td>
<td>家居飾品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>5</td>
<td>牛奶制品</td>
<td>牛奶制品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>6</td>
<td>大豆制品</td>
<td>大豆制品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>7</td>
<td>海參制品</td>
<td>海參制品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>8</td>
<td>羊絨制品</td>
<td>羊絨制品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>9</td>
<td>海洋產品</td>
<td>海洋產品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>10</td>
<td>奢侈用品</td>
<td>奢侈用品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>家居飾品</td>
<td>家居飾品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>家居飾品</td>
<td>家居飾品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>家居飾品</td>
<td>家居飾品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>10</td>
<td>奢侈用品</td>
<td>奢侈用品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>家居飾品</td>
<td>家居飾品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>家居飾品</td>
<td>家居飾品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>家居飾品</td>
<td>家居飾品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
</table>
<!--
隔行變色
1. 表格奇偶行顏色不同
2. 鼠標移入顏色高亮
-->
<script >
let trs = document.querySelectorAll("table tr");//獲取所有的行
for(let i=0;i<trs.length;i++){
if(i%2 == 0){//索引是偶數行
trs[i].style.backgroundColor ="#efefef";//淺灰色
}else{//索引是奇數行
trs[i].style.backgroundColor ="#ccc";//灰色
}
let oldColor = trs[i].style.backgroundColor;//原來的顏色
trs[i].onmouseover = function(){//鼠標移入的時候
this.style.backgroundColor = "pink";//粉色
}
trs[i].onmouseout = function(){//鼠標移出的時候
this.style.backgroundColor = oldColor;//回復原色
}
}
</script>
</body>
</html>
老師下午總結
1. BOM對象
彈窗
警告提示框：
alert("數據加載失敗!");
確認取消框：
let flag = confirm("您確定要刪除所有數據嗎?");
console.log(flag);//確定返回true， 取消返回false
提示輸入框：
let pwd = prompt("請輸入密碼");
console.log(pwd);//確定時地熄，返回用戶輸入的內容华临；取消時返回null
定時器
設置定時器：
setInterval(函數,毫秒數);
每間隔給定的毫秒值就會執(zhí)行一次函數。
setTimeout(函數,毫秒數)
到達指定的毫秒數后執(zhí)行一次函數功能端考。
清除定時器：
clearInterval(定時器編號)
clearTimeout(定時器編號)
每一個定時器調用后都會返回一個唯一的編號雅潭，根據定時器編號可以清除對應的定時器。
兩個定時器區(qū)別：
setInterval ： 每間隔一段毫秒值就會執(zhí)行一次却特，不清除會一直執(zhí)行扶供。
setTimeout ： 到達到達指定的毫秒數之后，觸發(fā)一次定時器的執(zhí)行裂明，只會執(zhí)行一次椿浓。
location
1. 獲取當前瀏覽器地址
location.href
2. 修改瀏覽器地址
location.href = "url地址" ;
3. 刷新當前頁面
location.reload();
html css
js vuejs nodejs
2. DOM對象
操作元素
獲取元素對象：
1.根據id獲取標簽元素: 唯一的元素
document.getElementById("ID")
document.querySelector("#ID")
2.根據class獲取多個元素
document.getElementsByClassName("class屬性值")
document.querySelectorAll(".class屬性值")
3.根據標簽名稱獲取多個元素
document.getElementsByTagName("標簽")
document.querySelectorAll("標簽")
4. 根據name屬性獲取多個元素
document.getElementsByName('name屬性值')
document.querySelectorAll([name=name值])
5. 獲取當前元素的父標簽
element.parentElement //element表示當前標簽對象
操作元素對象：
1. 創(chuàng)建一個標簽對象
document.createElement("標簽名稱");
2. 添加一個子標簽
element.appendChild(子標簽對象); //element表示當前標簽對象
3. 移除元素
element.outerHTML = "" //element表示要移除的標簽對象
操作內容
element.innerText; 獲取或者修改元素的純文本內容
element.innerHTML; 獲取或者修改元素的html內容
element.outerHTML; 獲取或者修改包含自身的html內容
操作屬性
1. 獲取或者修改元素對象的屬性
element.屬性名
2. 給元素設置屬性（可以設置原生和自定）
element.setAttribute(屬性名,屬性值)
3. 獲取元素屬性值
element.getAttribute(屬性名)
4. 移除元素的自定義屬性
element.removeAttribute(屬性名)
操作樣式
1. 獲取或者修改一個css樣式
element.style.駝峰格式樣式屬性名
舉例：
//獲取標簽寬度
標簽對象.style.width;
//設置標簽寬度
標簽對象.style.width = "400px";
2. 通過class獲取或者設置樣式
element.className
舉例：
//獲取標簽的class屬性
標簽對象.className
//設置class屬性值
標簽對象.className = "新值";
3. 獲取或修改style屬性的所有樣式 （了解）
element.style.cssText
4. 切換class樣式（了解）
element.classList接口，常用方法有四個:
add() 添加一個class樣式
remove() 移除一個class樣式
contains() 判斷是否包含某一個樣式
toggle() 切換一個class樣式 有則刪除,無則添加
3. 正則表達式
格式
格式1：
/正則表達式/匹配模式
格式2：
new RegExp("正則表達式", "匹配模式");
注意：該格式在表示正則表達式的時候需要轉義,例如\d，應表示為\\d
匹配模式：
i 不區(qū)分大小寫,匹配字符串時不區(qū)分大小寫
g 全局匹配 ,匹配到一個之后不停止,匹配字符串的所有內容
m 多行匹配 ,匹配字符串的所有行的內容
匹配規(guī)則
1.字符匹配
\b 匹配一個單詞邊界扳碍。'er\b' 可以匹配 "never" 中的 'er'提岔，但不能匹配 "verb" 中的 'er'。
\B 匹配非單詞邊界笋敞。'er\B' 能匹配 "verb" 中的 'er'碱蒙，但不能匹配 "never" 中的 'er'。
\d 匹配一個數字字符夯巷。等價于 [0-9]赛惩。
\D 匹配一個非數字字符。等價于 [^0-9]趁餐。
\s 匹配任何空白字符喷兼，包括空格、制表符澎怒、換頁符等等褒搔。
\S 匹配任何非空白字符阶牍。
\w 匹配包括下劃線的任何單詞字符喷面。等價于'[A-Za-z0-9_]'。
\W 匹配任何非單詞字符走孽。等價于'[^A-Za-z0-9_]'惧辈。
^ 限定字符串的開始位置。
$ 限定字符串的結束位置磕瓷。
2.區(qū)間匹配
[xyz] 匹配xyz中的任意一個字符盒齿。
[^xyz] 匹配除了xyz外的任意一個字符。
[a-z] 匹配指定范圍內的任意字符困食。
[^a-z] 匹配任何不在指定范圍內的任意字符边翁。
[a-zA-Z0-9] 匹配a-z或者A-Z或者0-9之間的任意一個字符。
3.數量匹配
* 0次到多次 (任意次)
? 0次到1次 (有或沒有)
+ 1次到多次
{n} 重復n次
{n,} 重復n次以上 (>=n次)
{n,m} 重復n到m次
API操作
string對象
match(/正則表達式/);
作用：匹配并獲取符合正則表達式的內容硕盹。
參數：正則表達式
返回：匹配成功返回匹配到的字符串數組符匾，失敗返回null。
RegExp對象
test("字符串")
作用：判斷正則表達式是否匹配參數中的字符串瘩例。
參數：要匹配的字符串
返回：匹配成功返回true啊胶，否則返回false
舉例：
<script>
let str = "abc123cba456aaa789";
//RegExp對象
let reg = new RegExp("\\d+","g"); //g表示全局匹配
//判斷是否匹配
console.log(reg.test(str)); //true
//匹配并獲取
let array = str.match(/\d+/g);
if(array != null){
for(let i in array){
console.log(array[i]); //123 456 789
}
}
</script>
4. 擴展作業(yè)
練習1
按要求在給定的HTML頁面中實現指定功能。
要求：
在輸入框輸入信息垛贤，點擊添加的時候焰坪，動態(tài)添加一行內容。
點擊刪除的時候聘惦，刪除被勾選的行某饰。
HTML頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>練習1</title>
</head>
<body>
<table width="400" border="1" id="table" align="center" style="border-collapse: collapse">
<caption><h3>用戶信息列表</h3></caption>
<tr>
<th>選擇</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>張三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>李四</td>
<td>女</td>
<td>20</td>
</tr>
</table>
<div align="center">
姓名<input type="text" name="name" value=""/><br/>
性別<input type="text" name="gender" value=""/><br/>
年齡<input type="text" name="age" value=""/><br/>
<button>添加</button>
<button>刪除</button>
</div>
</body>
</html>
參考答案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>練習1</title>
<script type="text/javascript">
function addRow() {
//獲取輸入框的姓名
let name = document.querySelectorAll("[name=name]")[0].value;
//獲取性別
let gender = document.querySelectorAll("[name=gender]")[0].value;
//獲取年齡
let age = document.querySelectorAll("[name=age]")[0].value;
if(name=="" || gender=="" || age==""){
return;
}
//創(chuàng)建tr元素
let tr = document.createElement("tr");
//創(chuàng)建單元格
tr.innerHTML = `<td><input type="checkbox"/></td><td>${name}</td><td>${gender}</td><td>${age}</td>`;
//往表格中添加tr元素
let table = document.querySelector("#table");
table.appendChild(tr);
//清空輸入框
document.querySelectorAll("[name=name]")[0].value = "";
document.querySelectorAll("[name=gender]")[0].value = "";
document.querySelectorAll("[name=age]")[0].value = "";
}
function deleteRows() {
//選擇所有checkbox元素
let ckElements = document.querySelectorAll("[type=checkbox]");
//遍歷獲取所有被勾選的
for(let ckbox of ckElements){
//判斷是否選中
if(ckbox.checked){
//得到tr元素
let tr = ckbox.parentElement.parentElement;
//刪除tr元素
tr.outerHTML = "";
}
}
}
</script>
</head>
<body>
<table width="400" border="1" id="table" align="center" style="border-collapse: collapse">
<caption><h3>用戶信息列表</h3></caption>
<tr>
<th>選擇</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>張三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>李四</td>
<td>女</td>
<td>20</td>
</tr>
</table>
<div align="center">
姓名<input type="text" name="name" value=""/><br/>
性別<input type="text" name="gender" value=""/><br/>
年齡<input type="text" name="age" value=""/><br/>
<button onclick="addRow()">添加</button>
<button onclick="deleteRows()">刪除</button>
</div>
</body>
</html>
練習2
根據給出的HTML頁面，實現以下功能。
要求：
點擊 “獲取驗證碼” 按鈕之后黔漂，按鈕被禁用碧浊，鼠標變?yōu)椴豢捎脠D標，30秒之后取消禁用瘟仿。
按鈕上顯示 ”n秒后重新獲取“箱锐，n從30開始倒數顯示。
( 提示：鼠標顯示禁用圖標的css語法 ： cursor: not-allowed )
效果：
HTML頁面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取驗證碼按鈕</title>
<script type="text/javascript">
</script>
</head>
<body>
<!--點擊按鈕后劳较，按鈕被禁用驹止，倒數60秒后可重新點擊-->
<button id="btn">獲取驗證碼</button>
</body>
</html>
參考答案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取驗證碼按鈕</title>
<script type="text/javascript">
function getVarCode() {
//將按鈕禁用
let btn = document.querySelector("#btn");
btn.disabled = true;
btn.style.cursor = "not-allowed"; //鼠標顯示禁用圖標
//按鈕顯示60秒倒計時
let second = 30;
let counter = setInterval(function () {
second--;
if(second>0){
btn.innerText = second+"秒后重新獲取";
}
},1000);
//60秒時間間隔到了之后清除倒計時，按鈕恢復點擊功能
setTimeout(function () {
//清除倒計時定時器
clearInterval(counter);
//按鈕恢復
btn.innerHTML = "獲取驗證碼";
btn.disabled = false;
btn.style.cursor = "";
},30000);
}
</script>
</head>
<body>
<!--點擊按鈕后观蜗，按鈕被禁用臊恋，倒數60秒后可重新點擊-->
<button id="btn" onclick="getVarCode()">獲取驗證碼</button>
</body>
</html>
