一 表格案例
二 onchange事件（二级联动）
三 onmouse事件
四 事件委派
五 作用域链
一表格案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button class="selectAll">全选</button> <button class="reverse">反选</button> <button class="cancel">取消</button> <hr> <table border="1"> <tr> <td><input type="checkbox" class="check"></td> <td>111</td> <td>111</td> </tr> <tr> <td><input type="checkbox" class="check"></td> <td>111</td> <td>111</td> </tr> <tr> <td><input type="checkbox" class="check"></td> <td>111</td> <td>111</td> </tr> <tr> <td><input type="checkbox" class="check"></td> <td>111</td> <td>111</td> </tr> </table> <script> // 方式1 var ele_selectAll=document.getElementsByClassName("selectAll")[0]; var ele_reverse=document.getElementsByClassName("reverse")[0]; var ele_cancel=document.getElementsByClassName("cancel")[0]; var ele_input=document.getElementsByClassName("check"); ele_selectAll.onclick=function () { for(var i=0;i<ele_input.length;i++){ ele_input[i].checked="checked" } }; ele_cancel.onclick=function () { for(var i=0;i<ele_input.length;i++){ ele_input[i].checked="" } }; ele_reverse.onclick=function () { for(var i=0;i<ele_input.length;i++){ var ele=ele_input[i]; if(ele.checked){ ele.checked="" } else { ele.checked="checked" } } }; // 方式2 // var eles_button=document.getElementsByTagName("button"); // var ele_input=document.getElementsByClassName("check"); // for (var i=0;i<eles_button.length;i++){ // eles_button[i].onclick=function () { // if(this.innerHTML=="全选"){ // for(var i=0;i<ele_input.length;i++){ // ele_input[i].checked="checked" // } // } // // else if (this.innerHTML=="取消"){ // // } // // else { // // } // // } // } </script> </body> </html>
二 onchange事件（二级联动）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=""> <select name="pro" id="s1"> <option value="0">请输入省份</option> <option value="hebei">河北省</option> <option value="henan">河南省</option> <option value="beijing">北京省</option> </select> <select name="city" id="c1"> <option value="0">请输入城市</option> </select> </form> <script> var arr=[1121,22,344]; var obj={"username":"Yuan","age":12}; // console.log(typeof arr);//object // console.log(typeof obj);//object // console.log(obj["username"]);//Yuan // for(var i in arr){ // console.log(arr[i]);//里面的数字 // console.log(i);//数组的索引 // }; // for(var i in obj){ console.log(obj[i]);//相当于字典里的value console.log(i);//相当于字典里的key }; // // var data={"hebei":["保定","石家庄"],"henan":["郑州","开封"],"beijing":["朝阳","昌平"]}; // // var select_province=document.getElementById("s1"); // var select_city=document.getElementById("c1"); // // select_province.onchange=function () { // // console.log(this.value); // var province=this.value; // var citys=data[province]; // // console.log(citys); // // // 清空操作 // console.log(select_city.options.length); // select_city.children.length=1; // // for(var i=0;i<citys.length;i++){ // var ele_option=document.createElement("option"); // <option></option> // ele_option.innerHTML=citys[i]; // <option>郑州</option> // ele_option.value=i+1; // <option value=1>郑州</option> // // select_city.appendChild(ele_option) // } // } </script> </body> </html>
三 onmouse事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ 200px; height: 200px; background-color: #0e90d2; } .title{ background-color: goldenrod; line-height: 30px; } .item{ line-height: 20px; background-color: #cccccc; } .hide{ display: none; } </style> </head> <body> <div class="c1"></div> <div class="box"> <div class="title">onmouseover</div> <div class="con hide"> <div class="item"><a href="">111</a></div> <div class="item"><a href="">222</a></div> <div class="item"><a href="">333</a></div> </div> </div> <script> // var ele=document.getElementsByClassName("c1")[0] // ele.onmouseover=function () { // console.log(1234) // }; //// ele.onmouseleave=function () { //// console.log(666) //// } // ele.onmouseout=function () { // console.log(888) // } var ele_title=document.getElementsByClassName("title")[0]; var ele_box=document.getElementsByClassName("box")[0]; ele_title.onmouseover=function () { this.nextElementSibling.classList.remove("hide") }; ele_box.onmouseout=function () { ele_title.nextElementSibling.classList.add("hide") } ; ele_box.onmouseleave=function () { ele_title.nextElementSibling.classList.add("hide") } // 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 // 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。 </script> </body> </html>
四 事件委派
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <button>Add</button> <script> var eles_li=document.getElementsByTagName("li"); var ele_btn=document.getElementsByTagName("button")[0]; var ele_ul=document.getElementsByTagName("ul")[0]; //// 添加li ele_btn.onclick=function () { var ele_li=document.createElement("li"); ele_li.innerHTML=444; ele_ul.appendChild(ele_li) }; // // 绑定事件 // for(var i=0;i<eles_li.length;i++){ // eles_li[i].onclick=function () { // alert(this.innerHTML) // } // } // 事件委派 ele_ul.addEventListener("click",function (e) { // alert(123) // console.log(e.target); // 标签 // console.log(e.target.tagName); // 标签名称 // if(e.target.tagName=="LI"){ console.log(e.target.innerHTML) } }) </script> </body> </html>
五 作用域链
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var s=12; function f(){ alert(s);//定义未赋值返回时undefind和无返回值的也是undefind//undefind var s=12;//12因为在编译时有s但是不会问它的赋值情况。 alert(s);//12 } f();//先编译在执行如果局部作用域没有赋值python中会报错；而js中出返回undefind </script> </body> </html>