上一节补充：弹性盒子 弹性盒子可用来做居中效果(推荐) display:flex
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height:80px; width:100px; border:1px solid blue; display:flex; align-items:center; justify-content: center; } .c1 img{ height:30px; width:30px; } </style> </head> <body> <div class="c1"> <span>你好</span> <img src="timg.jpeg" alt="图片无法加载"> </div> </body> </html>页面效果：
序列化和反序列化效果如下：
var 变量1=JSON.stringify(要序列化数据) //序列化 var 变量2=JSON.parse(要反序列化数据) //反序列化示例：
浏览器对象模型 window对象，浏览器的顶层对象
1）location.href 获取当前页面地址
2）跳转到某个网址 location.href=“要跳转地址”
3）刷新当前页面 location.reload()
1）基本用法：
var t=setTimeout(function(){console.log("xxx")},2000)示例：
两秒后展示console.log里的内容
2）循环定时展示内容：
var t=setIntervar(function(){console.log("xxx")},3000)执行结果：
每隔3秒生成一次console.log里的内容
清除定时器：clearInterval(t)
定时器不再计数。
计数器示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height:100px; width:100px; background-color:red; } .c2{ background-color:blue; } </style> </head> <body> <div id="d1" class="c1"></div> </body> <script> var t=setInterval(function(){ var a=document.getElementById("d1"); a.classList.toggle("c2") },1000) </script> </html>页面效果： 自动变色效果：
文档对象模型–html
示例：
直接查找选择器 元素选择器
var 变量=document.getElementsByTagName(标签);用上述方法取到的是一个标签数组，需用索引将具体标签取出：
类值选择器
var 变量=document.getElementsByClassName(类);同样需要通过索引取出标签 示例：
id选择器
var 变量=document.getElementById(id);示例：
间接查找选择器 查找下一个兄弟标签，并改色：
var h=document.getElementsByClassName('c1')[0]; h.nextElementSibling.style.color='red';示例：
找上一个兄弟标签：
h.previousElementSibling示例：
找第一个/最后一个子标签：
h.firstElementChild/lastElementChild;示例：
找寻所有子标签,返回数组：
h.children;示例：
找到自己的父级标签：
h.parentElement;示例：
1）innerText 获取文本内容（只获取文本内容，不获取标签）
var h=getElementsClassName('c1'); h.innerText;示例：
设置文本内容：
var h.innerText="修改内容";运行结果：
2）innerHTML 获取内容，连带标签都可以获取 可通过h.innerHTML设置文本
写法：
标签对象.value;示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 用户名：<input type="text" id="username" onblur="f1(this)"> <span id="error" style="color:red;font-size:12px"></span> </body> <script> var h=document.getElementById('d1'); function f1(ths){ var username=ths.value; if (username.length < 5){ var t=document.getElementById('error'); t.innerText="文本长度不足五位！" } } </script> </html>页面效果：
事件是指捕获用户的行为，触发相应的动作
常用事件： 1）onblur 失去光标时触发的事件 2）onfocus 获取光标时触发的事件 3）onclick 左键单击触发的事件 4）onchange 域内容发生变化时触发的的事件
类值操作：
var h=document.getElementById('id'); h.classList //查看类值 h.classList.add("新类值") //添加类值 h.classList.remove("类值") //删除类值 h.classList.toggle("类值") //类值存在删除，不存在添加style样式操作：
标签对象.style.backgroundColor="blue";onclick示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width:100px; height:100px; background-color:red } .c2{ background-color:blue } </style> </head> <body> <div id="d1" class="c1"></div> </body> <script> var a=document.getElementById('d1'); a.onclick=function f1(){ a.classList.toggle("c2"); } </script> </html>页面效果：点击鼠标左键时红蓝替换
示例：
