JavaScript中BOM操作

贺志营

已于 2022-05-15 11:21:20 修改

阅读量1.1k

点赞数

分类专栏：【Web前端的学习】文章标签： javascript 前端开发语言

于 2019-10-14 11:32:05 首次发布

本文链接：https://blog.csdn.net/HeZhiYing_/article/details/102544318

版权

【Web前端的学习】专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Web前端基础修炼

HTML基本标签详解与运行截图

CSS基本操作详解及截图演示

JavaScript基础(ECMAScript)

页面加载事件

页面加载也就是load，其用途是其他程序执行完之后再执行该代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面加载事件</title>
</head>
<body>
<script>
    //onload事件是当页面中的事件执行完毕之后再执行，所以可以写到button前面
    //传统方式
    // window.onload = function () {
    //     var btn = document.querySelector('button');
    //     btn.onclick = function() {
    //         alert('点击我');
    //     }
    // }

    //添加监听
    window.addEventListener('load',function () {
        var btn = document.querySelector('button');
        btn.addEventListener('click',function () {
            alert('我是监听');
        })
    })

</script>
<button>点击</button>
</body>
</html>

调整窗口大小事件

当窗口大小发生变化时，该事件被执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调整窗口大小事件</title>
</head>
<body>
<script>
    //窗口大小变化就会触发
    // window.onresize = function () {
    //     console.log('我变化了。。。');
    // }

    window.addEventListener('resize',function () {
        console.log('我变化了！！！')
    })
</script>
</body>
</html>

定时器

定时器，这里有两个，一个是setTimeout，意思是时间到了就执行，另一个是setInterval，意思是每隔多久就执行一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
</head>
<body>
<button>停止</button>
<div>点我停止setInterval</div>
<script>
    // window.setTimeout(调用函数，延时时间)，不写默认是0ms，这里的window可以省略
    // setTimeout(function () {
    //     alert('到时间了');
    // },3000);
    
    //这里也可以声明一个函数
    function callback() {
        alert('爆炸了');
    }
    //这样方便定义多个定时器
    var time1 = setTimeout(callback,3000);
    var time2 = setTimeout(callback,5000);

    //停止定时器
    var btn = document.querySelector('button');
    btn.addEventListener('click',function () {
        clearTimeout(time1);
    });

    //另一种定时器是setInterval(调用函数，延时时间),意思是，每隔多久执行一次
    //同样的，也可以停止定时器，方法是clearInterval()
    var time = setInterval(function () {
      console.log('继续被调用');
    },1000);
    var div = document.querySelector('div');
    div.addEventListener('click',function () {
        clearInterval(time);
    });

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

location

该对象中有很多的属性，其中有几个很重要，首先是href属性，返回URL，host属性，返回的是主机或域名，search属性，返回的是参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location</title>
</head>
<body>
<button>点击</button>
<script>
    //该属性返回的是网页中的一些参数
    console.log(location);
    var btn = document.querySelector('button');
    btn.addEventListener('click',function () {
        //这是记录浏览历史，可以实现后退功能
        //location.assign('https://baidu.com');
        //这个不记录浏览历史，不可以实现后退功能
        //location.replace('https://baidu.com');
        //这个相当于浏览器中的刷新
        //location.reload();
    });

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

navigator

该对象，可以告诉你是什么打开的浏览器，例如是移动端还是pc端，再或者是谷歌还是火狐等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>navigator</title>
</head>
<body>
<script>
    //navigator对象中有一个userAgent属性，可以让你知道是什么打开的该网页，可以判断是移动端还是pc端等
    console.log(navigator);
</script>
</body>
</html>

history

该对象可以记录你的页面的跳转，以实现历史记录，这里通过两个页面，进行跳转模拟

第一个界面，首先点击那个链接，进入第二个界面，产生历史记录后，就可以通过前进后退来实现页面跳转了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history</title>
</head>
<body>
<button>前进</button>
//这里需要先点击链接，也就是产生历史记录
<a href="index.html">点击</a>
<script>
    var btn = document.querySelector('button');
    btn.addEventListener('click',function () {
        history.forward();
        //这里也能用go，例如history.go(1);这里是前进1步
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<button>后退</button>
<script>
    var btn = document.querySelector('button');
    btn.addEventListener('click',function () {
        history.back();
        //这里也能用go，例如history.go(-1);这里是后退1步
    })
</script>
</body>
</html>

贺志营

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript中BOM操作

页面加载事件页面加载也就是load，其用途是其他程序执行完之后再执行该代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>页面加载事件</title></head><body>&l...
复制链接

扫一扫