前端全栈学习第十五天-js高级-第五天 川长思鸟来 2021-09-18 16:06 331阅读 0赞 1:拷贝 2:遍历DOM树 3:正则 1:拷贝 1.1浅拷贝:将一个对象的使用内容直接复制给另外一个对象 (function () { var obj1 = { age: 12, name: "小敏", sex: "男" }; var obj2 = {}; //首先要有这个对象,只不过他是空的需要赋值 function v(a, b) { for (var key in a) { b[key] = a[key]; } } v(obj1, obj2);//这里注意传值的顺序 console.dir(obj1); console.dir(obj2); }()); 1.2深拷贝: (function () { var obj1 = { name: "小明", car: ["奥迪", "奔驰", "大众"], eat: { name: "哈哈", age: 12 } } var obj2 = {}; function v(a, b) { for (var key in a) { var item = a[key]; //先获取a属性中的每个值 // 判断每个数组的值是什么 if (a instanceof Object) { b[key] = {}//是什么就添加什么属性 v(item, b[key]); } else if (a instanceof Array) { b[key] = []; v(item, b[key]); } else { b[key] = item; } } } v(obj1, obj2); console.dir(obj1); console.dir(obj2); }()); 深拷贝和浅拷贝的区别在于,浅拷贝不管你要不要,给给你,深拷贝是你需要什么,给你什么 2遍历dom树 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>遍历DOM树</title> </head> <body> <h1>遍历 DOM 树</h1> <p style="color: green;">Tip: 可以在遍历的回调函数中任意定制需求</p> <div> <ul> <li>123</li> <li>456</li> <li>789</li> </ul> <div> <div> <span>haha</span> </div> </div> </div> <div id="demo_node"> <ul> <li>123</li> </ul> <p>hello</p> <h2>world</h2> <div> <p>dsa</p> <h3> <span>dsads</span> </h3> </div> </div> </body> <script> //获取页面的根节点 var root = document.documentElement //html function forDOM(root1) { // f1(root1); //获取根节点中的子节点 var childern = root1.children; forChildren(childern); } function forChildren(children) { for (var i = 0; i < children.length; i++) { var child = children[i]; f1(child); child.children && forDOM(child); } } forDOM(root); function f1(node) { console.log("节点的名字是:" + node.nodeName); } //function forDOM(root1){ // console.log("节点的名字是:"+root1.nodeName); //} // forDOM(root); // //两个方法比较着看吧 </script> </html> 3:正则 3.1元字符 * 0-多个 [0,] + 1-多 [1,] ? 0-1 [0,1] () 优先 ^ 开始 ,非 $ 结束 \d 数字 \D 非数字 \w 包括数字,字母,下划线 \W 非 \s 任何不可见 \S 任何可见 (function () { var reg = /\d{1,5}/ var R = reg.test("我今年5123岁") console.log(R); }()); console.log("+++++++++++++++++"); (function () { console.log(/[a-z]{2,3}/.test("asdf")); }()); console.log("+++++++++++++++++"); (function () { var reg = new RegExp(/\d{5}/); var str = "我55555"; console.log(reg.test(str)); }()); 验证密码强度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> #dv { width: 300px; height: 200px; position: absolute; left: 300px; top: 100px; } .strengthLv0 { height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; } .strengthLv1 { background: red; height: 6px; width: 40px; border: 1px solid #ccc; padding: 2px; } .strengthLv2 { background: orange; height: 6px; width: 80px; border: 1px solid #ccc; padding: 2px; } .strengthLv3 { background: green; height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; } </style> <body> <div id="dv"> <label for="pwd">密码</label> <input type="text" id="pwd" maxlength="16"><!--课外话题--> <div> <em>密码强度:</em> <em id="strength"></em> <div id="strengthLevel" class="strengthLv0"></div> </div> </div> <script src="../../common.js"></script> <script> //文本框内鼠标抬起,显示密码强度 my$("pwd").onkeyup = function () { //如果密码 长度小于6,没必要判断 my$("strengthLevel").className = "strengthLv" + (this.value.length >= 6 ? getPsd(this.value) : 0); } // if(this.value.length>=6){ // var lvl = getPsd(this.value); // my$("strengthLevel").className ="strengthLv"+lvl; // } // else{ // my$("strengthLevel").className ="strengthLv0"; // // } // } // if (this.value.length >= 6) { // var lvl = getPsd(this.value); // } // if (lvl == 1) { // my$("strengthLevel").className = "strengthLv1" // } // else if (lvl == 2) { // my$("strengthLevel").className = "strengthLv2" // // } // else if (lvl == 3) { // my$("strengthLevel").className = "strengthLv3" // // }else{ // my$("strengthLevel").className = "strengthLv0" // // } // // } // 给我密码,返回级别 function getPsd(psd) { var lvl = 0; //默认0级 if (/[0-9]/.test(psd)) { lvl++; } if (/[a-zA-Z]/.test(psd)) { lvl++; } if (/\W/.test(psd)) { lvl++; } return lvl; //1-3 } </script> </body> </html> 验证邮箱 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> 请输入邮箱: <input type="text" value="" id="email"/> <script src="../../common.js"></script> <script> /* * 输入的是邮箱,为绿色。不是邮箱,为红色 * */ // 获取文本框id,注册鼠标失去焦点事件 my$("email").onblur = function () { var reg = /^[0-9a-zA-Z]+[@][0-9a-zA-Z]+([.][a-zA-Z]+){1,2}$/; if (reg.test(this.value)) { this.style.color = "green"; } else { this.style.color = "red"; } } </script> </body> </html>
还没有评论,来说两句吧...