JS基础篇(五)

浏览器对象和Bom对象

大纲

浏览器对象：Bom对象
浏览器里自带的对象，比如 window 
1.location.href 获取浏览器地址
2.location.href = 'http//:baidu.com'  跳转到百度
3.http://www.baidu.com?username=fanyong&age=20    
    跳转到百度的时候，加上参数 username = fanyong 用&连接后面想加的参数

页面之间跳转 location.href

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <a href=""></a>

    <button "goto();">跳转</button>
    <!-- 添加一个点击事件 -->

    <script>
        function goto(){
            // 获取浏览器的地址
            // 在控制台输入location.href获取当前页面的地址
            console.log(location.href);
            // 参数
            var url = 'http://www.baidu.com?username=fanyong&age=20';
            //这里后面的字符串不需要加引号，获取什么和什么，中间用&连接
            location.href = url;
        }

    </script>
</body>
</html>

setTimeout 计数器

<script>
    // setTimeout是一个方法,计时器
    // 第一个参数是一个函数(回调函数)，第二个参数是负责延迟的毫秒数
    window.setTimeout(function(){
        console.log('勇');
    },3000);

</script>

暂停计时器

<script>
    // var a = 0;
    // var timer = window.setInterval(function(){
    //     console.log(++a);
    //     if(a===5){
    //         // 暂停计时器
    //         clearInterval(timer);
    //     }
    // },1000);

    // 倒计时
    var num = 10;
    var timer2 = setInterval(function(){
        console.log(--num);
        if(num===0){
            clearInterval(timer2);
        }
    },1000)
    
</script>

正则表达式

大纲

一.创建正则对象
1.字面量方式
    /   /
2.new关键字
    var 变量名 = new RegExp( )
3.字符串全局替换
修饰符
i 执行对大小写不敏感的匹配(不区分大小写)
g 全局匹配
m 多行匹配

或与非
| 或
& 与
！非
^ 匹配字符串的开始
$ 匹配字符串的结束

方括号
[] 查找括号之间的任何字符
[^] 查找不在括号之间的字符(除)
[0-9] 查找所有数字
[a-z] 查找小写字母
[A-Z] 查找大写字母
[A-z] 不分大小写查找所有字母
[adgk] 查找给定集合内的任何字符
[^adgk] 查找给定集合外的任何字符
(red|blue|green) 查找任何指定的选项
二.常用匹配规则
一.元字符(作用查找)
1. . 查找任意字符(换行和行结束符除外)
2. \w 字母、数字、下划线(查找单词字符)
3. \s 任意空白格
4. \W 查找非单词(字母、数字、下划线)字符
5. \d 查找数字 等同于[0-9]
6. \D 查找非数字字符 等同于[^0-9]
7. \s 查找空白字符
8. \S 查找非空白字符
9. \b 匹配单词边界
10. \B 匹配非单词边界
11. \O 查找NUL字符
12. \n 查找换行符
13. \f 查找换页符
14. \r 查找回车符
15. \t 查找制表符
16. \v 查找垂直制表符
17. \xxx 查找以八进制数xxx规定的字符
18. \xdd 查找以十六进制数dd规定的字符
19.\uxxxx 查找以十六进制数xxxx规定的Unicode字符

二.反义字符
[^] 除括号里面以外的都匹配

三.重复匹配
1. * 重复出现零次或多次
2. + 重复出现一次或多次
3. ？重复出现零次或者一次
4.{n} 重复出现n次
5.{n,} 至少重复出现n次
6.{n,a} 至少重复n次，最多重复a次  n < a


\1 \后接数字代表第几个括号，代表那个括号和里面的内容

四. 分组
1. 用括号分组
2. 分组的应用


读正则表达式的大致顺序
1.纵观全局 ：看有没有或|符号，有的话根据符号前后分开来读
2.从外到内看：看最外层的括号是什么，根据符号的含义来读
3.从左往右看：括号里面从左往右读

小技巧，把大小括号中间敲空格便于观察发现
    需要更改的时候把正则表达式分块，用括号括起来


使用RegExp 对象里的函数：
    search() 方法用于检索字符串中指定的子字符串，
        或检索与正则表达式相匹配的子字符串。
    match() 方法可在字符串内检索指定的值，或找到一个
        或多个正则表达式的匹配。该方法类似 indexOf() 
        和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。
    replace() 方法用于在字符串中用一些字符替换另一些字符，
        或替换一个与正则表达式匹配的子串。
    split() 方法用于把一个字符串分割成字符串数组。

其中 replace()的用法是：
    var reg = /(.*)(程序员)(.*)/;
    var str = '我是web前端程序员,我来自深圳';
    // 将程序员替换成工程师
    var newStr = str.replace(reg, '$1工程师$3');// $1代表第几个括号
    console.log(newStr);

    这样可以联系到上面的分组了，分好组后，第几个括号就是$几

-正则表达式的含义

正则表达式含义：
正则表达式是描述字符模式的对象。
正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

正则表达式描述了字符的模式对象。
当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。
简单的模式可以是一个单独的字符。
更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。
您可以规定字符串中的检索位置，以及要检索的字符类型，等等。

创建一个正则对象

<script>
    // 创建正则对象的方式有两种
    // 创建的时候可以带参数

    // 字面量方式
    var reg = /fanyong/;
    console.log(typeof reg);
    var str = '4154874a6sd4safasf';
    // 验证的方法 test
    console.log(reg.test(str));// true 符合规则返回true ，否则返回false

    // 构造函数方式
    var reg1 = new RegExp('fanyong','i');//i-不区分大小写，g-全局匹配，m-多行模式
    console.log(reg1.test(str)); //

</script>

符号之间的应用

<script>
    // 一元字符
    var reg = /b..k/;
    var str = 'books';
    var num = 'boooks';
    console.log(reg.test(str));//true
    console.log(reg.test(num));//false
    
    // 一个后面接(数字、字母、下划线的一个)+q  必须得是t(数字、字母、下划线)q
    var reg = /t\wq/; //\w表示数字、字母、下划线的一个
    var str1 = '2222t2qkkk';
    var str2 = 'asadtacbbbb'
    console.log(reg.test(str1));// true
    console.log(reg.test(str2));// false

</script>

<script>
  // 写一个手机号码的正则匹配
  var reg = /^1[3-8]\d{9}$/;
    
  // 日期
  var reg = /^\d\d?\d?\d?-[01]/;
</script>

<script>
    // \1是第一个括号的重复
    var reg1 = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/;

    // 应用
    var reg = /(.*)(程序员)(.*)/;
    var str = '我是web前端程序员,我来自深圳';
    // 将程序员替换成攻城狮
    var newStr = str.replace(reg, '$1攻城狮$3');
    console.log(newStr);
</script>

获取验证码倒计时小例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>倒计时测试</title>
    <style>
      input{
        background-color: white;
        border: 1px solid orange;
        width: 100px;
        height: 40px;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <input
      id="getcode"
      type="button"
      "login.getCode();"
      value="获取验证码"/>
  </body>
</html>
<script>
  var login = {
    start: function () {
      login.num = 60
    },
    getCode: function () {
      // 教训：获取节点并且赋值的时候后面接的是等于号     disabled
      var str = document.querySelector('#getcode');
      str.disabled = true;
      // 方法执行时不能点击
      var timer = setInterval(function () {
        // 设置定时器
        --login.num;
        // 数字自减
        str.value = login.num; 
        if(login.num == 0){
          // 等于零的时候执行
          clearInterval(timer);
          // 清除定时器
          str.value='重新发送'
          login.num=60;
          str.disabled=false;
        }
      }, 100);
    }
  }
  login.start();
</script>

浏览器对象和Bom对象

正则表达式

猜你喜欢