Web API笔记04 BOM元素相关

1.BOM

• BOM：Browser Object Model，浏览器对象模型
• BOM研究的是浏览器的每一个页面window，书写时可以省略
• window对象是浏览器的顶级对象，它是js访问浏览器窗口的一个接口；它是一个全局变量，定义在全局作用域中的变量、函数都会变成window对象的属性和方法

1.1常见事件

• onload ，窗口（页面）加载事件，当文档内容完全家在完成后会触发该事件，可以把js写在任何位置
• DOMContentLoaded ，DOM加载完毕，不包括图片、flash、css等就可以执行，加载速度更快一些
• onresize ，调整窗口大小加载事件

1.2常见方法

• setTimeout ，延时器
  1. setTimeout(调用函数，延迟时间)
  2. 延迟时间单位是毫秒，省略不写默认为0
  3. 这个调用函数可以直接写函数，也可以写函数名
  4. 页面中会出现很多个定时器，需要给每个定时器加标识符（名字）
• clearTimeout， 清除延时器
  1. clearTimeout(变量名)
  2. 首先要将延时器声明变量
• setInterval， 定时器
  1. setInterval(调用函数，延时时间)
• setTimeout 执行一次函数后就结束这个定时器；setInterval 每隔固定的时间就会执行这个函数
• 发送短信案例代码

		var btn = document.querySelector('button');
        var time = 5; //定义剩下的秒数
        btn.addEventListener('click',function(){
            btn.disabled = true;
            var timer = setInterval(function(){
                if(time == 0){
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    time = 5;
                    return;
                }else{
                    btn.innerHTML = `还剩下${time}秒`;
                    time--;
                }
            },1000)
        })

2.this指向问题

2.1函数模式

• this指向跟函数调用模式有关
• 代码注释

		//1、函数模式  this => window
        function fn(){
            console.log(this);//输出window
        };
        fn();

2.2方法模式

• this指向宿主对象
• 代码注释

		//2、方法模式  this => 宿主对象
        var obj = {
            sayHi:function(){
                console.log(this);//输出obj
            }
        }
        obj.sayHi();

2.3构造器模式

• this指向实例
• 代码注释

		function Person(name,age){
            this.name = name;
            this.age = age;
        };
        var p = new Person('xiaoding',27);
        console.log(p);//输出p

3.事件队列

• js的定义：js是一门运行在客户端，面向对象的，事件驱动的，单线程的编程语言
• 同步：按时间顺序一步一步走
• 异步：在同一个时间段做多个事件
• 单线程：js只有一个解析器
• js的执行机制：主线程，事件队列
  1. 先执行主线程的代码
  2. 主线程的代码执行完毕时，再执行事件队列中的代码
• 前端js事件中的事件队列代码
  1. setTimeout、setInterval，时间到了
  2. 所有以on开头的，事件触发了
  3. ajax中的onreadystasechange，数据从服务器返回了

4.location对象

• window对象的一个属性
• url：http://www.xxx.com:80/abc/index.html?name&age#link
  1. 协议protocol：http、https
  2. 服务器地址：www.xxx.com
  3. 端口port：80
  4. 文件路径path：abc/index.html
  5. 参数search：？name&age
  6. 锚点hash：#link
• location.href，跳转页面
• location.assign() ， 跳转页面，可以后退页面
• location.replace() ， 跳转页面，不能后退
• location.reload()， 重新加载页面，相当于刷新 括号里为true时，强制刷新
• navigator 导航对象