JavaScript基础学习（四）BOM篇

2022/1/22 21:06:25

编程Tag： javascript function bom var url Location window 学习 document

本文主要是介绍JavaScript基础学习（四）BOM篇，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、BOM基本概念

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

BOM是JS访问浏览器窗口的一个接口

他是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和对象

二、window对象的常见事件

1.窗口加载事件

1.1 window.onload

window.onload是窗口加载事件，当文档内容全部加载完毕后才会触发该事件

<body>
    <script>
        window.addEventListener('load',function(){
            var btn = document.querySelector('button');
            btn.addEventListener('click',function(){
                alert('click');
            })
        })
    </script>
    <button>点击</button>
</body>

使用窗口加载事件可以将js放在任意位置，因为他是在整个页面加载完后才会执行的。

1.2 DOMContentLoaded

DOMContentLoaded会在全部dom加载完后（不包括图片 css等）立马执行，而window.onload会等DOM内的所有元素加载完后再执行，DOMContentLoaded一般用在图片较多的地方，可以更快的进行交互

<script>
        window.addEventListener('load',function(){
            var btn = document.querySelector('button');
            btn.addEventListener('click',function(){
                alert('click');
            })
        })

        document.addEventListener('DOMContentLoaded',function(){
            alert('DOMcontentload');
        })
    </script>

2.调整窗口大小事件

window.onresize = function(){}

window.addEventListener('resize',function(){});

通过window.innerWidth可以获取当前屏幕的宽度，height可以获取高度

<script>
        window.onresize = function(){
            // console.log('change');
            console.log(window.innerHeight);
            console.log(window.innerWidth);
        }
    </script>

3.定时器

3.1 setTimeout()

window.setTimeout(调用函数,[延迟毫秒数])；(window在使用中可以省略)

<script>
        var timer1 = setTimeout(function(){
            alert('time is up');
        },2000);
        var timer2 = setTimeout(function(){
            alert('time is up');
        },5000);
</script>

停止计时器：window.cleartimeout(timerID)，通过点击button来停止timer2的倒计时。

<body>
    <button>button</button>
    <script>
        var timer1 = setTimeout(function(){
            alert('time is up');
        },2000);
        var timer2 = setTimeout(function(){
            alert('time is up');
        },5000);
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            clearTimeout(timer2);
        })
    </script>
</body>

3.2 setInterval()

setInterval(function(){},间隔毫秒); 每隔延迟时间重复调用

<script>
        var timer3 = setInterval(function(){
            alert('repeat')
        },3000);
</script>

停止计时器 clearInterval(timerID)用法和setTimeout类似。

3.3倒计时效果（案例）

效果图

（只放了js的代码）

<body>
    <div>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>
    <script>
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2022-1-20 18:00:00');//设定倒计时最终的事件
        countDown();//先调用一次
        setInterval(countDown,1000);
        function countDown(){
            var nowTime = +new Date();//当前时间总毫秒数
            var times = (inputTime - nowTime) / 1000;//time是剩余时间总的秒数
            //小时
            var h = parseInt(times/60/60%24);
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;
            // 分钟
            var m = parseInt(times/60%60);
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            // 秒
            var s = parseInt(times%60);
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>

三、js的同步和异步

js语言是单线程的，同一时间只能做一件事情

而通过同步和异步可以达到同时执行多个任务的效果，js的异步是通过回调函数执行的

所有同步任务放在主线程上形成一个执行栈，

JS的执行机制：先执行执行栈中的同步任务，将同步任务中的异步任务放入任务队列中，一旦执行栈中所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，将异步任务放入执行栈中开始执行

四、location对象

window 对象给我们提供了一个 location 属任用于获取或设置窗体的URL，并且可以用于解析 URL。因为这个属性返回的是-一个对象，所以我们将这个属性也称为location对象。

4.1URL

统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL的一般语法格式为：
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name andysage-18#link

4.2location对象的属性

4.2.1 location.href

<body>
    <button>click</button>
    <script>
        var btn = document.querySelector('button');
        btn.onclick = function(){
            location.href = 'http://www.baidu.com';
        }
    </script>
</body

4.2.2获取URL参数数据

用于数据在不同页面下的传输

//index.html
<body>
    <div></div>
    <script>
        var params = location.search.substr(1);
        var arr = params.split('=');
        var div = document.querySelector('div');
        div.innerHTML = arr[1] +'balabala';
    </script>
</body>

//login.html
<body>
    <form action="index.html">
        用户名: <input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</body>

使用location.assign('http://www.baidu.com')也可以直接实现页面跳转，并且可以使用后退键

使用location.replace('URL')直接替换当前页面不能后退页面

使用location.reload(false||true)重新加载页面

五、navigator对象

navigator包含有关浏览器的信息、使用移动端或者电脑端、使用的浏览器等信息

六、history对象

通过history对象可以与浏览器历史记录进行交互，包括用户在浏览器窗口中访问过的URL

window.histiry.back()

这篇关于JavaScript基础学习（四）BOM篇的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！