我的BOM学习

最新推荐文章于 2024-08-04 16:33:59 发布

奋斗的猪猪霞

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量181

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_47286519/article/details/106795154

版权

一、 BOM 概述

1.什么是BOM

BOM是浏览器对象模型，独立于内容与浏览器窗口进行交互的对象，核心是window
BOM由对象组成，对象有很多的方法和属性
BOM的顶级对象是window

2.BOM的构成

BOM包含DOM。
在这里插入图片描述

二、window对象的常见事件

1.窗口加载事件

(1)window.onload当文档全部加载完成后就会触发该事件，有了它便可以将js代码放在任何地方，这种注册事件方式只能写一次，如果有多个，以最后一个为准。

<script>
//写法一
//window.onload=function () {
//  	alert('123');
//  	} 
// 写法二
window.addEventListener('load',function(){
	alert('123'); 
})
 
</script> 
<button>idanji </button>

在这里插入图片描述
（2）
document.addEventListener（'DOMContentLoaded',function(){}）只要当标签元素等加载完（不包括图片样式，flash），事件就被触发
特点：当图片很多时，用这个比较合适,加载速度更快

2. 调整窗口大小事件

window.onresize=function(){}
window.addEventListeren('resize',function(){})
窗口大小会发生变化

举例：当窗口大小到一定程度时隐藏盒子 ```window.innerWidth(当前屏幕宽度)

	<style>
		div{
			background-color: pink;
			width: 30px;
			height: 30px;

		}
	</style>	
</head>
<body>

<script>

window.addEventListener('load',function(){
	var div=document.querySelector('div');
	window.addEventListener('resize',function(){
		if (window.innerWidth<1000) {
		div.style.display='none';
	}else{
		div.style.display='block';
	}
  })	
})
 
</script> 
<div>123</div>

在这里插入图片描述

三、定时器

1.两种定时器

1）window.setTimeout(调用函数，[延迟毫秒数])；当毫秒的时间到了，在调用函数，window可以省略，延迟时间可以省略，如果省略，默认是0.。这个函数也成为回调函数callback

<script>
//写法一
//两秒以后输出时间到了
var time2=setTimeout(function(){
	console.log('时间到了');
},2000);
//写法二
function calkback(){
	console.log('爆炸');
}
//页面中有很多定时器，所以经常加标志符
var time1=setTimeout(calkback,3000);
</script>

在这里插入图片描述
举例：5秒后关闭图片
思路：5秒后，把图片隐藏

<img src="4.png" alt="">
<script>
var img=document.querySelector('img');
function calkback(){
	img.style.display='none';
}
setTimeout(calkback,5000);
</script>

（1）停止setTimeout（）定时器 window,clearTimeout(定时器的名字)

<button>点击停止定时器</button>

<script>
var btn=document.querySelector('button');
function calkback(){
	alert('baozha');
}
var timer=setTimeout(calkback,5000);
btn.addEventListener('click',function(){
	clearTimeout(timer);
})
</script>

2）setInterval(回调函数，[间隔毫秒数])每隔一段时间就调用个函数，重复调用
举例：倒计时案例
思路：
在这里插入图片描述

	<style>
		span{
			background-color: black;
			line-height: 60px;
			height:60px;
			color: white;
		}
	</style>	
</head>
<body>
<span class="hover">1</span>
<span class="minute">2</span>
<span class="second">3</span>
<script>
//获取元素
var hover=document.querySelector('.hover');
var minute=document.querySelector('.minute');
var second=document.querySelector('.second');
var inputTime =+new Date('2020-6-17 16:00:00');//用户输入的时间毫秒数
//先调用一次定时器，防止页面有空白
countDown();
//开启定时器
setInterval(countDown,1000);
function countDown(){
	var nowTime=+new Date();//返回当前时间的总毫秒数
	var times=(inputTime-nowTime)/1000//剩余时间数
	var h=parseInt(times/60/60%24);//小时
	h=h<10?'0'+h:h;
	hover.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>

在这里插入图片描述
（1）停止计时器clearInterval

<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('hello');
},1000);
})
//停止
stop.addEventListener('click',function(){
	clearInterval(timer);
})


</script>

在这里插入图片描述
案例：发送短信案例
思路：

<body>
手机号：<input type="number">
<button>发送</button>
<script>
var btn=document.querySelector('button');
var time=10;//定义剩下的秒数
btn.addEventListener('click',function(){
	btn.disabled=true;
	var timer =setIntervel(function(){
		
		
		if(time==0){
			clearInterval(timer);
			btn.disabled=false;
			btn.innerHTML='发送';

		}else{
			btn.innerHTML='还剩下'+10+'秒';
			time--;
		}
	},1000);


})

</script>

2.this:最终指向的是调用它的那个对象

四、js执行机制

1.js是单线程：

同一时间只能做一件事，不能同时进行，可能会阻塞

2.同步和异步

js提出了异步的标准，目前js允许创建多个任务
同步:执行的顺序和人物的排列顺序一致
异步：同时做多个任务

五、location对象

1.什么是location对象

获取或设置窗体的url，并可以解析url，返回的是一个对象

2.location对象的属性

重点是href，search
在这里插入图片描述


<button>发送</button>
<script>
var btn=document.querySelector('button');

btn.addEventListener('click',function(){
	//得到该网页的网址
		console.log(location.href);
		//当点击时，他就会跳转到新的地址中去
		location.href='新的地址';

})

</script>

案例分析：5秒后自动跳转到新的网页
思路：

<div></div>
<button>发送</button>
<script>
var btn=document.querySelector('button');
var div=document.querySelector('div');
var timer=5;
var times=setIntravel(function () {
		
		if (time==0) {
			location.href='新的地址';
			clearIntravel(times);
		}else{
			div.innerHTML='您将在'+timer+'秒跳转到新网页';
			time--;
		}
		
},1000);

获取url的参数数据
在这里插入图片描述

//mian.html
<form action="index.html">
用户名：<input type="text" name="uname">
<input type="submit" value="dneglu">
<button></button>

</form>
//index.html
<div></div>
<script>
var div =document.querySelector('div');
//location.search得到？uname=andy   subtr('起始位置'，截取几个字符)
var params=location.search.subtr(1);
//split('=')分割左右
var arr=params.split('=');
//将数据写入div中
div.innerHTML=arr[1]+'欢迎您';
		


</script>

在这里插入图片描述

location对象的方法

在这里插入图片描述
location.assign()可以实现后退功能。

六、navigator对象

navigator包含浏览器的信息，他有很多属性，常用的
userAgent可以知道我们当前使用的浏览器的版本
在这里插入图片描述

七、history对象

主要与浏览器历史记录进行交互白包含用户访问过的url
在这里插入图片描述

前进页面

-后退页面
在这里插入图片描述

-前进一个页面
在这里插入图片描述

-后退一个页面
在这里插入图片描述

奋斗的猪猪霞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的BOM学习

一、 BOM 概述1.什么是BOMBOM是浏览器对象模型，独立于内容与浏览器窗口进行交互的对象，核心是windowBOM由对象组成，对象有很多的方法和属性BOM的顶级对象是window2.BOM的构成BOM包含DOM。二、window对象的常见事件1.窗口加载事件(1)window.onload当文档全部加载完成后就会触发该事件，有了它便可以将js代码放在任何地方，这种注册事件方式只能写一次，如果有多个，以最后一个为准。<script>//写法一//window.onl
复制链接

扫一扫