JS膏集05
1、复习
闭包内的函数也可以使用参数
闭包的建议写法
)
2、浅拷贝
相当于把一个对象中的所有的内容复制一份给另一个对象。直接复制。
或者说，就是把一个对象的地址给了另一个对象，它们指向相同，有共同的属性和方法。
3、深拷贝
把一个对象中所有的属性和方法，一个一个找到，并且在另一个对象中开辟相应的空间，一个一个地存储到新对象中。
代码
4、遍历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>
<script>
//获取页面中的根节点--根标签
var root=document.documentElement;//html
//函数遍历DOM树
//根据根节点,调用fn的函数,显示的是根节点的名字
function forDOM(root1) {
//调用f1,显示的是节点的名字
// f1(root1);
//获取根节点中所有的子节点
var children=root1.children;
//调用遍历所有子节点的函数
forChildren(children);
}
//给我所有的子节点,我把这个子节点中的所有的子节点显示出来
function forChildren(children) {
//遍历所有的子节点
for(var i=0;i<children.length;i++){
//每个子节点
var child=children[i];
//显示每个子节点的名字
f1(child);
//判断child下面有没有子节点,如果还有子节点,那么就继续的遍历
child.children&&forDOM(child);
}
}
//函数调用,传入根节点
forDOM(root);
function f1(node) {
console.log("节点的名字:"+node.nodeName);
}
//节点:nodeName,nodeType,nodeValue
// 第一个函数:给我根节点,我会找到所有的子节点:forDOM(根节点)
// 获取这个根节点的子节点
// var children=根节点的.children
// 调用第二个函数
//
// 第二个函数:给我所有的子节点,我把每个子节点的名字显示出来(children)
// for(var i=0;i<children.length;i++){
// 每个子节点
// var child=children[i];
// f1(child);给我节点,我显示该节点的名字
// child是子节点,但是如果child里面还有子节点,此时child就是爹了
// child.children&&第一个函数(child)
//
// }
</script>
</body>
</html>
2、正则表达式
1）主要作用是匹配字符串的
2)在大多数变成语言中都可以使用
是由元字符或者限定字符组成的一个式子
3）元字符：
MDN中可查询
在非严格模式下均为非严格匹配，只要字符串中有正则表达式的相关内容即可，不用一模一样
4）限定符
空白符包括tab键与空格、
5）正则表达式练习
找规律，不追求完美
[0-9xX]0-9中数字的一个或者是x或X
6)创建正则表达式对象
可通过构造函数或者是字面量的方式来创建对象
var reg=new RegExp();//创建完毕没有正则表达式的对象
创建对象的括号内：/所需要的正则表达式/
要写在斜杠内以便正确解析
通过字面量的方式创建正则表达式对象：
最简单的写法：
7）识别正则表达式的匹配结果
案例：验证密码强中弱
<!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 () {
//每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
//如果密码的长度是小于6的,没有必要判断
// if(this.value.length>=6){
// var lvl= getLvl(this.value);
// my$("strengthLevel").className="strengthLv"+lvl;
// }else{
// my$("strengthLevel").className="strengthLv0";
// }
my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0);
};
//给我密码,我返回对应的级别
function getLvl(pwd) {
var lvl=0;//默认是0级
//密码中是否有数字,或者是字母,或者是特殊符号
if(/[0-9]/.test(pwd)){
lvl++;
}
//判断密码中有没有字母
if(/[a-zA-Z]/.test(pwd)){
lvl++;
}
//判断密码中有没有特殊符号
if(/[^0-9a-zA-Z_]/.test(pwd)){
lvl++;
}
return lvl;//最小的值是1,最大值是3
}
</script>
<script>
/*
*
* 密码: 数字,字母,特殊符号
*
* 密码: 只有数字- 或者是只有字母,或者是只有特殊符号---1级---弱
* 两两组合: 数字和字母, 数字和特殊符号, 字母和特殊符号 -----2级----中
* 三者都有: 数字和字母和特殊符号------3级-----强
*
* */
// //获取文本框注册键盘抬起事件
// my$("pwd").onkeyup=function () {
// //每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
// //如果密码的长度是小于6的,没有必要判断
// if(this.value.length>=6){
// var lvl=getLvl(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";
// }
// }else{
// my$("strengthLevel").className="strengthLv0";
// }
//
//
// };
//
// //给我密码,我返回对应的级别
// function getLvl(pwd) {
// var lvl=0;//默认是0级
// //密码中是否有数字,或者是字母,或者是特殊符号
// if(/[0-9]/.test(pwd)){
// lvl++;
// }
// //判断密码中有没有字母
// if(/[a-zA-Z]/.test(pwd)){
// lvl++;
// }
// //判断密码中有没有特殊符号
// if(/[^0-9a-zA-Z_]/.test(pwd)){
// lvl++;
// }
// return lvl;//1 3
// }
//
</script>
</body>
</html>
//案例：验证用户输入的是否为邮箱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
请您输入邮箱地址:<input type="text" value="" id="email"/> *<br/>
<script>
//如果输入的是邮箱,那么背景颜色为绿色,否则为红色
//获取文本框,注册失去焦点的事件
document.getElementById("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.backgroundColor = "green";
} else {
this.style.backgroundColor = "red";
}
};
</script>
</body>
</html>
案例验证中文名字：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
请输入您的名字:<input type="text" value="" id="userName" />*<br/>
<script>
//是中文名字,则绿色,否则红色
document.getElementById("userName").onblur=function () {
var reg=/^[\u4e00-\u9fa5]{2,6}$/;
if(reg.test(this.value)){
this.style.backgroundColor="green";
}else{
this.style.backgroundColor="pink";
}
};
//[\u4e00-\u9fa5] 用于验证中文，包含[一-龥]范围内的汉字
</script>
</body>
</html>
8）字符串中使用正则表达式的方法
str.match(regexp)
返回一个str中匹配正则表达式的内容的数组，正则表达式后面加写字母g表示是在全局匹配
提取伊妹儿地址
现在正则表达式中用小括号将其分组。使用时想使用匹配哪一组的字符串就在使用时用RegExp.$几即可
.replace方法
若要全部替换，同样加g
去掉文本中的空格
正则表达式中的i的意思是忽略大小写
exec方法
抽取数字的功能
9）真数组与伪数组
真数组的长度是可变的，伪数组长度不可变。
真数组可以使用数组中的方法，伪数组不可以使用数组中的方法
arguments是典型的伪数组。
以后写正则表达式大多去网上搜索即可。