當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

java筑基期(6)----javascript（高级(2)）

發(fā)布時(shí)間：2025/3/21 javascript 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 java筑基期(6)----javascript（高级(2)）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

* 核心DOM模型：

* Document：文檔對(duì)象

? ? 1. 創(chuàng)建(獲取)：在html dom模型中可以使用window對(duì)象來獲取
?? ??? ?1. window.document
?? ??? ?2. document
?? ?2. 方法：
?? ??? ?1. 獲取Element對(duì)象：
?? ??? ??? ?1. getElementById()?? ?：根據(jù)id屬性值獲取元素對(duì)象。id屬性值一般唯一
?? ??? ??? ?2. getElementsByTagName()：根據(jù)元素名稱獲取元素對(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)建：通過document來獲取和創(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樹：
?? ??? ??? ?* 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)。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Node對(duì)象</title><style>div{border: 1px solid red;}#div1{width: 200px;height: 200px;}#div2{width: 100px;height: 100px;}#div3{width: 100px;height: 100px;}</style></head> <body><div id="div1"><div id="div2">div2</div>div1</div><a href="javascript:void(0);" id="del">刪除子節(jié)點(diǎn)</a><a href="javascript:void(0);" id="add">添加子節(jié)點(diǎn)</a> <script>//1.獲取超鏈接var element_a = document.getElementById("del");//2.綁定單擊事件element_a.onclick = function(){var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");div1.removeChild(div2);//刪除子節(jié)點(diǎn)}//1.獲取超鏈接var element_add = document.getElementById("add");//2.綁定單擊事件element_add.onclick = function(){var div1 = document.getElementById("div1");//給div1添加子節(jié)點(diǎn)//創(chuàng)建div節(jié)點(diǎn)var div3 = document.createElement("div");div3.setAttribute("id","div3");div1.appendChild(div3);//添加子節(jié)點(diǎn)}/*超鏈接功能：1.可以被點(diǎn)擊：樣式2.點(diǎn)擊后跳轉(zhuǎn)到href指定的url需求：保留1功能，去掉2功能實(shí)現(xiàn)：href="javascript:void(0);"*/var div2 = document.getElementById("div2");var div1 = div2.parentNode;alert(div1);</script> </body> </html>

* HTML DOM
?? ?1. 標(biāo)簽體的設(shè)置和獲取：innerHTML
?? ?2. 使用html元素對(duì)象的屬性
?? ?3. 控制元素樣式
?? ??? ?1. 使用元素的style屬性來設(shè)置
?? ??? ??? ?如：
?? ??? ??? ??? ? //修改樣式方式1
?? ??? ??? ??? ?div1.style.border = "1px solid red";
?? ??? ??? ??? ?div1.style.width = "200px";
?? ??? ??? ??? ?//font-size--> fontSize
?? ??? ??? ??? ?div1.style.fontSize = "20px";
?? ??? ?2. 提前定義好類選擇器的樣式，通過元素的className屬性來設(shè)置其class屬性值。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>動(dòng)態(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="請(qǐng)輸入編號(hào)"><input type="text" id="name" placeholder="請(qǐng)輸入姓名"><input type="text" id="gender" placeholder="請(qǐng)輸入性別"><input type="button" value="添加" id="btn_add"></div><table><caption>學(xué)生信息表</caption><tr><th>編號(hào)</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. 給添加按鈕綁定單擊事件2. 獲取文本框的內(nèi)容3. 創(chuàng)建td，設(shè)置td的文本為文本框的內(nèi)容。4. 創(chuàng)建tr5. 將td添加到tr中6. 獲取table，將tr添加到table中2.刪除：1.確定點(diǎn)擊的是哪一個(gè)超鏈接<a href="javascript:void(0);" onclick="delTr(this);" >刪除</a>2.怎么刪除？removeChild():通過父節(jié)點(diǎn)刪除子節(jié)點(diǎn)*///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，賦值td的標(biāo)簽體//id 的 tdvar td_id = document.createElement("td");var text_id = document.createTextNode(id);td_id.appendChild(text_id);//name 的 tdvar td_name = document.createElement("td");var text_name = document.createTextNode(name);td_name.appendChild(text_name);//gender 的 tdvar td_gender = document.createElement("td");var text_gender = document.createTextNode(gender);td_gender.appendChild(text_gender);//a標(biāo)簽的tdvar 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)建trvar tr = document.createElement("tr");//5.添加td到tr中tr.appendChild(td_id);tr.appendChild(td_name);tr.appendChild(td_gender);tr.appendChild(td_a);//6.獲取tablevar table = document.getElementsByTagName("table")[0];table.appendChild(tr);}*///使用innerHTML添加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;//獲取tablevar 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>

?

控制樣式案例

<!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)聽機(jī)制：

? ? * 概念：某些組件被執(zhí)行了某些操作后，觸發(fā)某些代碼的執(zhí)行。?? ?
?? ?* 事件：某些操作。如：單擊，雙擊，鍵盤按下了，鼠標(biāo)移動(dòng)了
?? ?* 事件源：組件。如：按鈕文本輸入框...
?? ?* 監(jiān)聽器：代碼。
?? ?* 注冊(cè)監(jiān)聽：將事件，事件源，監(jiān)聽器結(jié)合在一起。當(dāng)事件源上發(fā)生了某個(gè)事件，則觸發(fā)執(zhí)行某個(gè)監(jiān)聽器代碼。

?? ?* 常見的事件：
?? ?1. 點(diǎn)擊事件：
?? ??? ?1. onclick：單擊事件
?? ??? ?2. ondblclick：雙擊事件
?? ?2. 焦點(diǎn)事件
?? ??? ?1. onblur：失去焦點(diǎn)
?? ??? ?2. onfocus:元素獲得焦點(diǎn)。

?? ?3. 加載事件：
?? ??? ?1. onload：一張頁面或一幅圖像完成加載。

?? ?4. 鼠標(biāo)事件：

?? ??? ??onmousedown?? ?鼠標(biāo)按鈕被按下。
?? ??? ??onmouseup?? ?鼠標(biāo)按鍵被松開。
?? ??? ??onmousemove?? ?鼠標(biāo)被移動(dòng)。
? ? ? ? ?onmouseover?? ?鼠標(biāo)移到某元素之上。
? ? ? ? ?onmouseout?? ?鼠標(biāo)從某元素移開。

?? ??? ?
? ? ?? ?5. 鍵盤事件：

?? ??? ??onkeydown?? ?某個(gè)鍵盤按鍵被按下。?? ?
?? ??? ??onkeyup?? ??? ?某個(gè)鍵盤按鍵被松開。
? ? ? ? ?onkeypress?? ?某個(gè)鍵盤按鍵被按下并松開。

?? ?6. 選擇和改變
?? ??? ?1. onchange?? ?域的內(nèi)容被改變。
?? ??? ?2. onselect?? ?文本被選中。

?? ?7. 表單事件：
?? ??? ?1. onsubmit?? ?確認(rèn)按鈕被點(diǎn)擊。
?? ??? ?2. onreset?? ?重置按鈕被點(diǎn)擊。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>常見事件</title><script>/*常見的事件：1. 點(diǎn)擊事件：1. onclick：單擊事件2. ondblclick：雙擊事件2. 焦點(diǎn)事件1. onblur：失去焦點(diǎn)。* 一般用于表單驗(yàn)證2. onfocus:元素獲得焦點(diǎn)。3. 加載事件：1. onload：一張頁面或一幅圖像完成加載。4. 鼠標(biāo)事件：1. onmousedown 鼠標(biāo)按鈕被按下。* 定義方法時(shí)，定義一個(gè)形參，接受event對(duì)象。* event對(duì)象的button屬性可以獲取鼠標(biāo)按鈕鍵被點(diǎn)擊了。2. onmouseup 鼠標(biāo)按鍵被松開。3. onmousemove 鼠標(biāo)被移動(dòng)。4. onmouseover 鼠標(biāo)移到某元素之上。5. onmouseout 鼠標(biāo)從某元素移開。5. 鍵盤事件：1. onkeydown 某個(gè)鍵盤按鍵被按下。2. onkeyup 某個(gè)鍵盤按鍵被松開。3. onkeypress 某個(gè)鍵盤按鍵被按下并松開。6. 選擇和改變1. onchange 域的內(nèi)容被改變。2. onselect 文本被選中。7. 表單事件：1. onsubmit 確認(rèn)按鈕被點(diǎn)擊。* 可以阻止表單的提交* 方法返回false則表單被阻止提交。2. onreset 重置按鈕被點(diǎn)擊。*///2.加載完成事件 onloadwindow.onload = function(){/*//1.失去焦點(diǎn)事件document.getElementById("username").onblur = function(){alert("失去焦點(diǎn)了...");}*//*//3.綁定鼠標(biāo)移動(dòng)到元素之上事件document.getElementById("username").onmouseover = function(){alert("鼠標(biāo)來了....");}*//* //3.綁定鼠標(biāo)點(diǎn)擊事件document.getElementById("username").onmousedown = function(event){// alert("鼠標(biāo)點(diǎn)擊了....");alert(event.button);}*//* document.getElementById("username").onkeydown = function(event){// alert("鼠標(biāo)點(diǎn)擊了....");// alert(event.button);if(event.keyCode == 13){alert("提交表單");}}*//* document.getElementById("username").onchange = function(event){alert("改變了...")}document.getElementById("city").onchange = function(event){alert("改變了...")}*//*document.getElementById("form").onsubmit = function(){//校驗(yàn)用戶名格式是否正確var flag = false;return flag;}*/}function checkForm(){return true;}</script></head> <body><form action="#" id="form" onclick="return checkForm();"> <input name="username" id="username"><select id="city"><option>--請(qǐng)選擇--</option><option>北京</option><option>上海</option><option>西安</option> </select> <input type="submit" value="提交"> </form> </body> </html>

綜合案例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.在頁面加載完后綁定事件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è)頁面</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)聽器中判斷每一個(gè)方法校驗(yàn)的結(jié)果。如果都為true，則監(jiān)聽器方法返回true如果有一個(gè)為false，則監(jiān)聽器方法返回false2.定義一些方法分別校驗(yàn)各個(gè)表單項(xiàng)。3.給各個(gè)表單項(xiàng)綁定onblur事件。*/window.onload = function(){//1.給表單綁定onsubmit事件document.getElementById("form").onsubmit = function(){//調(diào)用用戶校驗(yàn)方法 chekUsername();//調(diào)用密碼校驗(yàn)方法 chekPassword();//return checkUsername() && checkPassword();return checkUsername() && checkPassword();}//給用戶名和密碼框分別綁定離焦事件document.getElementById("username").onblur = checkUsername;document.getElementById("password").onblur = checkPassword;}//校驗(yàn)用戶名function checkUsername(){//1.獲取用戶名的值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{//提示紅色用戶名有誤s_username.innerHTML = "用戶名格式有誤";}return flag;}//校驗(yàn)密碼function checkPassword(){//1.獲取用戶名的值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{//提示紅色用戶名有誤s_password.innerHTML = "密碼格式有誤";}return flag;} </script> </head> <body><div class="rg_layout"><div class="rg_left"><p>新用戶注冊(cè)</p><p>USER REGISTER</p></div><div class="rg_center"><div class="rg_form"><form action="#" id="form" method="get"><table><tr><td class="td_left"><label for="username">用戶名</label></td><td class="td_right"><input type="text" name="username" id="username" placeholder="請(qǐng)輸入用戶名"><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)）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： java练气期(3)----java高级
下一篇： Springcloud gateway获