BOM（二）

最新推荐文章于 2023-10-04 16:21:50 发布

红人日天

最新推荐文章于 2023-10-04 16:21:50 发布

阅读量135

点赞数

分类专栏： WebAPI编程文章标签： js javascript bom

本文链接：https://blog.csdn.net/zhr_beyond/article/details/114573591

版权

WebAPI编程专栏收录该内容

13 篇文章 4 订阅

订阅专栏

BOM（二）

1.JS执行队列

（1）JS是单线程

JS语言的一大特点是单线程，同一时间只能做一件事

（2）同步和异步

同步：前一个任务执行完执行下一个任务

异步：任务同时进行

本质区别：流水线上各个流程的执行顺序不同

① 同步任务

同步任务都在主线程上执行，形成一个执行栈

② 异步任务

JS的异步是通过回调函数实现的

异步任务有以下三种类型

1. 普通事件，如 click、resize等

2. 资源加载，如 load、error等

3. 定时器，如 setInterval、setTimeout等

异步任务相关的回调函数添加到任务队列中（任务队列也称消息队列）

（3）执行机制

1. 先执行执行栈中的同步任务

2. 异步任务放入到任务队列中

3. 当执行栈的所有同步任务执行完毕，系统会按照次序读取任务队列中的异步任务,异步任务结束等待状态，进入执行栈，开始执行

由于主线程不断的重复任务、执行任务、获取任务、再执行，所以称这种机制为事件循环（event loop）

2. location 对象

（1）什么是 location 对象

window 对象给我么提供了一个location 属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性称为location对象

（2）URL

统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它

（3）location对象的属性

location对象属性	返回值
location.href★	获取或者设置整个URL
location.host	返回主机（域名）
location.prot	返回端口号如果未写返回空字符串
location.pathname	返回路径
location.search★	返回参数
location.hash	返回片段 #后面内容常见于链接锚点

案例：5秒之后自动跳转页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
	</head>
	<body>
	    <div></div>
	    <script>
	        var div = document.querySelector('div');
	        var timer = 5;
	        setInterval(function() {
	            if (timer == 0) {
	                location.href = 'http://www.baidu.cn';
	            } else {
	                div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
	                timer--;
	            }
	
	        }, 1000);
	    </script>
	</body>
</html>

案例：获取URL参数数据
登录页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
	</head>
	<body>
	    <form action="index.html">
	        用户名： <input type="text" name="uname">
	        <input type="submit" value="登录">
	    </form>
	</body>
</html>

首页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
	</head>
	<body>
	    <div></div>
	    <script>
	        console.log(location.search); // ?uname=tiantian
	        // 1.先去掉？  substr('起始的位置'，截取几个字符);
	        var params = location.search.substr(1); // uname=tiantian
	        console.log(params);
	        // 2. 利用=把字符串分割为数组 split('=');
	        var arr = params.split('=');
	        console.log(arr); //["uname", "tiantian"]
	        var div = document.querySelector('div');
	        // 3.把数据写入div中
	        div.innerHTML = arr[1] + '欢迎您';
	    </script>
	</body>
</html>

在这里插入图片描述

3.location 对象的方法

location对象方法	返回值
location.assign()	和href一样，可以跳转页面（也称重定向页面）
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮如果参数为true，强制刷新