javascript
java筑基期(6)----javascript(高级(2))
* 核心DOM模型:
* Document:文檔對(duì)象
? ? 1. 創(chuàng)建(獲取):在html dom模型中可以使用window對(duì)象來(lái)獲取
?? ??? ?1. window.document
?? ??? ?2. document
?? ?2. 方法:
?? ??? ?1. 獲取Element對(duì)象:
?? ??? ??? ?1. getElementById()?? ?: 根據(jù)id屬性值獲取元素對(duì)象。id屬性值一般唯一
?? ??? ??? ?2. getElementsByTagName():根據(jù)元素名稱(chēng)獲取元素對(duì)象們。返回值是一個(gè)數(shù)組
?? ??? ??? ?3. getElementsByClassName():根據(jù)Class屬性值獲取元素對(duì)象們。返回值是一個(gè)數(shù)組
?? ??? ??? ?4. getElementsByName(): 根據(jù)name屬性值獲取元素對(duì)象們。返回值是一個(gè)數(shù)組
?? ??? ?2. 創(chuàng)建其他DOM對(duì)象:
?? ??? ??? ?createAttribute(name)
?? ??? ??? ?createComment()
?? ??? ??? ?createElement()
?? ??? ??? ?createTextNode()
?? ?3. 屬性
* Element:元素對(duì)象
? ? 1. 獲取/創(chuàng)建:通過(guò)document來(lái)獲取和創(chuàng)建
?? ?2. 方法:
?? ??? ?1. removeAttribute():刪除屬性
?? ??? ?2. setAttribute():設(shè)置屬性
* Node:節(jié)點(diǎn)對(duì)象,其他5個(gè)的父對(duì)象
?? ?* 特點(diǎn):所有dom對(duì)象都可以被認(rèn)為是一個(gè)節(jié)點(diǎn)
?? ?* 方法:
?? ??? ?* CRUD dom樹(shù):
?? ??? ??? ?* appendChild():向節(jié)點(diǎn)的子節(jié)點(diǎn)列表的結(jié)尾添加新的子節(jié)點(diǎn)。
?? ??? ??? ?* removeChild()?? ?:刪除(并返回)當(dāng)前節(jié)點(diǎn)的指定子節(jié)點(diǎn)。
?? ??? ??? ?* replaceChild():用新節(jié)點(diǎn)替換一個(gè)子節(jié)點(diǎn)。
?? ?* 屬性:
?? ??? ?* parentNode 返回節(jié)點(diǎn)的父節(jié)點(diǎn)。
* HTML DOM
?? ?1. 標(biāo)簽體的設(shè)置和獲取:innerHTML
?? ?2. 使用html元素對(duì)象的屬性
?? ?3. 控制元素樣式
?? ??? ?1. 使用元素的style屬性來(lái)設(shè)置
?? ??? ??? ?如:
?? ??? ??? ??? ? //修改樣式方式1
?? ??? ??? ??? ?div1.style.border = "1px solid red";
?? ??? ??? ??? ?div1.style.width = "200px";
?? ??? ??? ??? ?//font-size--> fontSize
?? ??? ??? ??? ?div1.style.fontSize = "20px";
?? ??? ?2. 提前定義好類(lèi)選擇器的樣式,通過(guò)元素的className屬性來(lái)設(shè)置其class屬性值。
?
控制樣式案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>控制樣式</title><style>.d1{border: 1px solid red;width: 100px;height: 100px;}.d2{border: 1px solid blue;width: 200px;height: 200px;}</style> </head> <body><div id="div1">div1</div><div id="div2">div2</div><script>var div1 = document.getElementById("div1");div1.onclick = function(){//修改樣式方式1div1.style.border = "1px solid red";div1.style.width = "200px";//font-size--> fontSizediv1.style.fontSize = "20px";}var div2 = document.getElementById("div2");div2.onclick = function(){div2.className = "d1";}</script></body> </html>## 事件監(jiān)聽(tīng)機(jī)制:
? ? * 概念:某些組件被執(zhí)行了某些操作后,觸發(fā)某些代碼的執(zhí)行。?? ?
?? ?* 事件:某些操作。如: 單擊,雙擊,鍵盤(pán)按下了,鼠標(biāo)移動(dòng)了
?? ?* 事件源:組件。如: 按鈕 文本輸入框...
?? ?* 監(jiān)聽(tīng)器:代碼。
?? ?* 注冊(cè)監(jiān)聽(tīng):將事件,事件源,監(jiān)聽(tīng)器結(jié)合在一起。 當(dāng)事件源上發(fā)生了某個(gè)事件,則觸發(fā)執(zhí)行某個(gè)監(jiān)聽(tīng)器代碼。
?? ?* 常見(jiàn)的事件:
?? ?1. 點(diǎn)擊事件:
?? ??? ?1. onclick:單擊事件
?? ??? ?2. ondblclick:雙擊事件
?? ?2. 焦點(diǎn)事件
?? ??? ?1. onblur:失去焦點(diǎn)
?? ??? ?2. onfocus:元素獲得焦點(diǎn)。
?? ?3. 加載事件:
?? ??? ?1. onload:一張頁(yè)面或一幅圖像完成加載。
?? ?4. 鼠標(biāo)事件:
- ?? ??? ??onmousedown?? ?鼠標(biāo)按鈕被按下。
- ?? ??? ??onmouseup?? ?鼠標(biāo)按鍵被松開(kāi)。
- ?? ??? ??onmousemove?? ?鼠標(biāo)被移動(dòng)。
- ? ? ? ? ?onmouseover?? ?鼠標(biāo)移到某元素之上。
- ? ? ? ? ?onmouseout?? ?鼠標(biāo)從某元素移開(kāi)。
?? ??? ?
? ? ?? ?5. 鍵盤(pán)事件:
- ?? ??? ??onkeydown?? ?某個(gè)鍵盤(pán)按鍵被按下。?? ?
- ?? ??? ??onkeyup?? ??? ?某個(gè)鍵盤(pán)按鍵被松開(kāi)。
- ? ? ? ? ?onkeypress?? ?某個(gè)鍵盤(pán)按鍵被按下并松開(kāi)。
?? ?6. 選擇和改變
?? ??? ?1. onchange?? ?域的內(nèi)容被改變。
?? ??? ?2. onselect?? ?文本被選中。
?? ?7. 表單事件:
?? ??? ?1. onsubmit?? ?確認(rèn)按鈕被點(diǎn)擊。
?? ??? ?2. onreset?? ?重置按鈕被點(diǎn)擊。
綜合案例1
<!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* 遍歷cb,設(shè)置每一個(gè)cb的狀態(tài)為選中 checked*///1.在頁(yè)面加載完后綁定事件window.onload = function(){//2.給全選按鈕綁定單擊事件document.getElementById("selectAll").onclick = function(){//全選//1.獲取所有的checkboxvar cbs = document.getElementsByName("cb");//2.遍歷for (var i = 0; i < cbs.length; i++) {//3.設(shè)置每一個(gè)cb的狀態(tài)為選中 checkedcbs[i].checked = true;}}document.getElementById("unSelectAll").onclick = function(){//全不選//1.獲取所有的checkboxvar cbs = document.getElementsByName("cb");//2.遍歷for (var i = 0; i < cbs.length; i++) {//3.設(shè)置每一個(gè)cb的狀態(tài)為未選中 checkedcbs[i].checked = false;}}document.getElementById("selectRev").onclick = function(){//反選//1.獲取所有的checkboxvar cbs = document.getElementsByName("cb");//2.遍歷for (var i = 0; i < cbs.length; i++) {//3.設(shè)置每一個(gè)cb的狀態(tài)為相反cbs[i].checked = !cbs[i].checked;}}document.getElementById("firstCb").onclick = function(){//第一個(gè)cb點(diǎn)擊//1.獲取所有的checkboxvar cbs = document.getElementsByName("cb");//獲取第一個(gè)cb//2.遍歷for (var i = 0; i < cbs.length; i++) {//3.設(shè)置每一個(gè)cb的狀態(tài)和第一個(gè)cb的狀態(tài)一樣cbs[i].checked = this.checked;}}//給所有tr綁定鼠標(biāo)移到元素之上和移出元素事件var trs = document.getElementsByTagName("tr");//2.遍歷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>編號(hào)</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>綜合案例2
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>注冊(cè)頁(yè)面</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)聽(tīng)器中判斷每一個(gè)方法校驗(yàn)的結(jié)果。如果都為true,則監(jiān)聽(tīng)器方法返回true如果有一個(gè)為false,則監(jiān)聽(tīng)器方法返回false2.定義一些方法分別校驗(yàn)各個(gè)表單項(xiàng)。3.給各個(gè)表單項(xiàng)綁定onblur事件。*/window.onload = function(){//1.給表單綁定onsubmit事件document.getElementById("form").onsubmit = function(){//調(diào)用用戶(hù)校驗(yàn)方法 chekUsername();//調(diào)用密碼校驗(yàn)方法 chekPassword();//return checkUsername() && checkPassword();return checkUsername() && checkPassword();}//給用戶(hù)名和密碼框分別綁定離焦事件document.getElementById("username").onblur = checkUsername;document.getElementById("password").onblur = checkPassword;}//校驗(yàn)用戶(hù)名function checkUsername(){//1.獲取用戶(hù)名的值var username = document.getElementById("username").value;//2.定義正則表達(dá)式var reg_username = /^\w{6,12}$/;//3.判斷值是否符合正則的規(guī)則var flag = reg_username.test(username);//4.提示信息var s_username = document.getElementById("s_username");if(flag){//提示綠色對(duì)勾s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";}else{//提示紅色用戶(hù)名有誤s_username.innerHTML = "用戶(hù)名格式有誤";}return flag;}//校驗(yàn)密碼function checkPassword(){//1.獲取用戶(hù)名的值var password = document.getElementById("password").value;//2.定義正則表達(dá)式var reg_password = /^\w{6,12}$/;//3.判斷值是否符合正則的規(guī)則var flag = reg_password.test(password);//4.提示信息var s_password = document.getElementById("s_password");if(flag){//提示綠色對(duì)勾s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";}else{//提示紅色用戶(hù)名有誤s_password.innerHTML = "密碼格式有誤";}return flag;} </script> </head> <body><div class="rg_layout"><div class="rg_left"><p>新用戶(hù)注冊(cè)</p><p>USER REGISTER</p></div><div class="rg_center"><div class="rg_form"><!--定義表單 form--><form action="#" id="form" method="get"><table><tr><td class="td_left"><label for="username">用戶(hù)名</label></td><td class="td_right"><input type="text" name="username" id="username" placeholder="請(qǐng)輸入用戶(hù)名"><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="請(qǐng)輸入密碼"><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="請(qǐng)輸入郵箱"></td></tr><tr><td class="td_left"><label for="name">姓名</label></td><td class="td_right"><input type="text" name="name" id="name" placeholder="請(qǐng)輸入姓名"></td></tr><tr><td class="td_left"><label for="tel">手機(jī)號(hào)</label></td><td class="td_right"><input type="text" name="tel" id="tel" placeholder="請(qǐng)輸入手機(jī)號(hào)"></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="請(qǐng)輸入出生日期"></td></tr><tr><td class="td_left"><label for="checkcode" >驗(yàn)證碼</label></td><td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="請(qǐng)輸入驗(yàn)證碼"><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="注冊(cè)"></td></tr></table></form></div></div><div class="rg_right"><p>已有賬號(hào)?<a href="#">立即登錄</a></p></div> </div> </body> </html>?
總結(jié)
以上是生活随笔為你收集整理的java筑基期(6)----javascript(高级(2))的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: java练气期(3)----java高级
- 下一篇: java筑基期(9)----ajaxjs