JavaScript 快速入门七

最新推荐文章于 2024-03-19 10:52:26 发布

qq_46117056

最新推荐文章于 2024-03-19 10:52:26 发布

阅读量106

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_46117056/article/details/109519177

版权

JavaScript

BOM

BOM 概述
window 对象的常见事件
定时器

BOM

BOM有什么用

什么是BOM

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

Dom是文档对象模型，一个页面就是一个文档

Bom是浏览器对象模型，整个浏览器可以看成一个Bom
在这里插入图片描述

在Dom中的顶级对象就是document,所以想要获取页面中的元素就可以document点就可以了。

Bom的顶级对象就是window,我们想要页面大小发生变化，就用window点什么就可以了。

大家可以发现对话框在每个浏览器页面的外观都不一样，不同的浏览器自己定义了bom，所以兼容性就比较差。

BOM的构成

BOM 比 DOM 更大，它包含 DOM。
在这里插入图片描述

document.querySelector('');

其实它的完整的写法应该这样写

window.document.querySelector('');

window对象是浏览器的顶级对象 ,它具有双重角色。

1.它是 JS 访问浏览器窗口的一个接口。

理解：window是一个接口，通过这个接口可以改变浏览器的大小等。

2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

<script>
          // console.log(window.num);
			var num = 10;
			console.log(num);
			console.log(window.num);

			function f() {
				console.log(11);
			}

			f();
			//window.f();
		</script>

前面学习的对话框都属于 window 对象方法，如 alert()、prompt() （都属于bom 在浏览器里）等。

注意：window下的一个特殊属性 window.name

 alert(11);
 window.alert(11);
console.dir(window);
 //var name = 10;
 console.log(window.name);

写点击按钮弹出一个对话框，这个很简单，但是以前我们总是把js代码写在最后一个body的上面。

<body>
		<button id="btn">点击</button>
		<script>
			var btn = document.getElementById('btn');
			btn.onclick = function() {
				alert('点击成功！');
			}
		</script>
	</body>

<body>
        <script>
			var btn = document.getElementById('btn');
			btn.onclick = function() {
				alert('点击成功！');
			}
		</script>
		<button id="btn">点击</button>
		
	</body>

window对象的常见事件

窗口加载事件

window.onload = function(){}

或者

window.addEventListener();


 <script>
        //window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件。	
			window.onload = function() {
				var btn = document.getElementById('btn');
				btn.onclick = function() {
					alert('点击成功！');
				}
			}


		</script>
		
		
		
		<button id="btn">点击</button>

window.onload不会立马去执行，它是等文档内容包括图像、脚本文件、CSS 文件等全部加载完了才会去, 调用的处理函数。

//在上面的代码上在加以下代码
//有多个window.onload，会以最后一个 window.onload 为准
window.onload=function(){
				console.log('ok fine  and you');
			}

如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，怎么解决呢？

//事件触发时，不包括样式表，图片,可以写多个，每个都执行

 window.addEventListener('load',function(){
        	   console.log('123');
        	    
        });

      window.addEventListener('load',function(){
        	console.log('456');
        });
        
        window.addEventListener('load',function(){
        	console.log('789');
        });

document.addEventListener(‘DOMContentLoaded’,function(){})

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。

注意：

有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。
window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。
如果使用 addEventListener 则没有限制

调整窗口大小事件

window.onresize = function(){}

或者

window.addEventListener(“resize”,function(){});

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

 <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>



<script>
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
                //当前屏幕的宽度
                console.log(window.innerWidth);

                console.log('变化了！');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }

            })
        })
    </script>

注意：

只要窗口大小发生像素变化，就会触发这个事件。
我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

定时器

两种定时器

window 对象给我们提供了 2 个非常好用的方法-定时器。

setTimeout()

setInterval

setTimeout()定时器

window.setTimeout(调用函数, [延迟的毫秒数]);

1秒=1000毫秒

 window.setTimeout(function() {
             console.log('时间到了');

        }, 10000);
//setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
//window在调用的时候可以省略

页面中可能有很多的定时器,我们经常给定时器加标识符（名字)

  var time=setTimeout(function() {
            console.log('爆炸了！');
        }, 5000);




function call() {
            console.log('爆炸了！');

        }
        var timer1 = setTimeout(call, 3000);
        var timer2 = setTimeout(call, 5000);

停止setTimeout()定时器

window.clearTimeout()

clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。

 <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function() {
            console.log('爆炸了');

        }, 5000);
        btn.addEventListener('click', function() {
            clearTimeout(timer);
        })
    </script>

注意：

window 可以省略。
里面的参数就是定时器的标识符。

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

现在我想每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数。

那有什么方法可以解决呢？

setInterval()定时器

window.setInterval(回调函数, [间隔的毫秒数]);

setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

  //window 可以省略
setInterval(function() {
            console.log('继续输出');

        }, 1000);

停止 setInterval()定时器

window.clearInterval();

clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。

<body>
    <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; //空对象
        begin.addEventListener('click', function() {
            timer = setInterval(function() {
                console.log('加油上学人！');

            }, 1000);
        })
        stop.addEventListener('click', function() {
            clearInterval(timer);
        })
    </script>
</body>

注意：

window 可以省略。
里面的参数就是定时器的标识符。

    var begin = document.querySelector('.begin');
    var stop = document.querySelector('.stop');
    var timer = null; //空对象
    begin.addEventListener('click', function() {
        timer = setInterval(function() {
            console.log('加油上学人！');

        }, 1000);
    })
    stop.addEventListener('click', function() {
        clearInterval(timer);
    })
</script>

```

注意：