本文主要是介绍Day31，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Day31
DOM
操作内容
innerText、innerHTML
区别：设置的时候innerHTML设置内容会被认为是html语句，而innerText只是单纯的文本。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><button onclick="fun01()">获取属性 - innerText</button><button onclick="fun02()">设置属性 - innerText</button><br /><span>用良心做教育</span><br /><button onclick="fun03()">获取内容 - innerHTML</button><button onclick="fun04()">设置内容 - innerHTML</button><br /><span>用良心做教育</span><script type="text/javascript">var span01 = document.getElementsByTagName("span")[0];var span02 = document.getElementsByTagName("span")[1];function fun01(){console.log(span01.innerText);}function fun02(){span01.innerText = "<h1>做真实的自己</h1>";}function fun03(){console.log(span02.innerHTML);}function fun04(){span02.innerHTML = "<h1>做真实的自己</h1>";}</script></body> </html>
操作属性
两种方式：
1.直接属性=“…”，注意设置的时候大小里面不能写px。
2.getAttribute()和setAttribute()，这里可以有px。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><button onclick="fun01()">获取属性</button><button onclick="fun02()">设置属性</button><br /><img src="img/头像.jpg" width="100px" height="100px" /><br /><button onclick="fun03()">获取属性</button><button onclick="fun04()">设置属性</button><br /><img src="img/头像.jpg" width="100px" height="100px" /><script type="text/javascript">var img01 = document.getElementsByTagName("img")[0];var img02 = document.getElementsByTagName("img")[1];function fun01(){console.log(img01.src);console.log(img01.width);console.log(img01.height);}function fun02(){img01.src = "img/验证码1.png";img01.width = "200";//这里不能有pximg01.height = "200";}function fun03(){console.log(img02.getAttribute("src"));console.log(img02.getAttribute("width"));console.log(img02.getAttribute("height"));}function fun04(){img02.setAttribute("src","img/验证码1.png");img02.setAttribute("width","200");img02.setAttribute("height","200px");}</script></body> </html>
设置样式
标签.style.样式
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><button onclick="fun01()">获取样式</button><button onclick="fun02()">设置样式</button><h1>用良心做教育</h1><script type="text/javascript">var h1 = document.getElementsByTagName("h1")[0];function fun01(){console.log(h1.style.color);console.log(h1.style.fontSize);}function fun02(){h1.style.color = "red";h1.style.fontSize = "30px";}</script></body> </html>
DOM事件
单击事件
四种写法
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><h1 onclick="this.innerText='做真实的自己'">用良心做教育</h1></body> </html><!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><h1 onclick="fun()">用良心做教育</h1><script type="text/javascript">var h1 = document.getElementsByTagName("h1")[0];function fun(){h1.innerText = '做真实的自己';}</script></body> </html><!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><h1 onclick="fun(this)">用良心做教育</h1><script type="text/javascript">function fun(obj){obj.innerText = '做真实的自己';}</script></body> </html><!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><h1>用良心做教育</h1><script type="text/javascript">var h1 = document.getElementsByTagName("h1")[0];h1.onclick = function(){this.innerText = "做真实的自己";}</script></body> </html>
onload事件
js文件：
//页面加载事件 //当整个页面的html标签及图片资源全部加载完毕后触发的事件 window.onload = function(){var h1 = document.getElementsByTagName("h1")[0];h1.onclick = function(){this.innerText = "做真实的自己";} }页面加载：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="../../js/new_file.js" type="text/javascript" charset="utf-8"></script></head><body><h1>用良心做教育</h1></body> </html>
鼠标事件
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><img src="../../img/头像.jpg" width="100px" height="100px"onmousedown="myDown()"onmouseup="myUp()"onmousemove="myMove()"onmouseover="myOver()"onmouseout="myOut()"/><script type="text/javascript">//鼠标按下事件function myDown(){console.log("down");}//鼠标松开事件function myUp(){console.log("up");}//鼠标移动事件function myMove(){console.log("move");}//鼠标移进事件function myOver(){console.log("over");}//鼠标移出事件function myOut(){console.log("out");}</script></body> </html>案例1：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">img{width: 100px;height: 100px;opacity: 0.3;}</style></head><body><img src="../../img/1.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/2.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/touxiang01.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/touxiang02.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/touxiang03.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/tx1.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/tx2.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/tx3.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><script type="text/javascript">function myOver(obj){obj.style.opacity = 1;}function myOut(obj){obj.style.opacity = 0.3;}</script></body> </html>案例2：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">img{width: 100px;height: 100px;opacity: 0.3;}</style></head><body><img src="../../img/1.jpg"/><img src="../../img/2.jpg"/><img src="../../img/touxiang01.jpg"/><img src="../../img/touxiang02.jpg"/><img src="../../img/touxiang03.jpg"/><img src="../../img/tx1.jpg"/><img src="../../img/tx2.jpg"/><img src="../../img/tx3.jpg"/><script type="text/javascript">var imgs = document.getElementsByTagName("img");//循环绑定指定事件for(var i = 0;i<imgs.length;i++){var img = imgs[i];img.onmouseover = function(){this.style.opacity = 1;}img.onmouseout = function(){this.style.opacity = 0.3;}}</script></body> </html>
键盘事件
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><input type="text"onkeydown="myDown()"onkeypress="myPress()"onkeyup="myUp()"/><script type="text/javascript">//键盘按下事件function myDown(){console.log("down");}//键盘按下事件(输入无效内容是不会触发该事件，ps：删除键、上下左右键)function myPress(){console.log("press");}//键盘松开事件function myUp(){console.log("up");}</script></body> </html>案例：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><input type="text"onkeyup="myUp(this)"/><script type="text/javascript">function myUp(obj){var str = obj.value;str = str.toUpperCase();//转大写obj.value = str;}</script></body> </html>
焦点事件
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><input type="text"onfocus="myFocus()"onblur="myBlur()"/><script type="text/javascript">//获取焦点事件function myFocus(){console.log("focus");}//失去焦点事件function myBlur(){console.log("blur");}</script></body> </html>
DOM节点
操作节点
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><button onclick="addP()">添加p标签</button><button onclick="addImg()">添加img标签</button><button onclick="deleteImg()">删除img标签</button><div id="manager"></div><script type="text/javascript">function addP(){//创建标签 -- <p></p>var p = document.createElement("p");//创建内容 -- 用良心做教育var text = document.createTextNode("用良心做教育");//将内容添加到标签中 -- <p>用良心做教育</p>p.appendChild(text);//将标签添加到div中manager.appendChild(p);}function addImg(){//创建标签 -- <img></img>var img = document.createElement("img");//设置属性img.setAttribute("src","../../img/1.jpg");img.setAttribute("width","100px");img.setAttribute("height","100px");//创建标签 -- <br></br>var br = document.createElement("br");//将标签添加到div中manager.appendChild(img);manager.appendChild(br);}function deleteImg(){//获取需要删除的元素var img = document.getElementsByTagName("img")[0];var br = document.getElementsByTagName("br")[0];//通过父级标签删除子级标签manager.removeChild(img);manager.removeChild(br);}</script></body> </html>
节点案例
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><table border="1" width="300px"><tr><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th></tr><tr><td>希</td><td>女</td><td>23</td><td><button onclick="fun(this)">删除</button></td></tr><tr><td>空</td><td>女</td><td>21</td><td><button onclick="fun(this)">删除</button></td></tr><tr><td>丽</td><td>女</td><td>18</td><td><button onclick="fun(this)">删除</button></td></tr><tr><td>宇</td><td>男</td><td>21</td><td><button onclick="fun(this)">删除</button></td></tr><tr><td>康</td><td>男</td><td>22</td><td><button onclick="fun(this)">删除</button></td></tr></table><script type="text/javascript">function fun(obj){var tr = obj.parentNode.parentNode;var table = tr.parentNode;table.removeChild(tr);}</script></body> </html>
DOM案例
简单计算器
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><input type="text" id="text01" />+<input type="text" id="text02" /><button onclick="add()">=</button><input type="text" id="text03" /><script type="text/javascript">function add(){var result = parseInt(text01.value) + parseInt(text02.value);text03.value = result;}</script></body> </html>
级联下拉列表
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><select id="province"><option value="sc">四川</option><option value="hn">湖南</option><option value="hb">湖北</option></select>省<select id="city"><option>成都</option><option>绵阳</option><option>雅安</option><option>眉山</option><option>自贡</option><option>攀枝花</option></select><script type="text/javascript">//改变事件province.onchange = function(){if(this.value == "sc"){updateCity(["成都","绵阳","雅安","眉山","自贡","攀枝花"]);}else if(this.value == "hn"){updateCity(["长沙","岳阳","湘潭","娄底"]);}else if(this.value == "hb"){updateCity(["武汉","咸宁","襄阳","黄冈","仙桃"]);}}function updateCity(cityArr){city.length = 0;//清空for(var i = 0;i<cityArr.length;i++){option = document.createElement("option");option.innerText = cityArr[i];city.appendChild(option);}}</script></body> </html>
BOM
window对象
location
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><button onclick="fun01()">跳转指定页面</button><button onclick="fun02()">刷新页面</button><script type="text/javascript">function fun01(){ // window.location.href="https://www.baidu.com"; // location.href = "https://www.baidu.com";location = "https://www.baidu.com";}function fun02(){window.location.reload();}</script></body> </html>
history
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><button onclick="fun01()">前两页</button><button onclick="fun02()">前一页</button><button onclick="fun03()">刷新页面</button><button onclick="fun04()">后一页</button><button onclick="fun05()">后两页</button><script type="text/javascript">function fun01(){window.history.go(-2);}function fun02(){ // window.history.go(-1);window.history.back();}function fun03(){window.history.go(0);}function fun04(){ // window.history.go(1);window.history.forward();}function fun05(){window.history.go(2);}</script></body> </html>
open
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">window.open("http://www.baidu.com","百度");</script></body> </html>
各种弹框
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><button onclick="fun01()">警告框</button><button onclick="fun02()">确认框</button><button onclick="fun03()">提示框</button><script type="text/javascript">function fun01(){alert("警告");}function fun02(){var bool = confirm("确认");//确认返回的是true，取消返回的是falseconsole.log(bool);}function fun03(){var v = prompt("提示","默认值");//返回输入的值，如果直接确认返回的是默认值，清空返回空字符，取消返回nullconsole.log(v);}</script></body> </html>
定时器
setTimeout():时间结束后执行一次函数。
用setTimeout（function(){},毫秒数）;来设置定时器，同时返回一个函数对象，将此对象传入clearTimeout（）函数中可以进行定时器的取消。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><img src="../../img/头像.jpg" width="100px" height="100px" /><button onclick="myClear()">取消定时器</button><script type="text/javascript">var img = document.getElementsByTagName("img")[0];var timeout = setTimeout(function(){img.setAttribute("src","../../img/验证码1.png");},5000);function myClear(){clearTimeout(timeout);}</script></body> </html>setInterval():时间结束后重复执行函数。
并返回一个函数对象，将此对象传入clearInterval（）函数中可以进行定时器的取消。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><button onclick="myClear()">取消定时器</button><script type="text/javascript">var interval = setInterval(function(){console.log("初心至善");},1000);function myClear(){clearInterval(interval);}</script></body> </html>定时器案例
1.实现页面的自动跳转
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">span{color:red;}</style></head><body><h1>注册成功，<span>3</span>秒后自动跳转到<a href="http://www.baidu.com">百度</a></h1><script type="text/javascript">var span = document.getElementsByTagName("span")[0];setInterval(function(){var text = span.innerText;if(text>1){text--;span.innerText = text;}else{window.location="http://www.baidu.com";}},1000);</script></body> </html>2.做一个时钟的效果
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><h1></h1><script type="text/javascript">var h1 = document.getElementsByTagName("h1")[0];setInterval(function(){showTime();},1000);function showTime(){var date = new Date();var hour = date.getHours();var minute = date.getMinutes();var second = date.getSeconds();var time = hour + ":" + minute + ":" + second;h1.innerText = time;}showTime();//确保一直使用这个函数，不会因为刷新而中断。</script></body> </html>3.实现图片的定时切换
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><img src="../../img/头像.jpg" width="100px" height="100px"/><script type="text/javascript">var paths = ["头像.jpg","验证码1.png","验证码2.png"];var index = 0;var img = document.getElementsByTagName("img")[0];setInterval(function(){img.setAttribute("src","../../img/"+paths[index]);index++; if(index == paths.length){index =0;}},1000);</script></body> </html>
JS对象
创建对象，设置对象属性、对象方法
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">var stu = new Object();stu.name = "张三";stu.age = 24;stu.printInfo = function(){alert(this.name + "---" + this.age);};stu.printInfo();</script></body> </html>使用json格式创建
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">var stu = {name :"张三",age : 24,printInfo : function(){alert(this.name + "-" + this.age);}}stu.printInfo();</script></body> </html>使用函数创建对象（类似于java的有参构造）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">function Student(name,age){this.name = name;this.age = age;}Student.prototype.printInfo = function(){alert(this.name + "--"+ this.age);}var stu = new Student("张三",24);stu.printInfo();for(var v in stu){console.log(v);}</script></body> </html>
cookie
知识点：Cookie
理解：存储在当前浏览器下，按照域名以键值对存储的纯文本数据
注意：
1.浏览器之间的Cookie数据不能共享
2.同一个浏览器下多个域名之间的Cookie数据不能共享
3.同一个浏览器当前域名下的多个页面可以共享Cookie数据<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><button onclick="fun01()">添加Cookie</button><button onclick="fun02()">删除Cookie</button><button onclick="fun03()">修改Cookie</button><button onclick="fun04()">查询Cookie</button><script type="text/javascript">function fun01(){var date = new Date();date.setTime(date.getTime()+1000*60*60*24*10);document.cookie = "username=hhy;expires=" + date.toGMTString();document.cookie = "password=123123;expires=" + date.toGMTString();}function fun02(){var date = new Date();date.setTime(date.getTime());document.cookie = "username=hhy;expires=" + date.toGMTString();document.cookie = "password=123123;expires=" + date.toGMTString();}function fun03(){var date = new Date();date.setTime(date.getTime()+1000*60*60*24*10);document.cookie = "username=xiaohong;expires=" + date.toGMTString();document.cookie = "password=123456;expires=" + date.toGMTString();}function fun04(){alert(document.cookie);}</script></body> </html>封装：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><button onclick="fun01()">添加Cookie</button><button onclick="fun02()">删除Cookie</button><button onclick="fun03()">修改Cookie</button><button onclick="fun04()">查询Cookie</button><script type="text/javascript">function fun01(){var date = new Date();date.setTime(date.getTime()+1000*60*60*24*10);document.cookie = "username=hhy;expires=" + date.toGMTString();document.cookie = "password=123123;expires=" + date.toGMTString();}function fun02(){var date = new Date();date.setTime(date.getTime());document.cookie = "username=hhy;expires=" + date.toGMTString();document.cookie = "password=123123;expires=" + date.toGMTString();}function fun03(){var date = new Date();date.setTime(date.getTime()+1000*60*60*24*10);document.cookie = "username=xiaohong;expires=" + date.toGMTString();document.cookie = "password=123456;expires=" + date.toGMTString();}function fun04(){alert(document.cookie);}function updateCookies(key,value,time){var date = new Date();date.setTime(date.getTime()+time);document.cookie = key + "=" + value + ";expires=" + date.toGMTString();}function queryCookies(key){var cookies = document.cookie.split(";");for(var cookie in cookies){var cookieKey = cookie.trim().split("=")[0];var cookieValue = cookie.trim().split("=")[1];if(key == cookieKey){return cookieValue;}}return null;}</script></body> </html>
这篇关于Day31的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
