JavaScript学习笔记（三）BOM对象

最新推荐文章于 2024-11-20 15:47:11 发布

asdasd1fdsyrt

最新推荐文章于 2024-11-20 15:47:11 发布

阅读量197

点赞数

分类专栏：前端 # H5 & JS

本文链接：https://blog.youkuaiyun.com/asdasd1fdsyrt/article/details/117289203

版权

前端同时被 2 个专栏收录

8 篇文章

订阅专栏

H5 & JS

8 篇文章

订阅专栏

本文详细介绍了JavaScript中的BOM（浏览器对象模型），包括核心对象Window的使用，如警告框、确认框、提示框及定时器功能；History对象的前进和后退方法；以及Location对象在页面跳转和定时更新中的应用。通过实例代码展示了如何模拟浏览器行为和实现页面交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript基础用法

一.BOM对象

BOM（Browser Object Mode），浏览器对象模型，是将我们使用的浏览器抽象成对象模型，例如我们打开一个浏览器，会呈现出以下页面，通过js提供浏览器对象模型对象我们可以模拟浏览器功能。

在浏览器地址栏输入地址，敲击回车这个过程，我们可以使用location对象进行模拟。浏览器中的前进和后退按钮，我们可以使用history对象模拟。

Screen对象：里面存放着有关显示浏览器屏幕的信息。
Window对象：表示一个浏览器窗口或一个框架。
Navigator对象：包含的属性描述了正在使用的浏览器。
History对象：保存浏览器历史记录信息。
Location对象：Window对象的一个部分，可通过window.location属性来访问。

在这里插入图片描述

1. Window对象

BOM 的核心对象是window，它表示浏览器的一个实例。window 对象处于JavaScript 结
构的最顶层，对于每个打开的窗口，系统都会自动为其定义window 对象

结构
在这里插入图片描述
属性

方法

1.1 警告框

<script>
    alert("Hello World!");
</script>

1.2 确认框

<script>
	//弹出确认框
    var result = window.confirm("请选择");
    window.alert("result = " + result);
</script>

在这里插入图片描述

1.3 提示框

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

实例

<script>
    var result = window.prompt("请输入您的姓名");
    window.alert("result = " + result);
</script>

在这里插入图片描述

1.4 定时器

① 单次定时器： setTimeout()

setTimeout(匿名函数整体 或 自定义函数名称，等待时长);
只执行一次

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
    <button id="btn">单次定时器</button>
</body>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            //定义单次定时器
            window.setTimeout(function () {
                alert("单次定时器爆炸了...");
            }, 1000);
        }
    }
</script>
</html>

在这里插入图片描述

② 循环定时器 setInterval()

setInterval(匿名函数整体 或 自定义函数名称，间隔时长);
间隔时长是毫秒
每隔多少毫秒，就执行1次匹配函数体内的代码块（无限循环）

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
    <button id="btn">循环定时器</button>
</body>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            //定义循环定时器
            window.setInterval(function () {
                alert("起床了...");
            }, 1000);
        }
    }
</script>
</html>

在这里插入图片描述
③ 清除定时器 clearTimeout() ; clearInterval()

默认开启的定时器是匿名的，无法获取它内存位置；须定义一个全局变量，来存储定时器，再调用相应的停止方法。

实例

clearTimeout(变量名)；	//停止单次...
clearInterval(变量名)；	//停止循环...

例：点击移动盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="btn">点击移动盒子</button>
    <div id="box" style="width: 100px; height: 100px; background-color: pink;"></div>
</body>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        var box = document.getElementById("box");
        // 定时器 timer
        var timer;
        btn.onclick = function () {
            // 解决循环定时器的 bug , 启动一个新循环定时器之前, 需要清除就的循环定时器
            window.clearInterval(timer);
            var num = 0;
            // 循环定时器
            timer = window.setInterval(function () {
                num += 10;
                //更改盒子的左外边距
                box.style.marginLeft = num + "px";
            }, 50);
        }
    }
</script>
</html>

在这里插入图片描述

2、History对象

在这里插入图片描述
方法

实例

<body>
    <h1>a页面</h1>
    <a href="b.html">b页面</a>
    <input type="button" value="前进" onclick="window.history.forward()">
    <h1>b页面</h1>
    <a href="c.html">c页面</a>
    <input type="button" value="后退" onclick="window.history.back();"> 
    <h1>c页面</h1>
    <input type="button" value="回到a页面" onclick="window.history.go(-2);">
</body>

3、Location对象

在这里插入图片描述
例：定时跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时跳转</title>
</head>
<body>
    <p id="time"></p>
</body>
<script>
    window.onload = function () {
        var time = document.getElementById("time");
        var count = 5;
        window.setInterval(function () {
            count--;
            if (count > 0) {
                time.innerHTML = count;
            } else {
                window.location.href = "http://www.baidu.com";
            }
        }, 1000);
    }
</script>
</html>

在这里插入图片描述
例：定时图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时图片</title>
</head>
<body>
    <img src="../sources/logo.jpg" width="30%" id="img" style="display: none;"/>  
</body>
<script>
    window.onload = function () {
        //获取 img 标签, 修改 display 属性. (none 不显示 / block 显示)
        var img = document.getElementById("img");
        //单次定时器
        window.setTimeout(function () {
            //显示图片
            img.style.display = "block";
            // 嵌套一个单次定时器 隐藏图片
            window.setTimeout(function () {
                img.style.display = "none";
            }, 2000);
        }, 2000);
    }
</script>
</html>

在这里插入图片描述
例：登录表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
</head>
<body>
    <form action="#" method="get" id="myForm">
        用户名: <input type="text" name="username" id="username"/> <br />
        密码: <input type="password" name="password" id="password" /> <br />
        <input type="submit" value="提交"/>
    </form>
</body>
<script>
    window.onload = function () {
        //表单是否能够被提交 需要onsubmit 事件, 默认值为 true.
        var myForm = document.getElementById("myForm");
        //获取用户名和密码
        var username = document.getElementById("username");
        var password = document.getElementById("password");
        // 表单绑定 `onsubmit` 事件
        myForm.onsubmit = function () {
            // 判断
            if (username.value.trim() == "") {
                alert("用户名不能为空.");
            } else if (password.value.trim() == "") {
                alert("密码不能为空.");
            } else if (password.value.trim().length < 8) {
                alert("密码长度不能小于8位.");
                // 清空密码
                password.value=""
            } else {
                return true;
            }
            return false;
        }
    }
</script>
</html>