JS中的BOM、正则表达式、定时器

axbhealj

已于 2023-03-13 19:44:39 修改

阅读量210

点赞数

分类专栏：前端文章标签： javascript Powered by 金山文档

于 2023-03-12 19:15:22 首次发布

本文链接：https://blog.csdn.net/axbhealj/article/details/129479403

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、BOM

浏览器对象模型 (BOM-Browser Object Model) 使 JavaScript 有能力与浏览器"对话"。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

1.1 window

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一

Window Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

window.location 对象在编写时可不使用 window 这个前缀。一些例子：

location.hostname 返回 web 主机的域名

location.pathname 返回当前页面的路径和文件名

location.port 返回 web 主机的端口（80 或 443）

location.protocol 返回所使用的 web 协议（http:// 或 https://）

location.href 属性返回当前页面的 URL(重要)

location.assign() 方法加载新的文档

<html>
<head>
<script>
function newDoc(){
  window.location.assign("http://www.baidu.com/")
 }
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>

Window History

window.history 对象包含浏览器的历史。

window.history 对象在编写时可不使用 window 这个前缀。

history.back() 与在浏览器点击后退按钮相同

history.forward() 与在浏览器中点击按钮向前相同

一些方法示例如下：

1.1.1 location

表示当前浏览器的链接地址

可以读取地址

可以修改地址

<body>
        <input type="text" name="url" id="url" placeholder="请输入链接地址..."/>
        <button type="button" onclick="showUrl()">打印当前链接</button>
        <button type="button" onclick="toUrl()">跳转</button>
        <button type="button" onclick="assignUrl()">替换url</button>
    </body>
    
    <script type="text/javascript">
        /* 
            打印当前链接
         */
        function showUrl(){
            console.log(window.location.href);
        }
        
        /**
         * 跳转
         *     1、获取输入框中的链接
         *     2、修改location的href属性
         */
        function toUrl(){
            // 获取输入的内容
            var newUrl = document.getElementById("url").value;
            
            // 修改href属性
            location.href = newUrl;
        }
    </script>

1.1.2 history

浏览器历史

能控制浏览器页面的前进和后退的跳转（有历史记录才可以跳转）

<body style="background-color: antiquewhite;">
        <a href="a.html">a页面</a>
        <a href="b.html">b页面</a>
        <hr >
        
        <button type="button" onclick="backPage()">上一页</button>
        <button type="button" onclick="forwardPage()">下一页</button>
    </body>
    
    <script type="text/javascript">
        // 后退一页
        function backPage(){
            window.history.back();
        }
        
        // 前进一页
        function forwardPage(){
            window.history.forward();
        }
    </script>

二、定时器

设置定时器

setInterval(调用函数,毫秒时间)：每间隔固定毫秒值就执行一次函数

setTimeout(调用函数,毫秒时间)：在固定时间之后执行一次调用函数

关闭定时器：

clearInterval(定时器名称)

clearTimeout(定时器名称)

<button onclick="showTimeout()">演示-setTimeOut定时器</button>
    <button onclick="closeTimeout()">演示-关闭setTimeOut定时器</button>
    <br>
    <button onclick="showInterval()">演示-setInterval定时器</button>
    <button onclick="closeInterval()">演示-关闭setInterval定时器</button>
/**
         * 定时执行
         *     每间隔指定的时间执行一次
         * 
         * 倒计时执行
         *     给定义一个时间，时间到了执行一次
         */
    <script>
        var name1;
        function showTimeout() {
            // setTimeout的两个参数，第一个为一个匿名函数，第二个为秒数
            name1 = setTimeout(function () {
                alert("基你太美");
            }, 4000);
        }
        function closeTimeout() {
            clearTimeout(name1);
        }

        var name2;
        function showInterval() {
            var i = 1;
            name2 = setInterval(function () {
                console.log(i++);
            }, 1);
        }
        function closeInterval() {
            clearInterval(name2);
        }

练习：随机点名（新手版）

 <div style="width: 100px;height: 80px;border: 2px red solid;background-color: skyblue; ">
        <div id="nd" style="text-align: center;margin-top:20%">人名</div>
    </div>
    <hr>
    <button onclick="begin()">Start</button>
    <button onclick="end()">Stop</button>
    <script>

        var name;
        function begin() {
            var nameArr = ["0000", "1111", "2222", "3333", "4444"];
            name = setInterval(function () {
                var index = parseInt(Math.random() * nameArr.length);
                // console.log(index);

                // var n = nameArr[index];
                // var div = document.getElementById("nd");
                // div.innerText = n;
                document.getElementById("nd").innerText = nameArr[index];
            }, 20)
        }
        function end() {
            clearInterval(name);
        }
    </script>

三、正则表达式

Regular Expression （RegExp）

3.1 正则表达式

正则表达式是描述字符模式的对象。

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

语法：

var patt=new RegExp(pattern,modifiers);

var patt=/pattern/modifiers;

3.2 基本知识

var re = new RegExp("模板");
var re = /模板/;

方括号：用于查找某个范围内的字符

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。（由于是按照ASCII码，A为65，a为97，中间不止26个值(26个字母)，因此这个判断A-z会出问题）应该[A-Za-z]
(red\|blue\|green)	查找任何指定的选项。

元字符（Metacharacter）：是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NULL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词：用于表示重复次数的含义

量词	描述
n+	匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 "candy" 中的 "a"，"caaaaaaandy" 中所有的 "a"。
n*	匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 "A ghost booooed" 中的 "boooo"，"A bird warbled" 中的 "b"，但是不匹配 "A goat grunted"。
n?	匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 "angel" 中的 "el"，"angle" 中的 "le"。
n{X}	匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 "candy," 中的 "a"，但是匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"。
n{X,}	X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 "candy" 中的 "a"，但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。
n{X,Y}	X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 "cndy"，匹配 "candy," 中的 "a"，"caandy," 中的两个 "a"，匹配 "caaaaaaandy" 中的前面三个 "a"。注意，当匹配 "caaaaaaandy" 时，即使原始字符串拥有更多的 "a"，匹配项也是 "aaa"。
n{X}	前面的模式 n 连续出现X 次时匹配
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

PS:

+ [1，+无穷]

* 任意个

？ [0，1]

RegExp 对象方法

方法	描述
compile	编译正则表达式。
exec	检索字符串中指定的值。返回找到的值，并确定其位置。
test	检索字符串中指定的值。返回 true 或 false。

正则表达式的使用

test方法：搜索字符串指定的值，根据结果并返回真或假

exec() 方法：检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

3.3 演示

<body>
    数据<input id="i1" onblur="checkData()" />
    <script>
      var i1 = document.getElementById("i1");
      function checkData() {
        var val = i1.value;
        // 创建正则表达式1
        // var reg = new RegExp("[0-9]");
        // 创建正则表达式2
        var reg = /[0-9]/; // 模板1: 判断内容是否包含0-9之间任何一个数字
        var reg2 = /[a]/; // 模板2: 是否包含a
        var reg3 = /[abc]/; // 模板3: 是否包含abc中任何一个
        var reg4 = /[a-z]/; // 模板4: 是否包含a-z中任何一个
        var reg5 = /[A-Z]/; // 模板5: 是否包含A-Z中任何一个
        var reg6 = /[a-zA-Z]/; // 模板6: 是否包含大小写中任何一个
        var reg7 = /[A-z]/; // 模板7: 是否包含大小写中任何一个(因为ascll码值)
        var reg8 = /[0-9A-Za-z]/; // 模板8: 是否包含数字或者字母
        var reg9 = /[\dA-Za-z]/; // 模板9: 是否包含数字或者字母
        var reg10 = /\d+/; // 匹配至少一个数字
        var reg11 = /\d*/; // 匹配0或者多个数字
        var reg12 = /\d?/; // 匹配0或者1个,只要字符串内有1个或0个就对
        var reg13 = /^\d?$/; // 匹配整个内容中只能有0或者1个数字
        var reg14 = /^\d{4}$/; // 整个内容中只能有数字,且数字个数是4位
        var reg15 = /^\d{4,6}$/; // 整个内容中只能有数字,且数字个数是4-6位
        var reg16 = /^\d{4,}$/; // 整个内容中只能有数字,且数字个数是至少4位
        // 匹配手机号
        // 手机号开头必须是1,第二位可以是3,5,6,8,9,后续数字任意,总长得11位
        var reg17 = /^1[35689]\d{9}$/;

        // 匹配邮箱 237876779@qq.com
        // 开头是数字或者字母,其中必须包含@符号,@后可以是数字和字母,必须有.符号,后面必须是字母
        // .是正则表达式的特殊符号,需要转移
        var reg18 = /^[\dA-Za-z]+@[\da-z]+\.[a-z]+$/;
        console.log(reg18.test(val));
        // 置空
        // i1.value = "";

        // 重点是能看懂就行,会写简单模板
      }
    </script>
  </body>

eg:

 <input type="text" id="i1" onblur="checkData()">

    <script>
        function checkData() {
            // 获得输入框的值
            var i1 = document.getElementById("i1");
            var val = i1.value;
            // 创建正则表达式的模板
            // var reg = /[abc]/;
            // var reg = /[^abc]/;

            //手机号：
            // 需求1：全数字，长度固定11
            // var reg = /^[\d]{11}$/;
            // 需求2：首位是1，第二位3,5,6,7,8后面任意
            // var reg = /^1[35678]{1}[\d]{9}$/;

            // 邮箱
            // 需求：前面数字或者字母至少一个以上
            // 中间必须有@符号
            // @后面是数字或者字母，至少以为一个以上
            // 再后必须有.符号
            // .后必须是字母  
            //   var reg = /^[\d\w]+[\@][\d\w]+[\.][a-z]+$/;
            var reg = /^[\dA-Za-z]+@[\dA-Za-z]+\.[a-z]+$/;
            var result = reg.test(val);
            console.log(result);
        }
    </script>