javascript之location常用属性和方法

文章目录

  • 前言
  • 为什么使用location的属性和方法呢？
  • 属性展示
    • href
    • host
    • hostname
    • port
    • protocol
    • pathname
  • 方法展示
    • replace(url)
    • assign(url)
    • reload()
    • toString()
  • 总结
    • 属性总结：
    • 方法总结：

前言

本章学习的是location常用属性和方法

为什么使用location的属性和方法呢？

使用location的属性和方法可以让我们实现对浏览器地址栏URL的获取和操作，从而实现以下功能：

获取当前页面的URL信息：通过获取location的属性如href、host、pathname等，我们可以获取当前页面的URL的各个部分，从而进行相关的处理。

页面跳转：通过使用location的assign()方法，我们可以加载一个新的URL，实现页面跳转的功能。例如，当用户点击某个链接或者按钮时，我们可以通过assign()方法将用户导航到另一个URL。

页面刷新：使用location的reload()方法可以重新加载当前页面，让页面重新获取最新的内容。

修改URL参数：通过修改location的search属性，我们可以对URL的查询字符串进行修改。这在需要通过URL参数传递数据的情况下特别有用，例如在表单提交时将表单数据作为URL参数传递给后台。

静态路由：在一些前端框架中，我们可以使用location的hash属性来实现前端的路由功能。通过监听hashchange事件，我们可以根据URL中的锚点变化来切换视图，从而实现SPA（单页面应用）的效果。

总之，使用location的属性和方法可以帮助我们在浏览器中对URL进行各种操作，从而实现页面跳转、参数传递、刷新页面等功能。

属性展示

href

返回或设置当前页面的URL地址

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function fun4(){location.href="djh.html";}</script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>

运行结果：

点击前：
在这里插入图片描述
点击后：
在这里插入图片描述

host

返回当前页面的主机名和端口号

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function fun3(){alert(location.host)}</script>
</head>
<body>
<input type="button" value="返回当前页面信息" onclick="fun3()">
</body>
</html>

运行结果：

点击前：
在这里插入图片描述

点击后：
在这里插入图片描述

hostname

返回当前页面的主机名。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function fun3(){alert(location.hostname)}</script>
</head>
<body>
<input type="button" value="返回当前页面信息" onclick="fun3()">
</body>
</html>

运行结果：

点击前：
在这里插入图片描述

点击后：
在这里插入图片描述

port

返回当前页面的端口号。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function fun3(){alert(location.port)}</script>
</head>
<body>
<input type="button" value="返回当前页面信息" onclick="fun3()">
</body>
</html>

运行结果：

点击前：
在这里插入图片描述
点击后：
在这里插入图片描述

protocol

返回当前页面的协议。
代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function fun3(){alert(location.protocol);}</script>
</head>
<body>
<input type="button" value="返回当前页面信息" onclick="fun3()">
</body>
</html>

运行结果：

点击前：
在这里插入图片描述

点击后：

在这里插入图片描述

pathname

返回当前页面的路径部分。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function fun3(){alert(location.pathname);}</script>
</head>
<body>
<input type="button" value="返回当前页面信息" onclick="fun3()">
</body>
</html>

运行结果：

点击前：
在这里插入图片描述
点击后：
在这里插入图片描述

方法展示

replace(url)

加载一个新的URL，并替换当前的历史记录。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function fun4(){location.replace("djh.html");}</script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>

运行结果：

点击前：

在这里插入图片描述

点击后：
在这里插入图片描述

assign(url)

加载一个新的URL，并在浏览器历史记录中生成新的记录。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function fun4(){location.assign("djh.html");}</script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>

运行结果：

点击前：

在这里插入图片描述

点击后：
在这里插入图片描述

reload()

重新加载当前页面。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function fun4(){location.reload();}</script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>

运行结果：

点击前：

在这里插入图片描述

点击后：
在这里插入图片描述

toString()

返回当前页面的完整URL字符串。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function fun4(){alert(location.toString());}</script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>

运行结果：

点击前：

在这里插入图片描述

点击后：
在这里插入图片描述

总结

属性总结：

关键单词作用
href返回或设置当前页面的URL地址。
host返回当前页面的主机名和端口号。
hostname返回当前页面的主机名。
port返回当前页面的端口号。
protocol返回当前页面的协议。
pathname返回当前页面的路径部分

方法总结：

关键单词作用
assign(url)加载一个新的URL，并在浏览器历史记录中生成新的记录。
replace(url)加载一个新的URL，并替换当前的历史记录。
reload()重新加载当前页面。
toString()返回当前页面的完整URL字符串。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/307511.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

虚拟机域环境的搭建

虚拟机域环境的搭建

开始准备两台虚拟机Windows Server 2016和Windows10. Windows Server 2016的配置&#xff1a; 1.要用Administrator管理员&#xff0c;首先创建一个Administrator管理员 在此就可以创建一个新用户 然后退出登录就可以了。 2.开始环境的搭建 第一步&#xff1a; 第二步&…
阅读更多...
{MySQL} 数据库约束 表的关系 新增删除 修改 查询

{MySQL} 数据库约束 表的关系 新增删除 修改 查询

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、数据库约束1.1约束类型&#xff1a;1.2 NULL约束1.3unique 唯一约束1.4 DEFAULT&#xff1a;默认值约束1.5 PRIMARY KEY&#xff1a;主键约束1.6 FOREIGN K…
阅读更多...
Java线程池ThreadPoolExecutor源码解析

Java线程池ThreadPoolExecutor源码解析

Java线程池ThreadPoolExecutor源码解析 1.ThreadPoolExecutor的构造实现 以jdk8为准&#xff0c;常说线程池有七大参数&#xff0c;通常而言&#xff0c;有四个参数是比较重要的 public ThreadPoolExecutor(int corePoolSize,int maximumPoolSize,long keepAliveTime,TimeUnit …
阅读更多...
安装最新版的 g++

安装最新版的 g++

下载MinGW64 GitHub下载地址 win11 64位 下载图中那个 设置全局变量 重新修改配置路径。 搞定。
阅读更多...
Vue - 实现文件导出文件保存下载

Vue - 实现文件导出文件保存下载

1 文件导出&#xff1a;使用XLSX插件 需求背景&#xff1a;纯前端导出&#xff0c;如 在前端页面勾选部分表格数据&#xff0c;点击"导出"按钮导出Excel文件。 实现思路&#xff1a; 1.通过XLSX插件的 XLSX.utils.book_new()方法&#xff0c;创建excel工作蒲对象wb…
阅读更多...
使用 sourcetree 的《遴选》功能

使用 sourcetree 的《遴选》功能

假设你有一个分支&#xff0c;有两个提交 A&#xff0c;和B&#xff0c;你现在想在A提交的基础上把 B提交的功能做修改&#xff0c;你可以使用 遴选功能。 在A 提交的基础上新建一个分支&#xff0c;然后在B提交上面&#xff0c;右键&#xff0c;选择 遴选&#xff0c;那么B修改…
阅读更多...
DS18B20温度检测及其液晶显示

DS18B20温度检测及其液晶显示

#include<reg51.h> //包含单片机寄存器的头文件 #include<intrins.h> //包含_nop_()函数定义的头文件 unsigned char code digit[10]{"0123456789"}; //定义字符数组显示数字 unsigned char code Str[]{"Test by DS18B20"}; //说明…
阅读更多...
Java注解之@Autowired，一文掌握@Autowired注解知识(3)

Java注解之@Autowired，一文掌握@Autowired注解知识(3)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…
阅读更多...
电子学会C/C++编程等级考试2022年09月（八级）真题解析

电子学会C/C++编程等级考试2022年09月（八级）真题解析

C/C++等级考试（1~8级）全部真题・点这里 第1题：道路 N个以 1 … N 标号的城市通过单向的道路相连:。每条道路包含两个参数：道路的长度和需要为该路付的通行费(以金币的数目来表示) Bob and Alice 过去住在城市 1.在注意到Alice在他们过去喜欢玩的纸牌游戏中作弊后，Bob和她…
阅读更多...
【JS 逆向百例】steam 登录 Protobuf 协议详解

【JS 逆向百例】steam 登录 Protobuf 协议详解

声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;不提供完整代码&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 本文章未…
阅读更多...
MySQL函数、AVG | MIN | MAX | COUNT | SUM、慢查询

MySQL函数、AVG | MIN | MAX | COUNT | SUM、慢查询

MySQL函数、慢查询 1、函数1.日期函数2.两个日期的时间差3.查询距离时间的间隔时间4.常用的字符串函数5.常用的数学函数6.常用的聚合函数 2、慢查询1.什么是慢查询&#xff1f; 从需求出发&#xff0c;在数据的操作过程中经常会有以下的问题&#xff1b;求和、最大值、最小值、…
阅读更多...
亚马逊bsr排名的影响因素，如何提高BSR排名？-站斧浏览器

亚马逊bsr排名的影响因素，如何提高BSR排名？-站斧浏览器

亚马逊BSR排名的影响因素有哪些&#xff1f; 销售速度&#xff1a;BSR排名主要基于产品的销售速度&#xff0c;即最近一段时间内的销售量。销售速度越快&#xff0c;BSR排名越高。 销售历史&#xff1a;亚马逊会考虑产品的历史销售数据&#xff0c;新上架的产品可能需要一段时…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023