前端javascript的DOM对象操作技巧，全场景解析（一）：https://developer.aliyun.com/article/1497182
4.隐藏显示密码效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>隐藏显示密码效果</title> </head> <body> <input type="password" name="pwd" value="111" class="abcd" /> <button onclick="change()" id="btn" >点我显示密码</button> <div> <img src="images/oneal1.jpg" /> </div> <script> // 效果1: 显示隐藏密码 var password = document.querySelector("input[name=pwd]") console.log(password); // 标签里面的属性叫什么可以写什么，就获取到什么 console.log(password.type); console.log(password.name); console.log(password.value); console.log(password.className)
获取到标签以后，可以获取到里面的所有属性
function change(){ var btn = document.querySelector("#btn") console.log(btn); if(password.type=="password"){ password.type = "text"; btn.innerHTML = "点我隐藏密码"; }else{ password.type= "password"; btn.innerHTML = "点我显示密码"; } } // 效果2:点击换图片 var img = document.querySelector("img"); console.log(img) // 给图片添加点击事件，这个img是上面获取的img对象 img.onclick = function(){ console.log(img.src) // http://127.0.0.1:5500/images/oneal1.jpg var arr = img.src.split("/") imgname = arr[arr.length - 1] console.log(arr , imgname); if(imgname == "oneal1.jpg"){ img.src = "images/bakeli.jpg"; }else{ img.src = "images/oneal1.jpg"; } }
</script> </body> </html>
5.全选 反选 全不选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全选,反选,不选</title> <style> * {margin:0px;padding:0px;} ul {list-style: none;} #ul1 li {float:left;} #ul1 li button {width:80px;height:30px;} #ul1 li button:hover {background-color: tan;} #ul2 {clear:both;} </style> </head> <body> <ul id="ul1"> <li><button>全选</button></li> <li><button>不选</button></li> <li><button>反选</button></li> </ul> <ul id="ul2"> <li><input type="checkbox" /> 看电影 </li> <li><input type="checkbox" /> 吃面 </li> <li><input type="checkbox" /> 烫头 </li> <li><input type="checkbox" /> 跑步 </li> <li><input type="checkbox" /> 篮球 </li> </ul> <script> // 获取btn节点对象 var btn1 = document.querySelector("#ul1 li:nth-child(1) button"); var btn2 = document.querySelector("#ul1 li:nth-child(2) button"); var btn3 = document.querySelector("#ul1 li:nth-child(3) button"); // 全选 btn1.onclick = function(){ // 获取#ul2 li 里的input /* 此法现在不推荐使用 var data_lst = document.getElementById("ul2").getElementsByTagName("input"); console.log(data_lst) */ var data_lst = document.querySelectorAll("#ul2 li input"); console.log(data_lst) //这里获取的是数组
// 获取数组当中每一个input节点元素对象 for(var input of data_lst){ //console.log(input.checked) // 设置节点input的checked属性为true; input.checked = true; } } // 不选 btn2.onclick = function(){ var data_lst = document.querySelectorAll("#ul2 li input"); console.log(data_lst) // 获取数组当中每一个input节点元素对象 for(var input of data_lst){ //console.log(input.checked) // 设置节点input的checked属性为false; input.checked = false; } } // 反选 btn3.onclick = function(){ var data_lst = document.querySelectorAll("#ul2 li input"); console.log(data_lst) // 获取数组当中每一个input节点元素对象 for(var input of data_lst){ 根据原来的值判断，取反，实现反选 if(input.checked === true){ input.checked = false; }else{ input.checked = true; } } }
</script> </body> </html>
6.js控制css属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js控制css的相关属性</title> <style> .box {border:solid 1px red;} .box_new {position: absolute; left:200px;} </style> </head> <body> <button id="box1">点击我换颜色</button> <button id="box2">点击我隐藏</button> <button id="box3">点击我显示</button> <button id="box4">点击边框换圆角</button> <button id="box5">点击加样式</button> <div class="box" style="width:300px;height:200px;background-color: yellow;font-size:40px;">你好评</div> <script> var box = document.querySelector(".box"); console.log(box); 获取所有样式，里面属性字段采用小驼峰命名方式 console.log(box.style);
// js的dom对象获取相关的css属性
// 获取方法一，js里面的css属性遇到多单词使用小驼峰命名
console.log(box.style.width);
console.log(box.style.backgroundColor); 
如果按css的命名方式取值，则会取不到
// 获取方法二，使用css方式获取属性值，按照css的命名方式
console.log(box.style[“width”]);
console.log(box.style[“background-color”]);
console.log(box.style[“font-size”]);
上面两种方式只能获取内联的行内样式，获取不到外部引入的，写在head标签里面style里面的样式信息
内联的样式可以获取到
style引入的获取不到
// 获取方法三 getComputedStyle 获取该节点对象的所有样式，这种方式不管样式是外面css文件引入还是style内部引入，内联写入的css样式都可以获取到 获取的时候，用该方法获取，修改的时候用上面两种方式修改 console.log( window.getComputedStyle(box)["font-size"] , "<===getComputedStyle===>"); console.log( window.getComputedStyle(box).fontSize , "<===getComputedStyle===>");
获取所有样式
通过该方法获取的属性值为字符串类型
// 事件绑定，前两种获取方式常在修改的时候使用，优先级最高 var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); var box3 = document.getElementById("box3"); var box4 = document.getElementById("box4"); var box5 = document.getElementById("box5"); box1.onclick = function(){ box.style.backgroundColor = "red"; } box2.onclick = function(){ box.style.display = "none"; } box3.onclick = function(){ box.style.display = "block"; } //缓慢变圆角，方法一： box4.onclick = function(){ //box.style.borderRadius = "100%"; var point = 0; var t = setInterval( function(){ box.style.borderRadius = `${point}%`; if(point < 100){ point++; }else{ clearInterval(t) console.log("结束了... ") } } , 50) } // 方法二，先定义一个睡眠函数，借助async函数 function sleep(time){ return new Promise((resolve) => setTimeout(resolve, time)); } box4.onclick = async function(){ for (var point = 0; point< 100; point++){ box.style.borderRadius = `${point}%`; await sleep(20); } }
如果要控制标签button能否被点击，可以控制button的disbaled属性
/* 重点 添加样式，提前设置好样式，点击事件触发该样式，取消样式把相关样式设为空即可*/ box5.onclick = function(){ // box.className = "box box_new"; 加等赋值前面必须要有空格，不然多个名字重叠到一块，不生效 box.className += " box_new"; }
</script> </body> </html>
7.js事件
JavaScript常见的事件大体分类及常用事件：
1）鼠标事件
事件 说明
onclick 鼠标单击事件
onmouseover 鼠标移入事件
onmouseout 鼠标移出事件
onmousedown 鼠标按下事件
onmouseup 鼠标松开事件
onmousemove 鼠标移动事件
2）键盘事件
onkeydown 键盘按下
onkeyup 键盘松开
3）表单事件
onfocus 获取焦点时触发
onblur 失去焦点时触发
onselect 选中“单行文本框”或“多行文本框”中的内容时
onselectstart 开始一个新的选择时
onchange 具有多个选项的表单元素选择某一项时触发
onsubmit ：确认按钮被点击。
onreset： 重置按钮被点击
4）编辑事件
oncopy 复制（拷贝）时触发
onselect 页面内容被选取时触发
oncontextmenu 按下鼠标右键时触发
5）页面事件
onload 文档加载完成后触发
onbeforeunload 离开页面之前触发
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js事件</title> <style> *{margin:0px;padding:0px;} .box {width:100px;height:100px;background: green;position: absolute;left:0px;} </style> </head> <body> <!-- 1.事件的静态绑定 --> <button onclick="func1()">按钮1</button> <div class="box"></div> <script> 先获取节点对象 var box = document.getElementsByClassName("box")[0]; var t; console.log(box); function func1(){ var left = parseInt(window.getComputedStyle(box).left) console.log(left ,typeof(left)); // console.log(box.style.left); t = setInterval(function(){ left += 10; box.style.left = `${left}px`; } , 50) } // 2.事件的动态绑定 使用语法：节点对象.事件类型 = 功能函数 // onmouseover 鼠标指针悬停在指定元素上时触发 box.onmouseover = function(){ clearInterval(t); } // onmouseout 鼠标指针离开指定元素时触发 box.onmouseout = function(){ func1() } </script> </body> </html>
8.js模态框
弹出一个页面，只能点击弹出的页面，后面的页面点不动，也叫遮罩层
比如淘宝的注册页面
<!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 { position:fixed; width:100%; height:100%; top:0px; background-color: greenyellow; display: none; } .content { border:solid 1px red; width:500px; height:500px; background-color:tan; margin:auto; margin-top:14%; } </style> </head> <body> <button id="login">登录</button> <div class="box"> <div class="content" > <span class="close">X</span> <br /> <span>账号: <input type="text" /></span> <br / > <span>密码: <input type="password" /></span> </div> </div> <script> var btn = document.getElementById("login"); var box = document.querySelector(".box"); var close = document.querySelector(".close"); btn.onclick = function(){ console.log(11) box.style.display = "block"; } close.onclick = function(){ box.style.display = "none"; } </script> </body> </html>
点击登录按钮，显示登录界面，// 点击x,关闭登录界面
