JS进阶
一 DOM复习
二 节点操作
三 onsubmit事件
四 事件传播
五 焦点
六 模态对话框
一 DOM复习
控制html页面的所有标签对象（document，element）
1 属性操作
（1）element.innerHTML element.Text
(2) element.属性=值
getAttribute("属性名")
setAttribute("属性名"，"属性值")
（3）element.claaslist.add
element.claaslist.remove()
二节点操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height: 200px; width: 200px; border:1px solid red; } </style> <script> window.onload=function () { var ele_add=document.getElementsByClassName('addBtn')[0]; var ele_replace=document.getElementsByClassName('replaceBtn')[0]; var ele_del=document.getElementsByClassName('delBtn')[0]; ele_add.onclick=function () { //新建节点 var ele_a=document.createElement('a'); //属性值添加 ele_a.innerHTML="点击"; ele_a.setAttribute("href","http://baidu.com"); ele_p=document.getElementsByClassName('c1')[0] ele_p.appendChild(ele_a) //新建节点 // var ele_img=document.createElement("img"); //属性的赋值 // ele_img.src="Bootstrap_i2.png"; // ele_img.height=50; // ele_img.width=50; // var ele_p1=document.getElementById('p1') // var ele_p=document.getElementsByClassName('c1')[0]; // ele_p1.appendChild(ele_img) // ele_p.appendChild(ele_img) } ele_del.onclick=function () { //删除节点 ele_p=document.getElementsByClassName('c1')[0]; var ele_p1=document.getElementById('p1'); ele_p.removeChild(ele_p1); } ele_replace.onclick=function () { // //替换节点 var ele_a=document.createElement('a'); // // 属性值添加 ele_a.innerHTML="点击"; ele_a.setAttribute("href","http://baidu.com"); var ele_p1=document.getElementById('p1'); var ele_p=document.getElementsByClassName('c1')[0]; ele_p.replaceChild(ele_a,ele_p1); // } var eles=document.getElementsByClassName('del'); for (var i=0;i<eles.length;i++){ eles[i].onclick=function () { console.log(this.parentElement.parentElement); var ele_tr=this.parentElement.parentElement; var ele_tbody=document.getElementById('t1'); ele_tbody.removeChild(ele_tr) } } } </script> </head> <body> <div class="c1"> <p id="p1">p1</p> </div> <button class="addBtn">ADD</button> <button class="delBtn">del</button> <button class="replaceBtn">replace</button> <hr> <table> <tbody id="t1"> <tr> <td><input type="checkbox"></td> <td><input type="text"></td> <td><button class="del">del</button></td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="text"></td> <td><button class="del">del</button></td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="text"></td> <td><button class="del">del</button></td> </tr> </tbody> </table> <script> // var ele_add=document.getElementsByClassName('addBtn')[0]; // var ele_replace=document.getElementsByClassName('replaceBtn')[0]; // var ele_del=document.getElementsByClassName('delBtn')[0]; // ele_add.onclick=function () { //新建节点 // var ele_a=document.createElement('a'); //属性值添加 // ele_a.innerHTML="点击"; // ele_a.setAttribute("href","http://baidu.com"); // ele_p=document.getElementsByClassName('c1')[0] // ele_p.appendChild(ele_a) //新建节点 // var ele_img=document.createElement("img"); //属性的赋值 // ele_img.src="Bootstrap_i2.png"; // ele_img.height=50; // ele_img.width=50; // var ele_p1=document.getElementById('p1') // var ele_p=document.getElementsByClassName('c1')[0]; // ele_p1.appendChild(ele_img) // ele_p.appendChild(ele_img) // } // ele_del.onclick=function () { //删除节点 // ele_p=document.getElementsByClassName('c1')[0]; // var ele_p1=document.getElementById('p1'); // ele_p.removeChild(ele_p1); // } // ele_replace.onclick=function () { // //替换节点 // var ele_a=document.createElement('a'); // // 属性值添加 // ele_a.innerHTML="点击"; // ele_a.setAttribute("href","http://baidu.com"); // var ele_p1=document.getElementById('p1'); // var ele_p=document.getElementsByClassName('c1')[0]; // ele_p.replaceChild(ele_a,ele_p1); // // } var eles=document.getElementsByClassName('del'); for (var i=0;i<eles.length;i++){ eles[i].onclick=function () { console.log(this.parentElement.parentElement); var ele_tr=this.parentElement.parentElement; var ele_tbody=document.getElementById('t1'); ele_tbody.removeChild(ele_tr) } } </script> </body> </html>
三 onsubmit事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" id="submit"> <p>姓名<input type="text" name='user' id="username"></p> <p>年龄<input type="text" name='age' id="age"></p> <input type="submit" > </form> <input type="text" id="test"> <script> var ele_form=document.getElementById('submit'); var ele_user=document.getElementById('username'); var ele_age=document.getElementById('age'); ele_form.onsubmit=function (event) { var username=ele_user.value; var userage=ele_age.value; alert(username); alert(userage); //阻止默认事件发生 // 方式一 //return false //方式二 event.preventDefault() //event对象：某次事件触发时所有的状态信息 } </script> <script> var ele_test=document.getElementById('test'); ele_test.onkeydown=function (e) { // if (e.keyCode==13){ alert(6666)} if (e.keyCode==13){ console.log(6666)} } </script> </body> </html>
四 事件传播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height:500px; width:400px; border:1px solid red; background-color: greenyellow; } .c2{ height:200px; width:200px; border:1px solid green; background-color: #2459a2; } </style> </head> <body> <div class="c1"> <div class="c2"></div> </div> <script> var ele_b=document.getElementsByClassName('c1')[0]; var ele_s=document.getElementsByClassName('c2')[0]; ele_b.onclick=function () { alert(6666) } ele_s.onclick=function (event) { alert(222) event.stopPropagation();//阻止事件传播 } </script> </body> </html>
五 焦点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="search" placeholder="username"> //模拟placeholder 只是一个提示功能，而value是一个默认的值，如果不写点提交就可以发送出去 <script> var ele_search=document.getElementById('search'); ele_search.onfocus=function () { this.value='' } ele_search.onblur=function () { if (this.value.trim()==""){ this.value='username' } } </script> </body> </html>
六 模态对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back{ width: 100%; height: 2000px; } .shade{ position: fixed; top:0; left:0; right:0; bottom:0; background-color:gray ; opacity: 0.5; } .hide{ display: none; } .model{ position: fixed; top:100px; left:40%; width:400px; height: 400px; background-color: white; } </style> </head> <body> <div class="back"> <button id="add">add</button> </div> <div class="shade hide"></div> <div class="model hide"><form action=""> <p>姓名<input type="text"></p> <p>年龄<input type="text"></p> <input type="button" id="btn" value="提交"> </form> </div> <script> var ele_add=document.getElementById("add"); var ele_mdoel=document.getElementsByClassName("model")[0]; var ele_shade=document.getElementsByClassName("shade")[0]; ele_add.onclick=function () { ele_mdoel.classList.remove("hide"); ele_shade.classList.remove("hide") } </script> </body> </html>
