前端学习从入门到高级全程记录之33（JavaScript高级5）

最新推荐文章于 2021-07-04 20:23:29 发布
最新推荐文章于 2021-07-04 20:23:29 发布
阅读量204 收藏
点赞数
分类专栏： JavaScript基础 前端 文章标签： javascript css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangbobo1997/article/details/105345232
版权

学习目标

本期继续学习javascript高级知识。

1.浅拷贝

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    
    //浅拷贝:拷贝就是复制,就相当于把一个对象中的所有的内容,复制一份给另一个对象,直接复制,或者说,就是把一个对象的地址给了另一个对象,他们指向相同,两个对象之间有共同的属性或者方法,都可以使用
    
    
    var obj1={
      age:10,
      sex:"男",
      car:["奔驰","宝马","特斯拉","奥拓"]
    };
    //另一个对象
    var obj2={};
    
    //写一个函数,作用:把一个对象的属性复制到另一个对象中,浅拷贝
    //把a对象中的所有的属性复制到对象b中
    function extend(a,b) {
      for(var key in a){
        b[key]=a[key];
      }
    }
    extend(obj1,obj2);
    console.dir(obj2);//开始的时候这个对象是空对象
    console.dir(obj1);//有属性      
  </script>
</head> 
<body>


</body>
</html>

2.深拷贝

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    //深拷贝:拷贝还是复制,深:把一个对象中所有的属性或者方法,一个一个的找到.并且在另一个对象中开辟相应的空间,一个一个的存储到另一个对象中

    var obj1={
      age:10,
      sex:"男",
      car:["奔驰","宝马","特斯拉","奥拓"],
      dog:{
        name:"大黄",
        age:5,
        color:"黑白色"
      }
    };

    var obj2={};//空对象
    //通过函数实现,把对象a中的所有的数据深拷贝到对象b中
    function extend(a,b) {
      for(var key in a){
        //先获取a对象中每个属性的值
        var item=a[key];
        //判断这个属性的值是不是数组
        if(item instanceof Array){
          //如果是数组,那么在b对象中添加一个新的属性,并且这个属性值也是数组
          b[key]=[];
          //调用这个方法，把a对象中这个数组的属性值一个一个的复制到b对象的这个数组属性中
          extend(item,b[key]);
        }else if(item instanceof Object){//判断这个值是不是对象类型的
     //如果是对象类型的,那么在b对象中添加一个属性,是一个空对象
          b[key]={};
          //再次调用这个函数,把a对象中的属性对象的值一个一个的复制到b对象的这个属性对象中
          extend(item,b[key]);
        }else{
          //如果值是普通的数据,直接复制到b对象的这个属性中
          b[key]=item;
        }
      }
    }

    extend(obj1,obj2);
    console.dir(obj1);
    console.dir(obj2);



  </script>
</head>
<body>


</body>
</html>

3.遍历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>

4.正则表达式

  • 了解正则表达式基本语法
  • 能够使用JavaScript的正则对象

4.1 正则表达式简介

什么是正则表达式
正则表达式：用于匹配规律规则的表达式，正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。

正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。

正则表达式的作用

  1. 给定的字符串是否符合正则表达式的过滤逻辑(匹配)
  2. 可以通过正则表达式，从字符串中获取我们想要的特定部分(提取)
  3. 强大的字符串替换能力(替换)

正则表达式的特点

  1. 灵活性、逻辑性和功能性非常的强
  2. 可以迅速地用极简单的方式达到字符串的复杂控制
  3. 对于刚接触的人来说，比较晦涩难懂

4.2 正则表达式的测试

在线测试正则

4.3 正则表达式的组成

  • 普通字符
  • 特殊字符(元字符)：正则表达式中有特殊意义的字符

示例演示：

  • \d 匹配数字
  • ab\d 匹配 ab1、ab2
在这里插入代码片

4.4 元字符串

常用的元字符串

元字符说明
\d匹配数字
\D匹配任意非数字的字符
\w匹配字母或数字或下划线
\W匹配任意不是字母，数字，下划线
\s匹配任意的空白符
\S匹配任意不是空白符的字符
.匹配除换行符以外的任意单个字符
^表示匹配行首的文本(以谁开始)
$表示匹配行尾的文本(以谁结束)

限定符

限定符说明
*重复零次或更多次
+重复一次或更多次
?重复零次或一次
{n}重复n次
{n,}重复n次或更多次
{n,m}重复n到m次

其它

[] 字符串用中括号括起来，表示匹配其中的任一字符，相当于或的意思
[^]  匹配除中括号以内的内容
\ 转义符
| 或者，选择两者中的一个。注意|将左右两边分为两部分，而不管左右两边有多长多乱
() 从两个直接量中选择一个，分组
   eg：gr(a|e)y匹配gray和grey
[\u4e00-\u9fa5]  匹配汉字

总结：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>

    /*
    *
    * 正则表达式:也叫规则表达式,按照一定的规则组成的一个表达式,这个表达式的作用主要是匹配字符串的,
    * "我的电话:10086,他的电话:10010,你的电话:10000" 正则表达式,把这个字符串中的所有的数字找到
    *
    * 正则表达式的作用:匹配字符串的
    *
    * 在大多数编程语言中都可以使用
    *
    * 正则表达式的组成:是由元字符或者是限定符组成的一个式子
    *
    *
    * 元字符:
    *
    * .  表示的是:除了\n以外的任意的一个字符   "fdsfs238"
    *
    * [] 表示的是:范围,  [0-9] 表示的是0到9之间的任意的一个数字,  "789" [0-9]
    * [1-7] 表示的是1到7之间的任意的一个数字
    * [a-z] 表示的是:所有的小写的字母中的任意的一个
    * [A-Z] 表示的是:所有的大写的字母中的任意的一个
    * [a-zA-Z] 表示的是:所有的字母的任意的一个
    * [0-9a-zA-Z] 表示的是: 所有的数字或者是字母中的一个
    * [] 另一个函数: 把正则表达式中元字符的意义干掉    [.] 就是一个.
    * | 或者     [0-9]|[a-z] 表示的是要么是一个数字,要么是一个小写的字母
    * () 分组 提升优先级   [0-9]|([a-z])|[A-Z]
    * ([0-9])([1-5])([a-z]) 三组, 从最左边开始计算
    * (()(()))
    *
    *
    * 都是元字符,但是也可以叫限定符,下面的这些
    *    *   表示的是:前面的表达式出现了0次到多次
    *    [a-z][0-9]* 小写字母中的任意一个 后面是要么是没有数字的,要么是多个数字的
    *    "fdsfs3223323"  [a-z][0-9]*
    *
    *    +  表示的是:前面的表达式出现了1次到多次
    *    [a-z][9]+  小写字母一个后面最少一个9,或者多个9
    *    "fesfewww9fefds"
    *
    *    ?  表示的是:前面的表达式出现了0次到1次,最少是0次,最多1次 ,另一个含义:阻止贪婪模式
    *    [4][a-z]? "1231234ij"
    *  限定符:限定前面的表达式出现的次数
    *  {} 更加的明确前面的表达式出现的次数
    *  {0,} 表示的是前面的表达式出现了0次到多次,和 *一样的
    *  {1,} 表示的是前面的表达式出现了1次到多次,和 +一样的
    *  {0,1} 表示的是前面的表达式出现了0次到1次,和 ?一样的
    *  {5,10} 表示的是前面的表达式出现了5次到10次
    *  {4} 前面的表达式出现了4次
    *  {,10} 错误的========不能这么写
    *  ^ 表示的是以什么开始,或者是取非(取反) ^[0-9] 以数字开头
    *  ^[a-z] 以小写字母开始
    *  [^0-9] 取反,非数字
    *  [^a-z] 非小写字母
    *  [^0-9a-zA-Z_]
    *  $ 表示的是以什么结束   [0-9][a-z]$  必须以小写字母结束
    *  ^[0-9][a-z] 相当于是严格模式   "3f2432e"  "4f"
    *   \d 数字中的任意一个,
    *   \D 非数字中的一个
    *   \s 空白符中的一个
    *   \S 非空白符
    *   \w 非特殊符号
    *   \W 特殊符号
    *   \b 单词的边界
    *   "what are you no sha lei"
    *
    *
    *
    *
    *
    *
    *    . 除了\n以外的任意一个单个字符
    *    []  范围
    *    () 分组,提升优先级
    *    | 或者
    *    * 0-多次
    *    + 1-多次
    *    ? 0-1次
    *    {0,} 和*一样
    *    {1,} 和+
    *    {0,1} 和?
    *
    *    \d 数字中的一个
    *    \D 非数字
    *    \s 空白符
    *    \S 非空白符
    *     \W  特殊符号
    *     \w 非特殊符号 _
    *     ^ 取反,以什么开始
    *     $ 以什么结束
         *
         *     \b 单词边界
    *
    * */
  </script>
</head>
<body>
</body>
</html>

4.5 案例

验证手机号：

^\d{11}$

验证邮编：

^\d{6}$

验证日期 2012-5-01

^\d{4}-\d{1,2}-\d{1,2}$

验证邮箱 xxx@itcast.cn：

^\w+@\w+\.\w+$

验证IP地址 192.168.1.10：

^\d{1,3}\(.\d{1,3}){3}$

练习身份证号码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>


    /*
    *
    *
    * 写正则表达式,根据字符串来写正则表达式进行匹配
    *
    * 经验: 1.找规律 2.不要追求完美
    *
    *
    * 身份证的正则表达式
    *
    * 15位或者18位
    * ([1-9][0-9]{14})|([1-9][0-9]{16}[0-9xX])
    *
    *
    * ([1-9][0-9]{14})([0-9]{2}[0-9xX])?
    *
    *
    * 练习:
    * 1.座机号码的正则表达式
    * 010-19876754
    * 0431-87123490
    *
    * [0-9]{3,4}[-][0-9]{8}
    * \d{3,4}[-]\d{8}
    *
    * \d{3,4}[-][0-9]{8}
    *
    *
    * 2.qq号码的正则表达式
    *
    * [1-9][0-9]{4,10}
    * \d{5,11}
    *
    * 3.手机号码的正则表达式
    *
    * 130 131 132 133 134 135 136 137 138 139
    * 143 147
    * 150 151 152 153 154 155 156 157 158 159
    * 170 171 173 176 177
    * 180 181 182 183 184 185 186 187 188 189
    * ([1][358][0-9][0-9]{8})|([1][4][37][0-9]{8})|([1][7][01367][0-9]{8})
    * \d{11}
    *
    *
    * 邮箱的正则表达式,必须要记住的
    *
    * sd2113_3.-fd@itcast.com.cn
    *
    *
    *
    * [0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}
    *

    * */
  </script>
</head>
<body>


</body>
</html>

5.JavaScript 中使用正则表达式

5.1 创建正则表达式

方式1：

var reg = new Regex('\d', 'i');
var reg = new Regex('\d', 'gi');

方式2：

var reg = /\d/i;
var reg = /\d/gi;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>

   //创建正则表达式对象

    //两种:
    /*
    *
    * 1.通过构造函数创建对象
    *
    *
    * 2.字面量的方式创建对象
    *
    *
    * 正则表达式的作用:匹配字符串的
    *
    * */
//   //对象创建完毕---
//    var reg=new RegExp(/\d{5}/);
//   //字符串
//    var str="我的电话是10086";
//   //调用方法验证字符串是否匹配
//    var flag=reg.test(str);
//    console.log(flag);



//   //对象创建完毕---
//   var reg=new RegExp(/\d{5}/);
//   //调用方法验证字符串是否匹配
//   var flag=reg.test("我的电话是10086");
//   console.log(flag);


    //字面量的方式创建正则表达式对象
    var reg=/\d{1,5}/;
    var flag=reg.test("小苏的幸运数字:888");
    console.log(flag);



  </script>
</head>
<body>


</body>
</html>

案例：验证密码的强度：



<!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>

大项目验证表单：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    body {
      background: #ccc;
    }

    label {
      width: 40px;
      display: inline-block;
    }

    span {
      color: red;
    }

    .container {
      margin: 100px auto;
      width: 400px;
      padding: 50px;
      line-height: 40px;
      border: 1px solid #999;
      background: #efefef;
    }

    span {
      margin-left: 30px;
      font-size: 12px;
    }

    .wrong {
      color: red
    }

    .right {
      color: green;
    }

    .defau {
      width: 200px;
      height: 20px;
    }

    .de1 {
      background-position: 0 -20px;
    }
  </style>

</head>

<body>
<div class="container" id="dv">
  <label for="qq">Q Q</label><input type="text" id="qq"><span></span><br/>
  <label>手机</label><input type="text" id="phone"><span></span><br/>
  <label>邮箱</label><input type="text" id="e-mail"><span></span><br/>
  <label>座机</label><input type="text" id="telephone"><span></span><br/>
  <label>姓名</label><input type="text" id="fullName"><span></span><br/>
</div>
<script src="common.js"></script>
<script>

  //qq的
  checkInput(my$("qq"),/^\d{5,11}$/);
  //手机
  checkInput(my$("phone"),/^\d{11}$/);
  //邮箱
  checkInput(my$("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
  //座机号码
  checkInput(my$("telephone"),/^\d{3,4}[-]\d{7,8}$/);
  //中文名字
  checkInput(my$("fullName"),/^[\u4e00-\u9fa5]{2,6}$/);
  //给我文本框,给我这个文本框相应的正则表达式,我把结果显示出来
  //通过正则表达式验证当前的文本框是否匹配并显示结果
  function checkInput(input,reg) {
    //文本框注册失去焦点的事件
    input.onblur=function () {
      if(reg.test(this.value)){
        this.nextElementSibling.innerText="正确了";
        this.nextElementSibling.style.color="green";
      }else{
        this.nextElementSibling.innerText="让你得瑟,错了吧";
        this.nextElementSibling.style.color="red";
      }
    };
  }

</script>

</body>
</html>

5.2 参数

标志说明
i忽略大小写
g全局匹配
gi全局匹配+忽略大小写

正则匹配

// 匹配日期
var dateStr = '2015-10-10';
var reg = /^\d{4}-\d{1,2}-\d{1,2}$/
console.log(reg.test(dateStr));

正则表达式案例

1.验证密码强弱

2.验证邮箱：[0-9a-zA-Z.-]+[@][0-9a-zA-Z.-]+(.+){1,2}

3.验证中文名字[\u4e00-\u9fa5]

正则提取：

// 1. 提取工资
var str = "张三：1000，李四：5000，王五：8000。";
var array = str.match(/\d+/g);
console.log(array);

// 2. 提取email地址
var str = "123123@xx.com,fangfang@valuedopinions.cn 286669312@qq.com 2、emailenglish@emailenglish.englishtown.com 286669312@qq.com...";
var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
console.log(array);

// 3. 分组提取  
// 3. 提取日期中的年部分  2015-5-10
var dateStr = '2016-1-5';
// 正则表达式中的()作为分组来使用，获取分组匹配到的结果用Regex.$1 $2 $3....来获取
var reg = /(\d{4})-\d{1,2}-\d{1,2}/;
if (reg.test(dateStr)) {
  console.log(RegExp.$1);
}

// 4. 提取邮件中的每一部分
var reg = /(\w+)@(\w+)\.(\w+)(\.\w+)?/;
var str = "123123@xx.com";
if (reg.test(str)) {
  console.log(RegExp.$1);
  console.log(RegExp.$2);
  console.log(RegExp.$3);
}

正则替换

// 1. 替换所有空白
var str = "   123AD  asadf   asadfasf  adf ";
str = str.replace(/\s/g,"xx");
console.log(str);

// 2. 替换所有,|，
var str = "abc,efg,123，abc,123，a";
str = str.replace(/,|，/g, ".");
console.log(str);

例子：表单验证

QQ号：<input type="text" id="txtQQ"><span></span><br>
邮箱：<input type="text" id="txtEMail"><span></span><br>
手机：<input type="text" id="txtPhone"><span></span><br>
生日：<input type="text" id="txtBirthday"><span></span><br>
姓名：<input type="text" id="txtName"><span></span><br>

//获取文本框
var txtQQ = document.getElementById("txtQQ");
var txtEMail = document.getElementById("txtEMail");
var txtPhone = document.getElementById("txtPhone");
var txtBirthday = document.getElementById("txtBirthday");
var txtName = document.getElementById("txtName");

//
txtQQ.onblur = function () {
  //获取当前文本框对应的span
  var span = this.nextElementSibling;
  var reg = /^\d{5,12}$/;
  //判断验证是否成功
  if(!reg.test(this.value) ){
    //验证不成功
    span.innerText = "请输入正确的QQ号";
    span.style.color = "red";
  }else{
    //验证成功
    span.innerText = "";
    span.style.color = "";
  }
};
//txtEMail
txtEMail.onblur = function () {
  //获取当前文本框对应的span
  var span = this.nextElementSibling;
  var reg = /^\w+@\w+\.\w+(\.\w+)?$/;
  //判断验证是否成功
  if(!reg.test(this.value) ){
    //验证不成功
    span.innerText = "请输入正确的EMail地址";
    span.style.color = "red";
  }else{
    //验证成功
    span.innerText = "";
    span.style.color = "";
  }
};

表单验证部分，封装成函数：

var regBirthday = /^\d{4}-\d{1,2}-\d{1,2}$/;
addCheck(txtBirthday, regBirthday, "请输入正确的出生日期");
//给文本框添加验证
function addCheck(element, reg, tip) {
  element.onblur = function () {
    //获取当前文本框对应的span
    var span = this.nextElementSibling;
    //判断验证是否成功
    if(!reg.test(this.value) ){
      //验证不成功
      span.innerText = tip;
      span.style.color = "red";
    }else{
      //验证成功
      span.innerText = "";
      span.style.color = "";
    }
  };
}

通过给元素增加自定义验证属性对表单进行验证：

<form id="frm">
  QQ号：<input type="text" name="txtQQ" data-rule="qq"><span></span><br>
  邮箱：<input type="text" name="txtEMail" data-rule="email"><span></span><br>
  手机：<input type="text" name="txtPhone" data-rule="phone"><span></span><br>
  生日：<input type="text" name="txtBirthday" data-rule="date"><span></span><br>
  姓名：<input type="text" name="txtName" data-rule="cn"><span></span><br>
</form>

// 所有的验证规则
var rules = [
  {
    name: 'qq',
    reg: /^\d{5,12}$/,
    tip: "请输入正确的QQ"
  },
  {
    name: 'email',
    reg: /^\w+@\w+\.\w+(\.\w+)?$/,
    tip: "请输入正确的邮箱地址"
  },
  {
    name: 'phone',
    reg: /^\d{11}$/,
    tip: "请输入正确的手机号码"
  },
  {
    name: 'date',
    reg: /^\d{4}-\d{1,2}-\d{1,2}$/,
    tip: "请输入正确的出生日期"
  },
  {
    name: 'cn',
    reg: /^[\u4e00-\u9fa5]{2,4}$/,
    tip: "请输入正确的姓名"
  }];

addCheck('frm');


//给文本框添加验证
function addCheck(formId) {
  var i = 0,
      len = 0,
      frm =document.getElementById(formId);
  len = frm.children.length;
  for (; i < len; i++) {
    var element = frm.children[i];
    // 表单元素中有name属性的元素添加验证
    if (element.name) {
      element.onblur = function () {
        // 使用dataset获取data-自定义属性的值
        var ruleName = this.dataset.rule;
        var rule =getRuleByRuleName(rules, ruleName);

        var span = this.nextElementSibling;
        //判断验证是否成功
        if(!rule.reg.test(this.value) ){
          //验证不成功
          span.innerText = rule.tip;
          span.style.color = "red";
        }else{
          //验证成功
          span.innerText = "";
          span.style.color = "";
        }
      }
    }
  }
}

// 根据规则的名称获取规则对象
function getRuleByRuleName(rules, ruleName) {
  var i = 0,
      len = rules.length;
  var rule = null;
  for (; i < len; i++) {
    if (rules[i].name == ruleName) {
      rule = rules[i];
      break;
    }
  }
  return rule;
}

6.伪数组和数组

在JavaScript中，除了5种原始数据类型之外，其他所有的都是对象，包括函数（Function）。

6.1 对象与数组的关系

在说区别之前，需要先提到另外一个知识，就是 JavaScript 的原型继承。

所有 JavaScript 的内置构造函数都是继承自 Object.prototype 。

在这个前提下，可以理解为使用 new Array() 或 [] 创建出来的数组对象，都会拥有 Object.prototype 的属性值。

var obj = {};// 拥有 Object.prototype 的属性值
var arr = [];
//使用数组直接量创建的数组，由于 Array.prototype 的属性继承自 Object.prototype，
//那么，它将同时拥有 Array.prototype 和 Object.prototype 的属性值

可以得到对象和数组的第一个区别：对象没有数组 Array.prototype 的属性值。

6.2 什么是数组

数组具有一个最基本特征：索引，这是对象所没有的，下面来看一段代码：

var obj = {};
var arr = [];
 
obj[2] = 'a';
arr[2] = 'a';
 
console.log(obj[2]); // => a
console.log(arr[2]); // => a
console.log(obj.length); // => undefined
console.log(arr.length); // => 3
  • obj[2]输出’a’，是因为对象就是普通的键值对存取数据
  • 而arr[2]输出’a’ 则不同，数组是通过索引来存取数据，arr[2]之所以输出’a’，是因为数组arr索引2的位置已经存储了数据
  • obj.length并不具有数组的特性，并且obj没有保存属性length，那么自然就会输出undefined
  • 而对于数组来说，length是数组的一个内置属性，数组会根据索引长度来更改length的值
  • 为什么arr.length输出3，而不是1
    • 在给数组添加元素时，并没有按照连续的索引添加，所以导致数组的索引不连续，那么就导致索引长度大于元素个数

6.3 什么是伪数组

  1. 拥有 length 属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)
  2. 不具有数组所具有的方法

伪数组，就是像数组一样有 length 属性，也有 0、1、2、3 等属性的对象，看起来就像数组一样，但不是数组，比如:

var fakeArray = {
  "0": "first",
  "1": "second",
  "2": "third",
  length: 3
};
 
for (var i = 0; i < fakeArray.length; i++) {
  console.log(fakeArray[i]);
}
 
Array.prototype.join.call(fakeArray,'+');

常见的伪数组有：

  • 函数内部的 arguments
  • DOM 对象列表（比如通过 document.getElementsByTags 得到的列表）
  • jQuery 对象（比如 $(“div”) ）

伪数组是一个 Object，而真实的数组是一个 Array。

伪数组存在的意义，是可以让普通的对象也能正常使用数组的很多方法，比如：

var arr = Array.prototype.slice.call(arguments);
 
Array.prototype.forEach.call(arguments, function(v) {
  // 循环arguments对象
});

// push
// some
// every
// filter
// map
// ...

以上在借用数组的原型方法的时候都可以通过数组直接量来简化使用：

var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
}

;[].push.call(obj, 'd')

console.log([].slice.call(obj))

;[].forEach.call(obj, function (num, index) {
  console.log(num)
})

6.4 小结

  • 对象没有数组 Array.prototype 的属性值，类型是 Object ，而数组类型是 Array
  • 数组是基于索引的实现， length 会自动更新，而对象是键值对
  • 使用对象可以创建伪数组，伪数组可以正常使用数组的大部分方法

总结

那么到此，JavaScript高级的知识就大致学完了，当然这不是全部的知识，知识太多了的，我们只能在有限的时间内掌握重要的知识。

灬银瓶丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
人狗大战，初次认识类与对象
weixin_30741653的博客
05-15 1万+
#!/use/bin/python# -*- conding:utf-8 -*-def Person(name,sex,hp,dps):#人模子 dic = {'name':name,'sex':sex,'hp':hp,'dps':dps,'bag':[]} def attack( dog): dog['hp'] -= dic['dps'] ...
5-4 设计一个Dog类
zuoan1134的博客
12-24 7380
5-4 设计一个Dog类，有名字、颜色、年龄等属性，定义构造方法来初始化类的这些属性，定义方法输出Dog信息。编写应用程序使用Dog类。 class Dog{ private String name; private String color; int age; public Dog(String name,String color,int age){
Nginx Rewrite
LX199707的博客
07-04 184
一，常用正则表达式： 字符 描述 \ 将后面接着的字符标记为一个特殊字符或者一个原义字符或一个向后引用 ^ 匹配输入字符串的起始位置 $ 匹配输入字符串的结束位置 * 匹配前面的字符零次或者多次 + 匹配前面字符串一次或者多次 ? 匹配前面字符串的零次或者一次 . 匹配除“\n”之外的所有单个字符 (pattern) 匹配括号内的pattern ...
20个学习CSS的绝佳网站——让你从入门到精通
小秋博客
09-30 1322
<br />CSS（层叠样式表）是一种简单的设计语言，能够将页面变漂亮这回事儿变的简单化。在HTML和XHTML中设定页面的样式，这是最常用的应用。但也可以应用于 XML类的文档，包括SVG和XUL。他负责管理网页的设计和外观。使用CSS，你可以控制文字的颜色、字体、段落间距、分栏的数目大小布局、背景图片颜色，以及其他很多种的效果。接下来才是要说的是学习并掌握CSS的20个绝佳站点。这里收集到的CSS站点能使你从初学者到高级人员。这些能协助你开发和改进网站。恩，随便看看吧。<br />Csstutorial
Codeforces 898 C.Phone Numbers-STL(map+set+vector)
weixin_30906185的博客
12-17 182
C. Phone Numbers time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standard output Vasya has several phone books, i...
前端，javascript，js高级语法学习
06-04
前端，javascript，js高级语法学习
前端JavaScript入门学习资源
最新发布
02-24
前端JavaScript入门学习资源
前端学习，从入门到精通，进阶好教程
08-31
前端学习从入门到精通，需要掌握以下内容12： 入门阶段： HTML+CSS基础：掌握HTML的标签使用、排版技巧、CSS的布局定位、样式美化、浏览器兼容性。 JavaScript基础：掌握JS的基本语法、条件、语句、循环等，学会...
前端javascript入门学习思维导入
06-21
适合前端小白学习的思维导图，可以根据思维导图种的内容，自定义适合自己的学习路线
JavaScript高级程序设计（第三版）学习笔记1~5章
10-22
主要介绍了JavaScript高级程序设计（第三版）学习笔记1~5章 的相关资料,需要的朋友可以参考下
前端学习从入门到高级全程记录之13 （京东项目一）
热门推荐
zhangbobo1997的博客
11-20 1万+
学习目的 本期将会学习一个京东项目，综合知识非常多。
前端学习从入门到高级全程记录之4 （CSS基础知识）
zhangbobo1997的博客
07-31 688
本次学习目标 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media ☆本次学习我们继续学习CSS的基础...
前端学习从入门到高级全程记录之8 （PS基本使用&综合案例）
zhangbobo1997的博客
08-29 539
本期学习目标 本期我们将学习PS的基本使用并且运用以前所学的CSS和HTML的技术来完成一个综合案例。 1.Photoshop基本使用 早在第一期我就让大家去安装PS，不知道安装了没有，没有安装的尽快安装，百度有很多免费资源。之所以学习PS，是因为前端需要用到PS上的功能，例如切图，量尺寸等。 PS界面组成 菜单栏、选项栏、工具栏、浮动面板（拖曳名称，可单独操作面板）、绘图窗口 窗口菜单，可显示隐...
前端学习从入门到高级全程记录之16（CSS高级技巧）
zhangbobo1997的博客
12-02 538
本期目标 本期我们继续学习一些CSS的高级技巧。 1.CSS W3C 统一验证工具 CssStats 是一个在线的 CSS 代码分析工具，可以分析你写的代码到底好不好，哪里出错。 网址是： http://www.cssstats.com/ 如果你想要更全面的，这个神奇，你值得拥有： W3C 统一验证工具： http://validator.w3.org/unicorn/ ☆☆☆☆☆ 因...
前端学习从入门到高级全程记录之14 （京东项目二）
zhangbobo1997的博客
11-26 503
目标 本期继续学习经典项目—京东项目 京东项目（二） 1.navitems开始 navitems结束 2.底部服务开始 3.服务模块完成 4.help模块开始 help完成 5.京东底部完成 6.京东主题部分广告制作 7.广告复习again 8.版心三个模块划分 9.家用电器模块 10.轮播图部分完成 11.三个小问题 ...
前端学习从入门到高级全程记录之11 （云道页面例子后续）
zhangbobo1997的博客
11-02 502
5.字体图标 图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的“http请求”，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。我们后面会学习移动响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，就是字体图标（iconfont）。 字体图标优点 可以做出跟图片一样可以做的事情，改变透明度...
前端学习从入门到高级全程记录之1 （HTML基础知识）
zhangbobo1997的博客
07-23 437
本次学习目标 掌握HTML的基本知识，能够写出简单的页面。 1. 开发工具 1.浏览器（chrome(谷歌浏览器)，IE浏览器，火狐浏览器，QQ浏览器等等)。 2.代码编辑器（sublime,HBuilder等）,网上资源非常多，请自行百度。 3.photoshop（进行一些切图等的操作） 2. Web标准（重点） 由于不同的浏览器解析出来的内容效果不一样，所以要制定统一的标准使不同的浏览器能展示...
前端学习从入门到高级全程记录之20（CSS高级技巧：动画原理&携程网案例&3D）
zhangbobo1997的博客
12-25 413
学习目标 本期将会学习动画原理、携程网案例、3D等知识。 1.动画(CSS3) animation 动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 语法格式： animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向; 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r @keyframes 动画名称...
前端学习从入门到高级全程记录之17（综合案例：学成在线）
zhangbobo1997的博客
12-13 404
学习目标 本期继续巩固之前学习的知识，学习一个新的案例：学成在线。 1.学成在线项目搭建 首先我们先看一下我们要做的部分： 然后所需要的材料： 文件太大，老办法： 百度网盘链接：https://pan.baidu.com/s/1RDMQn-cTevR_uZOxe1_klw 提取码：zpu7 所需要的图片： 1. ico图标制作 我们可以自己做的图片，转换为 ico图标，以便放到...
资源包 html5+css3+javascript 从入门到精通
10-11
资源包 "HTML5 CSS3 JavaScript 从入门到精通" 是一个全面的学习资料，旨在帮助人们从零开始学习并掌握这些前端技术。 首先，资源包提供了详细的入门指南，介绍基本的HTML5、CSS3和JavaScript的概念和语法。这些指南包括逐步指导和示例代码，使初学者能够迅速了解和掌握这些技术的基本知识。 除了入门指南，资源包还提供了进阶和专业内容，帮助读者更深入地理解和应用这些技术。例如，对HTML5的新特性（如语义化标签和多媒体支持）、CSS3的动画和过渡效果以及JavaScript的高级概念（如闭包和原型链）进行了深入解析和实例演示。 此外，资源包还包括了大量的实践项目和练习题，帮助读者将所学知识应用到实际项目中。这些项目包括构建响应式网页、创建交互式表单和设计动态效果等。通过实践项目，读者可以巩固所学知识，并培养解决实际问题的能力。 资源包还提供了相关的工具和框架介绍，如Bootstrap和Vue.js等，以帮助读者更高效地开发和设计网页和应用程序。这些工具和框架能够简化开发流程，提高代码质量和可维护性。 总之，资源包 "HTML5 CSS3 JavaScript 从入门到精通" 提供了全面且系统的学习资料，适合所有想要深入学习前端技术的人。无论是初学者还是有一定经验的开发者，都可以通过这个资源包获得实用的知识和技能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值