JS BOM 基础()

  • 页面加载事件
  • 调整窗口大小
  • 定时器
  • location
  • history

页面加载事件

  • load

    页面所有元素加载完毕才执行
    window.addEventListener(‘load’, function () {
    var btn = document.querySelector(‘button’);
    btn.onclick = function () {
    alert(‘1’);
    }
    })

  • DOMContentLoaded

    DOM元素加载完毕执行,不包含图片 falsh css 等 加载速度比 load 快
    window.addEventListener(‘DOMContentLoaded’, function () {
    alert(‘3’);
    })

调整窗口大小

  • resize

    页面的大小发生变化就会触发
    window.addEventListener(‘resize’, function () {
    // window.innerWidth 浏览器页面的宽 window.innerHeight 浏览器页面的高
    console.log(‘宽:’ + window.innerWidth, ‘高:’ + window.innerHeight);
    if (window.innerWidth <= 800) { div.style.display = 'none'; } else { div.style.display = 'block' } })

定时器

  • setTimeou

    语法规范:window.setTimeout(调用函数,延时时间);
    此处 window 可省略 延时时间可省略 省略默认为 0 默认单位毫秒
    setTimeout(function(e){
    console.log(e);
    alert(‘倒计时已完成’);
    },2000)

    这个调用函数可以写函数也可以写函数名
    setTimeout(djs, 2000);
    function djs() {
    alert(‘倒计时已完成’);
    }

    回调函数:上一件事情干完再回过头调用函数
    例:setTimeout(调用函数,延迟时间) 等延迟时间完了再调用‘调用函数’
    setTimeout(djs,2000) 2000 毫秒过后 调用 djs

  • 清除setTimeou

  • setInterval

    每隔这个延时时间就调用一次调用函数
    var time = 1;
    setInterval(function() {console.log(time++);},1000)

  • 清除setInterval

    stop.addEventListener(‘click’, function () {
    console.log(‘暂停计时’);
    clearInterval(timer);
    })

location

  • href

    location 位置 href 超链接 location.href 跳转至超链接的位置
    location.href = ‘http://127.0.0.1:5500/js/BOM/08two.html’;

  • search

    获取 URL 参数 location.search 返回参数
    // 第一个网页

    用户名:

    // 第二个网页

  • 常见方法

history

  • 前进 forward() go(1) 后退 back() go(-1) 刷新 go(0)

    // 第一个网页

    点击我去下一页




    // 第二个网页

    点击我去上一页


————————
  • 页面加载事件
  • 调整窗口大小
  • 定时器
  • location
  • history

页面加载事件

  • load

    页面所有元素加载完毕才执行
    window.addEventListener(‘load’, function () {
    var btn = document.querySelector(‘button’);
    btn.onclick = function () {
    alert(‘1’);
    }
    })

  • DOMContentLoaded

    DOM元素加载完毕执行,不包含图片 falsh css 等 加载速度比 load 快
    window.addEventListener(‘DOMContentLoaded’, function () {
    alert(‘3’);
    })

调整窗口大小

  • resize

    页面的大小发生变化就会触发
    window.addEventListener(‘resize’, function () {
    // window.innerWidth 浏览器页面的宽 window.innerHeight 浏览器页面的高
    console.log(‘宽:’ + window.innerWidth, ‘高:’ + window.innerHeight);
    if (window.innerWidth <= 800) { div.style.display = 'none'; } else { div.style.display = 'block' } })

定时器

  • setTimeou

    语法规范:window.setTimeout(调用函数,延时时间);
    此处 window 可省略 延时时间可省略 省略默认为 0 默认单位毫秒
    setTimeout(function(e){
    console.log(e);
    alert(‘倒计时已完成’);
    },2000)

    这个调用函数可以写函数也可以写函数名
    setTimeout(djs, 2000);
    function djs() {
    alert(‘倒计时已完成’);
    }

    回调函数:上一件事情干完再回过头调用函数
    例:setTimeout(调用函数,延迟时间) 等延迟时间完了再调用‘调用函数’
    setTimeout(djs,2000) 2000 毫秒过后 调用 djs

  • 清除setTimeou

  • setInterval

    每隔这个延时时间就调用一次调用函数
    var time = 1;
    setInterval(function() {console.log(time++);},1000)

  • 清除setInterval

    stop.addEventListener(‘click’, function () {
    console.log(‘暂停计时’);
    clearInterval(timer);
    })

location

  • href

    location 位置 href 超链接 location.href 跳转至超链接的位置
    location.href = ‘http://127.0.0.1:5500/js/BOM/08two.html’;

  • search

    获取 URL 参数 location.search 返回参数
    // 第一个网页

    用户名:

    // 第二个网页

  • 常见方法

history

  • 前进 forward() go(1) 后退 back() go(-1) 刷新 go(0)

    // 第一个网页

    点击我去下一页




    // 第二个网页

    点击我去上一页