BOM对象

最新推荐文章于 2022-11-23 15:39:50 发布

原创最新推荐文章于 2022-11-23 15:39:50 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍了浏览器对象模型(BOM)的基本概念，包括顶级对象window的功能及其常用方法如alert、prompt和confirm等。同时深入探讨了页面加载事件onload的作用，并详细解释了location对象的用途。此外，还介绍了定时器setInterval和setTimeout的使用方法及其清除机制。

BOM的概念

BOM全称Browser object model
顶级对象：window=======页面中所有的内容都属于window
window.属性/ window.方法------一般可以省略window不写

对话框：

alert() 弹框

<script>
//直接用
alert("你好")
</script>

页面中的弹框，这种情况，一般我们不用，测试的时候用

prompt() 确定框（确定or取消）

var flag = connfirm("您要注册吗？")  //bool类型
console.log(flag);    //返回true和false

confirm() 用户输入的框 String

var s = prompt("请输入你的名字：");
console.log(s);

页面加载事件

onload()

window.onload = function () {
  // 当页面加载完成执行
  // 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
}

在html页面中，一般运行顺序是从上到下，当你先写输出语句，再写包装函数时，结果没有显示

这个时候就需要用到onlaod事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function(){
            my$("btn").onclick=function(){
                alert("123");
            }
        }
    </script>
</head>
<body>
<button id="btn">显示内容</button>
<script src="common.js"></script>
</body>

onunload()

关闭页面时触发 onbeforeunload：页面关闭前触发----ie有的

location对象

获取地址栏后的#及后面的内容
console.log(window.location.hash);
主机名及端口号
console.log(window.location.host);//localhost:63342
主机名
console.log(window.location.hostname);//localhost
文件的路径---相对路径 console.log(window.location.pathname);///01.%E8%AF%BE%E5%A0%82%E6%A1%88%E4%BE%8B/13location%E5%AF%B9%E8%B1%A1.html
端口号
console.log(window.location.port);//63342
协议
console.log(window.location.protocol);//http:
搜索的内容
console.log(window.location.search);//?_ijt=hnd6q0gvff78gubhmh21pqna3g

 my$("btn").onclick=function(){
        //获取地址栏后的#及后面的内容
        console.log(window.location.hash);

        // location.href="05-onload事件.html";//跳转页面，有后退
        // location.assign("http://www.baidu.com");//跳转页面，有后退
        // location.replace("05-onload事件.html");//跳转页面，没有后退
        location.reload();//刷新

定时器

setInterval( 参数1，参数2)

参数1：要重复执行的事情，是一个函数（function（））

参数2：时间，单位为毫秒，每个这个时间执行一次参数1这个函数

执行过程：页面加载完毕后，过一秒，执行一次，再过一秒，执行一次，累加

clearInterval() 清楚定时器

claerInterval (定时器的ID)

*只要定义了定时器，就一定要清除*

 var timeId = window.setInterval(function () {
        alert("你好");//断言
    }, 1000);
    my$("btn").onclick = function () {
        //清除定时器
        window.clearInterval(timeId);
    }

setTimeout( 函数，时间)

页面加载完成后，过一段时间，就执行函数，但只执行一次

返回值：当前定时器的ID

clearTimeout( 定时器ID)

 var timeId = setTimeout(function () {
        alert("你好");
    }, 1000);

    my$("btn").onclick=function(){
        clearTimeout(timeId);
    }