JS的window对象定时器：
window下一些方法：
<script> 弹出 window.alert('hello') 返回布尔值 var ret = window.confirm('hello lzy') console.log(ret) 返回输入 var ret1 = window.prompt('hello ///') console.log(ret1) 转到新窗口 open('http://www.baidu.com') </script>
显示时间：
<head> <meta charset="UTF-8"> <title>Title</title> <style> #id1{ width: 200px; height: 200px; } </style> </head> <body> <input type = 'text' id = 'id1' onclick = "begin()"> <button onclick = "end()">停止</button> <script> function showTime() { var current_time = new Date().toLocaleString(); var ele = document.getElementById('id1'); ele.value = current_time; } var clock1; function begin() { if (clock1 == undefined) { showTime(); clock1 = setInterval(showTime, 1000) } } function end(){ clearInterval(clock1); clock1=undefined } </script> </body>
location://加载网址？
<body> <button onclick = "f()"></button> <script> function f(){ // location.assign("http://www.baidu.com") // location.reload() // location.replace("http://www.baidu.com") } </script> </body>
DOM节点：DOM定义了访问HTML和XML文档的标准：是W3C（万维网联盟）
的标准
分为三个不同部分：
核心 DOM 针对任何结构化文档的标准模型
XML了DOM 针对XML文档的标准模型
HTML DOM 针对HTML文档的标准模型
基础属性：
<body> <div class = "div1"> <p class = "p1">hello p</p> <div class = "div2">hello div2</div> </div> <script> var ele = document.getElementsByClassName("p1")[0]; console.log(ele.nodeName); console.log(ele.nodeType); console.log(ele.nodeValue); console.log(ele.innerHTML); ele.innerHTML = "hello world"; var p_ele = ele.parentNode; console.log(p_ele.nodeName) var b_ele= ele.nextSibling; console.log(b_ele.nodeName) var b_ele2 = ele.nextElementSibling; console.log(b_ele2.nodeName) console.log(b_ele2.nodeName) </script> </body>
查找：
ID NAME classname tagname； <body> <div class = "div1"> <p name = "littleP" class = "p1">hello p</p> <div class = "div2">hello div2 <div>div3</div> <a href="">click</a> </div> <span>span111</span> </div> <span>spanspanspanspan</span> <div>hhhhh</div> <script> var ele4 = document.getElementsByName("littleP")[0] var ele5 = ele4.nextElementSibling; console.log(ele5.innerHTML); console.log(ele5.innerText); //局部查找 var ele6=document.getElementsByClassName("div1")[0]; var ele7=ele6.getElementsByTagName("span"); console.log(ele7[0].innerHTML) </script> </body>
Event（事件）：
search： <input type = "text" id = "search" value = "请输入用户名" onfocus = "f1()"> <script> var ele = document.getElementById("search") function f1(){ if(ele.value == "请输入用户名"){ ele.value =""; } } function f2(){ if(!ele.value.trim()){ ele.value = "请输入用户名"; } } </script> load事件： <head> <meta charset="UTF-8"> <title>Title</title> <script> function f(){ var ele = document.getElementsByClassName("div1")[0] console.log(ele.innerHTML) } // ele.css("color","red") </script> </head> <body onload = "f()"> <div class = "div1">hello div1</div> </body> 事件绑定： <body> <div class="v1"> <div class="v2">dddd</div> <div class="v2">dddd</div> <div class="v2">dddd</div> <div class="v2">dddd</div> <div class="v2">dddd</div> <p id="p1" onclick="func(this)">pppppp</p> </div> <script> function func(that) { console.log(that) console.log(that.previousElementSibling); console.log(that.parentNode); } // var ele=document.getElementById("p1"); // ele.onclick=function () { // alert(123) // }; // 事件绑定2 // var ele2=document.getElementsByClassName("v2"); // // for(var i=0;i<ele2.length;i++){ // ele2[i].onclick=function () { // alert(555) // } // } // </script> </body> onsubmit事件与组织事件拖延 <body> <form action = "" id = "form"> <input type="text" name = "username"> <input type="submit" value = "提交"> </form> <!--onsubmit提交时触发 如果验证失败 组织触发--> <script> var ele = document.getElementById("form") ele.onsubmit = function (e) { alert(1234) // return false //此处返回false 不提交 // e.preventDefault() //组织第二方式 } // Event里面一个参数 such as “e” 拿到此次事件状态信息 </script> </body> 事件传播：（大概同上例子） <style> .outer{ width: 300px; height: 300px; background-color: aqua; } .inner{ width: 100px; height: 100px; background-color: black; } </style> </head> <body> <div class = "outer" onclick="func2()"> <div class = "inner" onclick="func1()"></div> </div> <script> var ele = document.getElementsByClassName("inner")[0] ele.onclick = function(e){ alert("i am inner") e.stopPropagation() }; // function func1() { // alert("i am inner") // } function func2() { alert("i am outer") } </script> </body>
增删改查：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1,.div2,.div3,.div4{ width: 300px; height: 300px; } .div1{ background-color: aqua; } .div2{ background-color: green; } .div3{ background-color: red; } .div4{ background-color: black; } </style> </head> <body> <div class = "div1"> <button onclick= "add()">add</button> hello div1</div> <div class = "div2"> <button onclick="del()">del</button> hello div2</div> <div class = "div3"> <button onclick="change()">change</button> hello div3</div> <div class = "div4">hello div4</div> <script> function change() { var img = document.createElement("img"); // img.setAttribute("src","4.jgp"); //与下一条命令作用相同 img.src = '4.jpg'; var ele = document.getElementsByTagName("p")[0]; var father = document.getElementsByClassName("div1")[0]; father.replaceChild(img,ele) } function add(){ var ele = document.createElement("p"); ele.innerHTML = "hello p"; //可除去内容 // ele.innerHTML = "<h1>hello p</h1>"; #此两处显示区别 // ele.innerText = "<h1>hello p</h1>"; // ele.style.color = "red"; #CSS样式 // ele.style.fontSize = "10px"; var father = document.getElementsByClassName("div1")[0]; father.appendChild(ele) } function del() { var father = document.getElementsByClassName("div1")[0]; var son = father.getElementsByTagName("p")[0]; father.removeChild(son) } </script> </body> </html>
模块对话框：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .content{ height: 1900px; background-color: aqua; } .shade{ position: fixed; //固定 top:0; left:0; right:0; bottom:0; background-color: burlywood; opacity: 0.35; //透明度 } .model{ width:200px; height: 200px; background-color: green; position: absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px; } .hide{ display:none; } </style> </head> <body> <div class = "content"> <button onclick="show()">show</button> hello </div> <div class = "shade hide">hehehe</div> <div class = "model hide"> <button onclick = "cancel()">cancle</button> </div> <script> function show(){ var ele_shade = document.getElementsByClassName("shade")[0]; var ele_model = document.getElementsByClassName("model")[0]; ele_model.classList.remove("hide"); ele_shade.classList.remove("hide") } </script> </body> </html>
表格框之正反选：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button onclick = "selectALL()">全选</button> <button onclick="Cancle()">取消</button> <button onclick="reverse()">反选</button> <hr> <table> <tr> <td><input type = "checkbox"></td> <td>111</td> <td>222</td> <td>333</td> </tr> <tr> <td><input type = "checkbox"></td> <td>111</td> <td>222</td> <td>333</td> </tr> <tr> <td><input type = "checkbox"></td> <td>111</td> <td>222</td> <td>333</td> </tr> </table> <script> function selectALL() { var inputs = document.getElementsByTagName("input"); for (var i = 0;i < inputs.length;i++){ input = inputs[i]; input.checked = true; } } function Cancle() { var inputs = document.getElementsByTagName("input"); for (var i = 0;i < inputs.length;i++){ input = inputs[i]; input.checked = false; } } function reverse() { var inputs = document.getElementsByTagName("input"); for (var i = 0;i < inputs.length;i++){ input = inputs[i]; input.checked = !input.checked; } } </script> </body> </html>
二级联动：（省份和市的选择）例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select id = "province"> <option value = "">请选择省份</option> </select> <select name = "" id = "citys"> <option value = "">请选择城市</option> </select> <script> data = { "河北省":["石家庄",'廊坊'], "山西省":['大同','太原'], "陕西省":['西安','延安'] } // console.log(data); // console.log(typeof data); // console.log(data['河北省']) var pro_ele = document.getElementById("province") var city_ele = document.getElementById("citys") for (var i in data){ var ele= document.createElement("option"); ele.innerHTML = i; console.log("hello") pro_ele.appendChild(ele) } pro_ele.onchange = function(){ console.log(this.selectedIndex) console.log(this.options[this.selectedIndex]) var citys = data[this.options[this.selectedIndex].innerHTML]; city_ele.options.length = 1; for (var i=0;i<citys.length;i++){ var ele = document.createElement("option"); ele.innerHTML = citys[i]; city_ele.appendChild(ele) } } </script> </body> </html>