BOM学习

最新推荐文章于 2024-07-25 22:24:14 发布

小姜思

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量74

点赞数

文章标签：学习 servlet java

本文链接：https://blog.csdn.net/weixin_45813597/article/details/126530748

版权

1. BOM概述

1.1 什么是BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM 缺乏标准，JavaScript 语法的标准化组织是ECMA，DOM 的标准化组织是W3C，BOM 最初是Netscape浏览器标准的一部分。

1.2 BOM的构成

window 是对象浏览器的顶级对象，它具有双重角色。

1. 它是js访问浏览器窗口的一个接口。

1. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。

注意：window下的一个特殊属性window.name

2. window 对象的常见事件

2.1 窗口加载事件

window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数。

注意：有了window.onload 就可以把js代码写到页面元素的上方，因为onload 是等页面内容全部加载完毕，再去执行处理函数。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击');
            })
        }
    </script>
</head>
<body>
    <button>点击</button>
</body>

2.2 调整窗口大小事件

window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数。

<div></div>
<script>
    var div = document.querySelector('div')
    window.addEventListener('resize', function(){
        // 利用这个事件可以完成响应式布局
        console.log(window.innerWidth);
        if (window.innerWidth <= 900) {
            div.style.display = 'none'
        } else {
            div.style.display = 'block'
        }
    })
</script>

3. 定时器

3.1 setTimeout（）定时器

setTimeout（）方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

setTimeout（）这个函数也称为回调函数 callback

<script>
    // 延时时间单位是毫秒 可以省略 省略默认为0
    // 写法一
    // setTimeout(function(){
    //     console.log('hello');
    // },2000);
    // 写法二
    function fun() {
        console.log('hello');
    }
    // setTimeout(fun,2000);
    // 如果页面有多个定时器，可以给定时器加标识符
    var timer1 = setTimeout(fun, 2000);
    var timer2 = setTimeout(fun, 3000);
</script>

3.2 清除setTimeout（）定时器

<button>清除定时器</button>
<script>
    var btn = document.querySelector('button');
    var timer = setTimeout(function(){
        console.log('hello');
    },2000);
    btn.addEventListener('click', function(){
        clearInterval(timer)
    })
</script>

3.3 setLnterval() 定时器

setLnterval() 方法重复调用一个函数，每隔一段时间，就去调用一次回调函数。

<script>
    setInterval(function() {
        console.log('hello');
    }, 1000);
    // setTimeout 延时时间到了，就去调用这个回调函数，只调用一次
    // setInterval 每隔一段时间就去调用这个回调函数，会重复调用
</script>

3.4 停止setLnterval() 定时器

<button id="begin">开启定时器</button>
<button id="stop">停止定时器</button>
<script>
    var begin = document.getElementById('begin');
    var stop = document.getElementById('stop');
    var timer = null;  // 全局变量
    begin.addEventListener('click', function() {
        timer = setInterval(function() {
            console.log('hello');
        },1000);
    })
    stop.addEventListener('click', function() {
        clearInterval(timer)
    })
</script>

4. location对象

location对象是最有用的BOM对象之一，提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。

location是个神奇的对象，既是window的对象也是document的对象。经过我们的对比发现，直接使用location对象也可以。

属性：

host 返回服务器名称和端口号

hostname 返回不带端口号的服务器名称

href 返回当前加载页面的完整URL

pathname 返回URL的目录和文件名

port 返回URL中指定的端口号

protocol 返回页面使用的协议

search 返回URL的查询字符串。这个字符串以问号开头

方法：

// assign() 传递一个url参数，打开新url，并在浏览记录中生成一条记录
<button>跳转页面</button>
// replace() 参数为一个url，结果会导致浏览器位置改变，但不会在历史记录中生成新记录
<button>替换页面</button>
// reload() 重新加载当前显示的页面，参数可以为boolean类型，默认为false，
<button>刷新页面</button>
<script>
  var btn = document.getElementsByTagName('button');
  btn[0].onclick = function () {
    location.assign('./test2.html')
  }
  btn[1].onclick = function () {
    location.replace('./test2.html')
  }
  btn[2].onclick = function () {
    location.reload()
  }
</script>

5. history对象

该对象保存着用户上网的历史记录。出于安全方面的考虑，开发人员无法得知用户浏览过的URL，不过借由用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退前进,注意：没有应用于History对象的公开标准，不过所有浏览器都支持该对象。

length ：返回历史列表中的网址数注意：Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始。

back() ：加载 history 列表中的前一个 URL

forward() ：加载 history 列表中的下一个 URL

go() ：加载 history 列表中的某个具体页面，负数表示向后跳转，正数表示向前跳转。

6. 防抖和节流

在进行窗口的操作或者输入框操作时，如果事件处理函数用的频率无限制，会加重浏览器和服务器的负担，此时我们就可以用防抖（debounce）和节流（throttle）的方式来减少调用频率，同时又不影响实际效果。

函数防抖

单位时间内，频繁触发一个事件，以最后一次触发为准。

<input type="text" name="" id="inp">
<script>
//输入框事件
var inp = document.getElementById('inp')
//声明全局变量存储定时器ID
    var timeID = null
    inp.oninput = function () {
    //1.先清除之前的定时器
      clearTimeout(timeID)
     //2.开启本次定时器
      timeID = setTimeout(() => {
        console.log(`你输入的值是${this.value}`);
      }, 1000);
    }
</script>

函数节流

单位时间内，频繁触发一个事件，只会触发一次。

<button onclick="btnClick()">点我呀</button>
<script>
//声明一个全局变量存储触发时间
  var lastTime = null
  function btnClick() {
    //1.每一次触发 先获取本次时间戳
    var currentTime = Date.now()
   //2.判断当前时间 与 上次触发时间 是否超过间隔
    if (currentTime - lastTime >= 3000) {
      console.log('按钮被点击了');
    //3.存储本次的触发时间
      lastTime = currentTime
    }
  }

小姜思

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM学习

BOM（Browser Object Model）即，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM 缺乏标准，JavaScript 语法的标准化组织是ECMA，DOM 的标准化组织是W3C，BOM 最初是Netscape浏览器标准的一部分。......
复制链接

扫一扫