# BOM

最新推荐文章于 2024-09-26 01:42:12 发布

大一的小伙子

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量53

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2301_76815287/article/details/130653447

版权

BOM

BOM:浏览器对象模型.
window中包含navigator,location,document,history,screen.
window 是浏览器内置中的全局对象,我们所学习的所有的Web APIs的知识内容都基于window对象实现的.
doucument是实现DOM的基础,它其实是依附于Window的属性.
注:依附于window对象的所有属性和方法,可以使用时忽略window

定时器-延时函数:

JS中内置的一个用来让代码延迟执行的函数,叫setTimeout.
语法:setTimeout(回调函数,等待的毫秒数).

<body>
	<button>解除定时器 </button>
	<script>
		let btn=doucument.querySelector('button')
		let timer= setTimeout(function(){
			console.log(111)
		},3000)
		//仅仅执行一次
		btn.addEventListener('click',function(){
			clearTimeout(timer)		
		})
</body>

回调函数:

__高阶函数:可以被简单理解为函数的高级应用,JS中函数可以被当作值来对待,基于这个特性实现函数的高级应用.
回调函数:如果我们将函数A作为参数传递给函数B时,我们称A为回调函数.

setTimeout(function(){console.log(111)},3000)

利用递归函数实现setInterval
<script>
		let div=doucument.querySelector('div')
		function fn(){
			div.innerHTML=new Date().toLocaleString()
			setTimeout(fn,1000)
		}
		fn()
</script>

定时器-间歇函数:

网页中经常会需要一种功能:每隔一段时间需要自动执行一段代码,不需要我们手动去触发.
目标:能够使用定时器函数重复的执行代码
定时函数可以开启和关闭定时器
语法:setInterval(函数,间隔时间)

function fn(){
			console.log("月薪4万")
		}
setInterval(show,1000)//注意如果写show()就直接调用函数了.
//定时器返回的是一个数字,定时器的数量序号.

关闭定时器:clearInterval

let 变量 =setInterval(函数,间隔时间)
clearInterval(变量名)

案例:倒计时

1.禁用按钮:
<button class="btn" disabled>我已经阅读用户协议了(6) </button>
2.获取元素
<script>
		let btn=doucument.querySelector('button')
		3.计算逻辑:我们需要一个变量用来计数
		let i=6;
		let timer=setInterval(function(){
			i--
			btn.innerHtml=`我已经阅读用户协议了($(i))`
			if(i==0){
				clearInterval(timer)
				btn.disabled=false
				btn.innerHtml='我同意该协议'
			}
		},1000)
</script>

JS执行机制:

JS中有同步与异步

同步:

__前一个任务执行完在执行后一个任务,程序的执行顺序与任务的排列顺序是一致的,同步的.
同步任务:同步任务都在主线程上执行,形成一个执行栈

异步:

在做一件很长的事情同时处理其他任务
异步任务:JS的异步任务是通过回调函数实现的

事件循环:

执行顺序:
1.先执行执行栈中的任务
2.异步任务放入任务栈中
3.一旦执行栈中的任务执行完毕,执行栈将读取异步任务,再执行.

location对象:

location的数据类型是对象,它拆分并保存了URL地址的各个组成部分.
常用的属性和方法:
1.href属性获取完整的URL地址,对其赋值时用于地址的跳转,给的地址是字符串

//支付成功后自动跳转
<body>
	<a href="网站">支付成功,5秒后返回首页</a>
	<script>
		let a=doucument.querySelector('a')
		let i=5;
		let timer=setInterval(function(){
			i--
			a.innerHtml=`支付成功,$(i)秒后返回首页)`
			if(i==0){
				clearInterval(timer)
				//跳转页面:
				location.href='原网页'
			}
		},1000)
</script>
</body>

2.search属性获取地址中携带的参数,符号?后面部分
3.hash属性获取地址中的哈希值,符号#后面的部分
4.reload方法用来刷新当前页面,传入参数true时表示强制刷新