js基础-BOM基础

一. BOM基础：

a) BOM：

i. browser object model浏览器对象模型

ii. 提供让JavaScript能操作浏览器窗口的相关api（方法或函数）

iii. 没有标准，不同的浏览器会有不同兼容性问题

b) window对象：

i. 浏览器窗口对象

ii. 浏览器环境下JavaScript中的顶级对象，

iii. 所有全局对象、变量、方法以及第三方拓展对象都属于window对象的属性和方法。

1. DOM

2. HTML5相关: 本地存储音频,视频Canvas,svg

c) Window常用事件:

i. window.onload：等待所有资源都加载完再加载JavaScript代码，页面加载完事件。

ii. window. onresize：浏览器窗口大小变化时事件

 // 一、Window常用事件
        
        //用于等html节点加载完毕后再进行js对节点的渲染
        window.onload=function(){
            // alert("哈哈哈");
        }
        //浏览器窗口大小变化时事件,会监听浏览器窗口的变化
        window.onresize=function(){
            console.log('11');
        }

d) window下常用的对象及其属性：

i. navigator:导航器对象

1. 含有浏览器相关的信息。

2. 练习：判断浏览器类型：window.navigator.userAgent

  // 二、window下常用的对象及其属性：

        //1、navigator:导航器对象,含有浏览器相关的信息
        //appVersion返回浏览器的平台和版本信息
        console.log(window.navigator.appVersion);

        //userAgent返回有客户机发送服务器的user-agent头部的值，可用于判断浏览器类型
        // console.log(window.navigator.userAgent);
        //实例：判断浏览器的类型
        function diffBrowser() {
            var str = window.navigator.userAgent.toLowerCase();
            var reg=/(msie|chrome|firefox|opera|safari)/g;
            return str.match(reg)[0];
        }

ii. Location：位置对象

1. 用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

2. window.location.href获取页面ur，跳转

3. location.relaod重新加载页面

    <button id="btn1">刷新页面</button>
    <button id="btn2">跳转</button>
    <script>
        var oBtn1=document.getElementById("btn1");
        var oBtn2=document.getElementById("btn2");
        oBtn1.onclick=function(){
            window.location.reload();
        }
        oBtn2.onclick=function(){
            window.location.href="浏览历史对象.html";
        }
        console.log(window.location);
        console.log(window.location.href);

iii. History:浏览器历史对象

1. 包含了浏览器访问的历史记录

2. Back、go方法用来返回前一个ulr

3. 练习：返回上一页

 <div>历史对象</div>
    <button id="btn">返回上一页</button>
    <a href="javascript:history.back()">返回</a>
    <a href="javascript:history.go(-1)">返回</a>

    <script>
        var oBtn=document.getElementById("btn");
        oBtn.onclick=function(){
            // history.back();
            history.go(-1);
        }

e) 窗口内部文档滚动的距离：(这个很重要，一般用作导航栏在滚动到某一位置出现或者消失)

i. IE：window.document.body.scrollTop;

ii. 非IE：window.pageYOffset

iii. 滚动视听

 var oNav = document.getElementById("nav");
       //导航栏到一定位置才能出现
        window.onscroll = function(){
            console.log(document.documentElement); //html文档
            if( window.document.documentElement.scrollTop > 300 ){
                oNav.style.display = 'block';
            } 
            else{
                oNav.style.display = 'none';
            }
        }

a) 窗口对话框

i. 警告框：alert（‘警告信息’）没有返回值

ii. 确认框：confirm(‘确认信息’)返回true/false

iii. 输入框：promt(‘输入信息’)返回输入信息/null

f) 定时器：（定好时间再执行）

i. setTimeout(function,seconds)

1. 第一个参数为回调函数

2. 第二个参数为间隔执行时间,单位:毫秒

3. 只执行一次

4. 清除方式：clearTimeout(obj)

5. 值为一个对象

6. 返回的是定时器的位置（属于第几个定时器）

ii. setInterval(function,seconds)

1. 第一个参数为回调函数

2. 第二个参数为间隔执行时间

3. 循环执行

4. 清除方式:clearInterval(obj)

5. 值为一个对象

6. 返回的是定时器的位置（属于第几个定时器）

       var i = 0;
        var oTime = null;

        oTime=setTimeout(function(){
            clearTimeout(oTime);
            alert("哈哈啊哈哈");
        },3000);
        // 1.setTimeout(function,seconds)
        //只执行一次
        // var count=0;
        // var time;
        // function timeCount(){
        //     document.getElementById("text").value=count;
        //     count+=1;
        //     time=setTimeout(timeCount,1000);
        // }
        // function stopCount(){
        //     clearTimeout(time);
        // }

        //3、setInterval(function,seconds)
        //循环执行
        // 第一个参数为回调函数
        // 第二个参数为间隔执行时间
        var oTime = window.setInterval(function () {
            console.log(++i);
            if (i == 10) {
                clearInterval(oTime);
            }
        }, 1000);

一. BOM基础：

猜你喜欢