JS膏集05

时间：2022-08-29 18:56:51

JS膏集05

1、复习

JS膏集05

闭包内的函数也可以使用参数

JS膏集05

闭包的建议写法

JS膏集05

)

JS膏集05

2、浅拷贝

相当于把一个对象中的所有的内容复制一份给另一个对象。直接复制。

或者说，就是把一个对象的地址给了另一个对象，它们指向相同，有共同的属性和方法。

JS膏集05

JS膏集05

3、深拷贝

把一个对象中所有的属性和方法，一个一个找到，并且在另一个对象中开辟相应的空间，一个一个地存储到新对象中。

代码

JS膏集05

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>

JS膏集05

2、正则表达式

1）主要作用是匹配字符串的

2)在大多数变成语言中都可以使用

是由元字符或者限定字符组成的一个式子

3）元字符：

MDN中可查询

JS膏集05

JS膏集05

在非严格模式下均为非严格匹配，只要字符串中有正则表达式的相关内容即可，不用一模一样

JS膏集05

4）限定符

JS膏集05

JS膏集05

JS膏集05

JS膏集05

空白符包括tab键与空格、

5）正则表达式练习

找规律，不追求完美

[0-9xX]0-9中数字的一个或者是x或X

JS膏集05

JS膏集05

JS膏集05

JS膏集05

JS膏集05

6)创建正则表达式对象

可通过构造函数或者是字面量的方式来创建对象

var reg=new RegExp();//创建完毕没有正则表达式的对象

JS膏集05

创建对象的括号内：/所需要的正则表达式/

要写在斜杠内以便正确解析

通过字面量的方式创建正则表达式对象：

JS膏集05

最简单的写法：

JS膏集05

7）识别正则表达式的匹配结果

JS膏集05

JS膏集05

案例：验证密码强中弱



<!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表示是在全局匹配

JS膏集05

提取伊妹儿地址

JS膏集05

JS膏集05

现在正则表达式中用小括号将其分组。使用时想使用匹配哪一组的字符串就在使用时用RegExp.$几即可

.replace方法

JS膏集05

若要全部替换，同样加g

JS膏集05

去掉文本中的空格

JS膏集05

正则表达式中的i的意思是忽略大小写

JS膏集05

exec方法

JS膏集05

抽取数字的功能

JS膏集05

9）真数组与伪数组

真数组的长度是可变的，伪数组长度不可变。

真数组可以使用数组中的方法，伪数组不可以使用数组中的方法

arguments是典型的伪数组。

以后写正则表达式大多去网上搜索即可。

JS膏集05的更多相关文章

  1. JS膏集04

    JS膏集04 1.apply和call方法 可以改变this的指向,可以用于函数的调用 apply和call方法中如果没有传入参数,或者传入null,那么调用该方法的函数中的this就是window ...

  2. JS膏集03

    JS膏集03 1.复习 原型: * 在构造函数中有一个属性:prototype,是原型,也是一个对象,程序员使用的 * 在实例对象中有一个属性:__proto__,是原型,也是一个对象,浏览器使用的, ...

  3. JS膏集02

    JS膏集02 1.复习 函数也是对象 2.贪食蛇案例 <!DOCTYPE html> <html lang="en"> <head> <m ...

  4. JS膏集01

    JS膏集01 1.动态页面: 向服务器发送请求,服务器那边没有页面,动态生成后,返回给客户端 由html/css/js组成. js还不是面向对象的语言,是基于对象的语言.js中没有类的概念,js的继承 ...

  5. JS自学笔记05

    JS自学笔记05 1.例题 产生随机的16进制颜色 function getColor(){ var str="#"; var arr=["0","1 ...

  6. 使用PM2将Node&period;js的集群变得更加容易

    介绍 众所周知,Node.js运行在Chrome的JavaScript运行时平台上,我们把该平台优雅地称之为V8引擎.不论是V8引擎,还是之后的Node.js,都是以单线程的方式运行的,因此,在多核心 ...

  7. 【 D3&period;js 选择集与数据详解 — 5 】 处理模板的应用

    在[选择集与数据 - 4]一文中,介绍了一个update.enter.exit的处理模板,这个模板很常用,本文将通过一个例子来讲解其使用方法. 1. 模板 复习一下上一章提到的模板. //绑定数据后, ...

  8. 【 D3&period;js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

    绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法 如果没有足够的元素,那么处理 ...

  9. 【 D3&period;js 选择集与数据详解 — 3 】 绑定数据的顺序

    data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序.在数据需要更新的时候常常会用到. 默认的情况下,data()函数是按照索引号依次绑定数组各项的.第0个元素绑定数组的第0 ...

随机推荐

  1. hdfs 复制路径下所有文件

    hadoop fs -cp $SRC_FILE $TARGET_FILE hadoop fs -cp $SRC_DIR $TARGET_DIR 注:复制路径时,最后一个斜杠是没有的.添加斜杠后报文件找 ...

  2. matlab列优先与高维矩阵重构 及 CNN 逐层可视化 on Matlab

    由于matlab在列化a(:)以及reshape(a)等操作中是列优先的,所以要重构出新的高维度矩阵,通常要把reshape和permute结合起来使用. 先到 http://caffe.berkel ...

  3. SQL server 2008 Express Edition实现自动备份和自动删除备份

    1.查看SQL 版本: select @@VERSION --可以看到 Express Edition 精简免费版 Microsoft SQL Server 2008 R2 (SP2) - 10.50 ...

  4. MFC radio button 绑定变量用法

    我们在对话框中拖动一个radio button控件,然后点击类向导,结果却发现在Member Variables里看不到Radio控件的ID.这是为什么? 2.1 三个Radio Button,ID分 ...

  5. 戏说Java多线程

    戏说Java多线程. package com.cmp.chengfu.app.jdk6.desktop; import java.awt.Desktop; import java.io.File; i ...

  6. 乐在其中设计模式&lpar;C&num;&rpar; - 状态模式&lpar;State Pattern&rpar;

    原文:乐在其中设计模式(C#) - 状态模式(State Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 状态模式(State Pattern) 作者:webabcd 介绍 允 ...

  7. java中matches的用法

    在java中,时常会用到查看一个字符串是否是数字,这时就可以用到matches()函数. 具体实例如下: public boolean string_matches(String amatch) { ...

  8. 【Python&amp&semi;数据结构】 抽象数据类型 Python类机制和异常

    这篇是<数据结构与算法Python语言描述>的笔记,但是大头在Python类机制和面向对象编程的说明上面.我也不知道该放什么分类了..总之之前也没怎么认真接触过基于类而不是独立函数的Pyt ...

  9. 使用 C&plus;&plus; REST SDK 进行网络编程

    安装 C++ REST SDK $ brew install cpprestsdk $ brew install boost $ brew install libressl 创建工程 打开 Xcode ...

  10. 3D中的OBJ文件格式详解

    常见到的*.obj文件有两种:第一种是基于COFF(Common Object File Format)格式的OBJ文件(也称目标文件),这种格式用于编译应用程序:第二种是Alias|Wavefron ...

相关文章