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

    BOM

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

    BOM比DOM更大

    在这里插入图片描述

    window对象

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

    1. 它是JS访问浏览器窗口的一个接口
    2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    此时，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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    则可以写多个

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

    • 1
    • 2
    • 3

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

    调整窗口大小事件

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

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

    • 1
    • 2

    定时器

    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的异步是通过回调函数实现的

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

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

    JS执行机制

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    元素偏移量client系列

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

    带参数：

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

    • 1
    • 2
    • 3

    元素偏移量scroll系列

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

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

    动画函数封装

    动画实现原理

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

    未完待续

  • 相关阅读:
    香港硬防服务器的防御有什么优缺点？
    阿里云有奖体验：如何使用 PolarDB-X
    回到街头 - 数字时尚嘉年华：Web3的时尚未来，4月香港兰桂坊盛大启幕
    MQTT- emqx 安装指南
    RabbitMq
    【牛客刷题】链表的奇偶重排
    合格论文的七个要素！
    【matlab图像处理笔记4】【图像变换】（三）图像的霍夫变换
    neo4j数据库导出
    图解Kernel Device Tree(设备树)的使用
  • 原文地址：https://blog.csdn.net/IOSSHAN/article/details/125514668