web学习---JavaScript---笔记（三）

AsiaSun.

于 2022-07-04 17:32:36 发布

阅读量171

点赞数

分类专栏： WEB 文章标签： javascript 前端学习

本文链接：https://blog.csdn.net/IOSSHAN/article/details/125514668

版权

WEB 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

BOM

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

BOM比DOM更大

在这里插入图片描述

window对象

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

它是JS访问浏览器窗口的一个接口
它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法

原来，JS需要写在元素后面，因为代码是从上而下执行的
现在，有了window可以将JS写在元素前面

使用：window.onload = function(){}，其实窗口（页面）加载事件，当文档内容完全加载完成会触发该事件，调用的处理函数

	<body>
		<script type="text/javascript">
			window.onload = function(){
				var btn = document.querySelector('button');
				btn.onclick = function(){
					alert("弹窗");
				}
			}
		</script>
		<button type="button">按钮</button>
	</body>

此时，script标签可以写在任意地方，即使是head标签也可以

注意：window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个为准

而使用window.addEventListener则没有限制个数

	<body>
		<script type="text/javascript">
			window.addEventListener('load', function(){
				var btn = document.querySelector('button');
				btn.onclick = function(){
					alert("弹窗1");
				}
			})
			
			window.addEventListener('load', function(){
				alert("弹窗2");
			})
		</script>
		<button type="button">按钮</button>
	</body>

则可以写多个

			document.addEventListener('DOMContentLoaded', function(){
				alert(33);
			})

该方法在DOM元素加载完就可以执行
而window.load必须等页面所有内容（包括DOM元素、图片、css等）加载完毕才执行，没有上面这个方法快

调整窗口大小事件

当窗口大小发生变化时，就会调用：

window.onresize = function(){};
window.addEventListener("resize", function(){});

定时器

window对象提供了两个定时器：

setTimeout()
setInterval()

setTimeout()定时器

window.setTimeout(调用函数, [延迟的毫秒数]);
setTimeout(function(){})window可省略；延迟时间也可以省略，省略代表0，立即执行

setInterval()定时器

window.setInterval(调用函数, [延迟的毫秒数]);//每隔一段时间，就去调用一次
setInterval(function(){})window可省略

setTimeout()停止定时器

window.clearTimeout(timeout ID)window可省略，timeout ID就是前面的定时器，赋值给一个变量得来的
window.clearInterval(timeout ID)window可省略，timeout ID就是前面的定时器，赋值给一个变量得来的

JS队列

JS是单线程，同一个时间只能做一件事

同步任务：都在主线程上执行
异步任务：JS的异步是通过回调函数实现的

一般而言，异步任务有以下三种：

普通事件，如click、resize等
资源加载，如load、error等
定时器
异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）

JS执行机制

先执行执行栈中的同步任务
遇到异步任务放入任务队列中
执行栈中的所有同步任务执行完毕，系统按次序读取任务队列中的异步任务，然后执行

location对象

window对象提供了location属性，用于获取或设置窗体的URL，并且可以用于解析URL。
因为这个属性返回的是一个对象，因此也被称为location对象
在这里插入图片描述

navigator 对象

navigator对象包含有关浏览器的信息，最常用的是userAgent，该属性可以返回由客户机发生服务器的user-agent头部的值
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

history对象

history.back()后退
history.forward()前进
history.go(参数)n前进n个界面，-n后退n个界面

PC端网页特效

元素偏移量offset系列

offset概述

offset其实就是偏移量，使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等
可以获取：

元素距离带有定位父元素的位置
元素自身的大小（宽高）

注意：返回的数值都不带单位

在这里插入图片描述

offset获取元素大小位置
style更改元素大小位置

例子：获取鼠标点击时，在div里面的坐标

获取鼠标在页面中的坐标(e.pageX, e.pageY)
获取盒子在页面中的坐标(e.offsetLeft, e.offsetRight)

例子：鼠标拖拽元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" lang="en">
		<title></title>
		
		<style type="text/css">
			
			.box{
				position: absolute;
				background-color: pink;
				width: 200px;
				height: 200px;
			}
		</style>
		
	</head>
	<body>
		<div class="box"></div>
		<script type="text/javascript">
			var box = document.querySelector('.box');
			
			//在鼠标按下的时候，获取鼠标的x,y
			document.addEventListener('mousedown', function(e){
				
				var mouseX = e.pageX - box.offsetLeft;
				var mouseY = e.pageY - box.offsetTop;
				
				var move = function(e){
					box.style.left = e.pageX - mouseX + 'px'
					box.style.top = e.pageY - mouseY + 'px'
				}
				
				//移动，和移除，都是在点击的情况下执行的
				
				//在鼠标移动的时候，box也移动
				document.addEventListener('mousemove', move);
				
				//在鼠标放开的时候，移除
				//首先，监听鼠标不点击
				document.addEventListener('mouseup', function(){
					//在不点击的时候，移除move监听
					document.removeEventListener('mousemove', move);
				})
			});
		</script>
	</body>
</html>

元素偏移量client系列

通过client系列的相关属性，动态的得到该元素的边框大小、元素大小
在这里插入图片描述
立即执行函数：
(function() {})()
或
(function(){}());

带参数：

(function(a, b){
	console.log(a + b);
})(1, 2)

元素偏移量scroll系列

利用该相关属性，可以动态的得到该元素的大小、滚动距离等

在这里插入图片描述
mouseover鼠标经过自身、子盒子都会触发
mouseenter鼠标经过自身会触发，经过子盒子不会触发，其不会冒泡。离开的时候，搭配mouseleave，也不会冒泡

动画函数封装

动画实现原理

核心原理：通过定时器setInterval()不断移动盒子位置

未完待续

AsiaSun.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web学习---JavaScript---笔记（三）

BOM（Browser Object Model），浏览器对象模型。它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是windowBOM比DOM更大window对象是浏览器的顶级对象，它具有双重角色：原来，JS需要写在元素后面，因为代码是从上而下执行的现在，有了window可以将JS写在元素前面使用：，其实窗口（页面）加载事件，当文档内容完全加载完成会触发该事件，调用的处理函数此时，script标签可以写在任意地方，即使是head标签也可以注意：传统注册事件方式只能写一次，如果有多个，会以最后
复制链接

扫一扫