WebAPI第三天学习总结—— location对象、navigator对象、history对象

本文链接：https://blog.csdn.net/weixin_52819925/article/details/119762326

location对象

什么是 location 对象

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

URL

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

URL 的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议常用的http ，ftp ， maito等
host	主机（域名） www.baidu.com
port	端口号（可选）,省略时使用方案的默认端口如http的默认端口为80
path	路径，由零或多个’/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query	参数，以键值对的形式，通过&符号分隔开来
fragment	片段，#后面内容常见于链接锚点

location 对象的属性

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

案例：5分钟自动跳转页面

在这里插入图片描述

案例分析：

①利用定时器做倒计时效果
②时间到了，就跳转页面。使用 location.href

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击</button>
    <div></div>

    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener