js中BOM的使用技巧与注意事项

指挥官乄
155 阅读4分钟

BOM操作

BOM概述

  1. BOM是浏览器对象模型，与浏览器进行交互效果
  2. BOM的构成

BOM结构.png

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

  1. 它是js访问浏览器窗口的一个接口
  2. 是一个全局对象，定义在全局作用域中的变量、函数都会编程window对象的属性和方法，调用的时候window可以省略
  3. window下的一个特殊属性，window.name

window常见的事件

  1. 窗口加载事件
  1. 语法： window.load = function() {}
  2. 是窗口加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本，css等文件）
  3. window.load传统注册方式只能写一次，如果有多个， 会以最后一个为准
  4. 如果使用addEventListener，则没有限制

第二中窗口加载事件

document.addEventListener('DOMContentLoaded',function(){})
  1. ie9以上才能支持，仅当加载DOM完成之后就执行，不包括图片、css样式（加载速度比load更快一些）
  1. 定时器
  • setTimeout(调用函数，延迟的毫秒数)
调用函数不需要添加（），var timer = setTimeout（callback,2000）
​
添加（）的方式，不推荐，setTimeout（'callback()',2000）
​
停止定时器： clearTimeout(timer);
  • setInterval(调用函数，延迟的毫秒数)
调用函数不需要添加（），var timer = setInterval（callback,2000）
​
添加（）的方式，不推荐，setInterval（'callback()',2000）
​
停止定时器： clearTimeout(timer);

区别： setInterval 反复调用同一个函数，每隔这个延迟时间就去调用这个回调函数

setTimeout 延迟时间到了，就去调用这个回调函数，调用一次就结束了

js执行机制：是一个典型的单线程

offset系列（元素偏移量）

  • 获得元素距离带有父元素的位置
  • 获取元素自身大小（宽高）
  • 注意：返回值是不带单位的！ 如果要使用一定要注意是否需要使用单位

offset常用的属性

offset系列属性作用
element.offsetParent返回该元素带有定位的父级元素（标签以及内容），如果父级元素没有定位则返回body
element.offsetTop返回元素相对带有定位父元素上方的偏移
element.offsetLeft返回元素相对带有定位父元素左边的偏移
element.offsetWidth返回自身padding、边框、内容区的宽度，返回值不带单位
element.offsetHeight返回自身padding、边框、内容区的高度，返回值不带单位

offset 与style 的区别

offset与style的区别.png

client系列

  • 和offset系列的区别就是clientWidth 、clientHeight 获取宽高不包括边框

client系列.png

立即执行函数

两种表达方式

1. (function() {} ())
2. (function() {})()  
两者后面的（） 表示调用函数的意思
​
立即执行函数最大的作用就是，独立创建了一个局部作用域，里面的所有变量都是局部变量，不会有命名冲突的问题

scroll系列

  • 可以动态得到元素大小、滚动距离

scroll系列.png

  • scrollHeight 得到的是实际内容的高度，如果内容超出了盒子的宽度的到的还是实际内容的高度，而clientHeight将得到的还是盒子的高度

理解scrollTop和scrollHeight

scrollTop与scrollheight的理解.png

三大系列的区别（重要）

三大系列的区别.png

主要用法：

  1. offset系列，经常用于获得元素位置 offsetLeft、 offsetTop
  2. client经常用户获取元素大小 clientWidth、clientHeight
  3. scroll经常用于获取滚动条距离 scrollTop 、scrollLeft
  4. 页面的滚动距离通过window.pageXOffset 获得

鼠标进入和离开

mouseenter 与 mouseleave 与 mouseover 与mouseout 两组鼠标经过和离开事件的区别

  1. mouseenter 与mouseover ： 两者都是鼠标移动到元素上就会触发

区别： mouseover 鼠标经过自身盒子会触发，经过子盒子也会触发。mouseenter 只经过自身盒子会触发，这样mouseenter 就不会出现冒泡行为

  1. mouseleave 与mouseout ： 两者的区别同上一样！

常用mouseenter 与 mouseleave

封装简单的动画函数

核心原理： 通过定时器setInterval（）不断的改变盒子的位置

实现步骤;

  1. 获得当前盒子的位置
  2. 让盒子在当前位置上加1一个移动距离
  3. 利用定时器不断重复这个操作
  4. 加一个结束定时器的条件
  5. 注意此元素需要添加定位，才能使用element.style.left;
<style>
    div {
        /* 一定要添加定位，不然不能改变div.style.left */
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    span {
        /* 一定要添加定位，不然不能改变div.style.left */
        position: absolute;
        width: 300px;
        height: 300px;
        top: 300px;
        background-color: skyblue;
    }
</style>
​
<body>
    <div></div>
    <span></span>
</body>
<script>
    var div = document.querySelector('div');
    var span = document.querySelector('span')
    animate(div,400,30);
    animate(span,600,30);
​
​
// 封装函数
    function animate(obj, target,time) {
        var timer = setInterval(function () {
            if (obj.offsetLeft >= target) {
                clearInterval(timer);
            }
            obj.style.left = obj.offsetLeft + 3 + 'px'; // 一定要添加单位，不然移动不了
        }, time)
    }
</script>
avatar
文章
阅读
粉丝