當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
java筑基期(6)----javascript（高级(2)）
生活随笔
收集整理的這篇文章主要介紹了
java筑基期(6)----javascript（高级(2)）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
* 核心DOM模型：
* Document：文檔對象
? ? 1. 創建(獲取)：在html dom模型中可以使用window對象來獲取
?? ??? ?1. window.document
?? ??? ?2. document
?? ?2. 方法：
?? ??? ?1. 獲取Element對象：
?? ??? ??? ?1. getElementById()?? ?： 根據id屬性值獲取元素對象。id屬性值一般唯一
?? ??? ??? ?2. getElementsByTagName()：根據元素名稱獲取元素對象們。返回值是一個數組
?? ??? ??? ?3. getElementsByClassName():根據Class屬性值獲取元素對象們。返回值是一個數組
?? ??? ??? ?4. getElementsByName(): 根據name屬性值獲取元素對象們。返回值是一個數組
?? ??? ?2. 創建其他DOM對象：
?? ??? ??? ?createAttribute(name)
?? ??? ??? ?createComment()
?? ??? ??? ?createElement()
?? ??? ??? ?createTextNode()
?? ?3. 屬性
* Element：元素對象
? ? 1. 獲取/創建：通過document來獲取和創建
?? ?2. 方法：
?? ??? ?1. removeAttribute()：刪除屬性
?? ??? ?2. setAttribute()：設置屬性
* Node：節點對象，其他5個的父對象
?? ?* 特點：所有dom對象都可以被認為是一個節點
?? ?* 方法：
?? ??? ?* CRUD dom樹：
?? ??? ??? ?* appendChild()：向節點的子節點列表的結尾添加新的子節點。
?? ??? ??? ?* removeChild()?? ?：刪除（并返回）當前節點的指定子節點。
?? ??? ??? ?* replaceChild()：用新節點替換一個子節點。
?? ?* 屬性：
?? ??? ?* parentNode 返回節點的父節點。
* HTML DOM
?? ?1. 標簽體的設置和獲取：innerHTML
?? ?2. 使用html元素對象的屬性
?? ?3. 控制元素樣式
?? ??? ?1. 使用元素的style屬性來設置
?? ??? ??? ?如：
?? ??? ??? ??? ? //修改樣式方式1
?? ??? ??? ??? ?div1.style.border = "1px solid red";
?? ??? ??? ??? ?div1.style.width = "200px";
?? ??? ??? ??? ?//font-size--> fontSize
?? ??? ??? ??? ?div1.style.fontSize = "20px";
?? ??? ?2. 提前定義好類選擇器的樣式，通過元素的className屬性來設置其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>## 事件監聽機制：
? ? * 概念：某些組件被執行了某些操作后，觸發某些代碼的執行。?? ?
?? ?* 事件：某些操作。如： 單擊，雙擊，鍵盤按下了，鼠標移動了
?? ?* 事件源：組件。如： 按鈕 文本輸入框...
?? ?* 監聽器：代碼。
?? ?* 注冊監聽：將事件，事件源，監聽器結合在一起。 當事件源上發生了某個事件，則觸發執行某個監聽器代碼。
?? ?* 常見的事件：
?? ?1. 點擊事件：
?? ??? ?1. onclick：單擊事件
?? ??? ?2. ondblclick：雙擊事件
?? ?2. 焦點事件
?? ??? ?1. onblur：失去焦點
?? ??? ?2. onfocus:元素獲得焦點。
?? ?3. 加載事件：
?? ??? ?1. onload：一張頁面或一幅圖像完成加載。
?? ?4. 鼠標事件：
- ?? ??? ??onmousedown?? ?鼠標按鈕被按下。
- ?? ??? ??onmouseup?? ?鼠標按鍵被松開。
- ?? ??? ??onmousemove?? ?鼠標被移動。
- ? ? ? ? ?onmouseover?? ?鼠標移到某元素之上。
- ? ? ? ? ?onmouseout?? ?鼠標從某元素移開。
?? ??? ?
? ? ?? ?5. 鍵盤事件：
- ?? ??? ??onkeydown?? ?某個鍵盤按鍵被按下。?? ?
- ?? ??? ??onkeyup?? ??? ?某個鍵盤按鍵被松開。
- ? ? ? ? ?onkeypress?? ?某個鍵盤按鍵被按下并松開。
?? ?6. 選擇和改變
?? ??? ?1. onchange?? ?域的內容被改變。
?? ??? ?2. onselect?? ?文本被選中。
?? ?7. 表單事件：
?? ??? ?1. onsubmit?? ?確認按鈕被點擊。
?? ??? ?2. onreset?? ?重置按鈕被點擊。
綜合案例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，設置每一個cb的狀態為選中 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.設置每一個cb的狀態為選中 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.設置每一個cb的狀態為未選中 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.設置每一個cb的狀態為相反cbs[i].checked = !cbs[i].checked;}}document.getElementById("firstCb").onclick = function(){//第一個cb點擊//1.獲取所有的checkboxvar cbs = document.getElementsByName("cb");//獲取第一個cb//2.遍歷for (var i = 0; i < cbs.length; i++) {//3.設置每一個cb的狀態和第一個cb的狀態一樣cbs[i].checked = this.checked;}}//給所有tr綁定鼠標移到元素之上和移出元素事件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>學生信息表</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>綜合案例2
<!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 ;/*設置邊框圓角*/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事件。監聽器中判斷每一個方法校驗的結果。如果都為true，則監聽器方法返回true如果有一個為false，則監聽器方法返回false2.定義一些方法分別校驗各個表單項。3.給各個表單項綁定onblur事件。*/window.onload = function(){//1.給表單綁定onsubmit事件document.getElementById("form").onsubmit = function(){//調用用戶校驗方法 chekUsername();//調用密碼校驗方法 chekPassword();//return checkUsername() && checkPassword();return checkUsername() && checkPassword();}//給用戶名和密碼框分別綁定離焦事件document.getElementById("username").onblur = checkUsername;document.getElementById("password").onblur = checkPassword;}//校驗用戶名function checkUsername(){//1.獲取用戶名的值var username = document.getElementById("username").value;//2.定義正則表達式var reg_username = /^\w{6,12}$/;//3.判斷值是否符合正則的規則var flag = reg_username.test(username);//4.提示信息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(){//1.獲取用戶名的值var password = document.getElementById("password").value;//2.定義正則表達式var reg_password = /^\w{6,12}$/;//3.判斷值是否符合正則的規則var flag = reg_password.test(password);//4.提示信息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="#" 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="請輸入用戶名"><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>?
總結
以上是生活随笔為你收集整理的java筑基期(6)----javascript（高级(2)）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java练气期(3)----java高级
- 下一篇： Springcloud gateway获