DOM用法(二)
一、DOM 控制class
classList ：以数组形式,获取该节点元素所有的class样式
remove ：移除类
add ：添加类
contains： 判断是否包含某个类选择器
toggle ：没有就添加.有则删无则加
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>控制class选择器</title> <style> .c1 {width:400px;height:400px;border-radius: 400px;} .bg_red {background: red;} .bg_green {background: green;} </style> </head> <body> <button>点击</button> <div id="box" class="c1 bg_red bg_green"></div> <script> var div = document.getElementById("box") console.log(div) // 以数组形式,获取该节点元素所有的class样式 console.log(div.classList) // remove 移除bg_green类选择器 div.classList.remove("bg_green") // add 添加bg_green类选择器 div.classList.add("bg_green") // 判断是否包含某个类选择器 console.log(div.classList.contains("bg_green")) btn = document.querySelector("button") btn.onclick = function(){ // 有这样class选择器就删除,没有就添加.有则删无则加; div.classList.toggle("bg_green") } </script> </body> </html>
二、事件
2.1 onmouseover/onmouseout移入移出事件
- onmouseover： 鼠标移到某元素之上触发事件
- onmouseout ：鼠标从某元素移开触发事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>onmouseover/onmouseout移入移出事件</title> <style> * {margin:0px;padding:0px;} #box {width:100px;height:100px;background: red;position:absolute;left:0px;} </style> </head> <body> <!-- https://www.w3school.com.cn/jsref/dom_obj_event.asp 事件手册--> <!-- 事件静态绑定 --> <button onclick="func()">点击</button> <div id="box" ></div> <script> var box = document.querySelector("#box") function func(){ var left = parseInt(window.getComputedStyle(box).left) console.log(left , typeof(left)) id = setInterval(function(){ left += 1 box.style.left = `${left}px`; },50) } // 事件动态绑定 // onmouseover 鼠标移到某元素之上触发事件 box.onmouseover = function(){ clearInterval(id) } // onmouseout 鼠标从某元素移开触发事件 box.onmouseout = function(){ func() } </script> </body> </html>
2.2 遮罩层/模态框效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>遮罩层/模态框效果</title> <style> #box { width:100%;height:100%; background-color: black; position:fixed;top:0px; /* 设置透明度 */ opacity: 0.7; display: none; } #content { border:solid 1px red; width:300px; height:300px; background-color: cornflowerblue; margin:15% auto ; } #close {cursor: pointer;} </style> </head> <body> <button id="login">点我</button> <div id="box"> <div id="content"> <div id="close">x</div> <img src="./quanquan.gif" alt="" width=100 > </div> </div> <script> var btn = document.querySelector("#login") var box = document.querySelector("#box") var close = document.querySelector("#close") btn.onclick = function(){ box.style.display = "block" } close.onclick = function(){ box.style.display = "none" } </script> </body> </html>
2.3 onfocus/onblur聚焦事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>onfocus/onblur聚焦事件</title> </head> <body> <input type="text" value="请输入内容" class="ceshi" > <script> var input = document.querySelector(".ceshi") console.log(input) // onfocus元素获得焦点触发事件 input.onfocus = function(){ console.log(1) input.value = "" } // onblur元素失去焦点触发事件 input.onblur = function(){ if(!input.value){ input.value = "请输入内容" } } </script> </body> </html>
2.4 onchange 事件
省市区三级联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>onchange 省市区三级联动</title> </head> <body> <!-- 第一个下拉框 --> <select name="" id="d1"> <option value="" disabled selected>---请选择---</option> </select> <!-- 第二个下拉框 --> <select name="" id="d2"> </select> <script> data = { "河北" :["石家庄","邢台","廊坊","保定","张家口"], "北京" :["大兴","朝阳","顺义","海淀"], "辽宁" :["沈阳","大连","葫芦洞","锦州"], "深圳" :["南山","福田","龙岗","光明"] } var d1 = document.querySelector("#d1") var d2 = document.querySelector("#d2") console.log(d1) // 循环插入option 到 select下拉框中 for(var i in data){ var option = document.createElement("option") // 在option中插入城市名 (给用户看的) option.innerHTML = i // 在value中插入城市名(给后台看的) option.value = i // 插入节点 d1.appendChild(option) } d1.onchange = function(){ console.log(d1.value) var current_opt = d1.value // 北京 // 获取对应的数组 var citylist = data[current_opt] console.log(citylist) var string = "<option disabled selected >--请选择--</option>" // 将标签文本直接放进去 d2.innerHTML = string; for(var i = 0 ; i < citylist.length;i++){ console.log(i) // citylist[i]获取区域名字 var current_city = citylist[i] var option = document.createElement("option") // 在option中插入城市名 (给用户看的) option.innerHTML = current_city // 在value中插入城市名(给后台看的) option.value= current_city // 插入到select下拉框中 d2.appendChild(option) } } </script> </body> </html>
2.5 onload事件 与 BOM对象location
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> onload事件 与 BOM对象location </title> </head> <body> <button onclick="func1()">查看location</button> <button onclick="func2()">跳转页面</button> <button onclick="func3()">刷新页面</button> <button onclick="func4()">过一秒刷新页面</button> <script> function func1(){ console.log(location) /* 地址: 协议 http:// ip + 端口号 + 路径 + 参数 + 锚点 */ console.log(location.protocol) // 协议 console.log(location.hostname) // ip console.log(location.port) // 端口 console.log(location.pathname) // 文件路径 console.log(location.hash) // 获取锚点 console.log(location.search) // 获取地址参数 console.log(location.href) // 获取完整地址 } function func2(){ location.href = "http://www.baidu.com" } function func3(){ location.reload(); } function func4(){ setTimeout(func3,1000) } // 每过一秒刷新一下页面 // 触发时机: 等待页面所有内容[文字,图片,连接]加载完毕之后,再去执行对应代码 window.onload = function(){ console.log(1111) func4() } </script> </body> </html>
