javascript中location对象的属性与方法

前言

本章介绍js中的location中的属性和方法。

文章目录

    • 前言
    • 什么是location
    • 为什么要用location
    • location对象属性
    • location对象方法
    • 总结

什么是location

在JavaScript中,location 是一个包含当前页面的URL信息的对象。它允许你获取和操作当前页面的URL,比如获取当前页面的URL,获取URL中的特定部分(比如主机名、路径、查询参数等),以及在不刷新页面的情况下改变页面的URL。location 对象提供了各种方法和属性来帮助你操作URL。以下是一些location 对象的常用属性和方法:

  • location.href:获取或设置完整的URL。
  • location.host:获取或设置主机名和端口号。
  • location.hostname:获取或设置主机名。
  • location.protocol:获取或设置协议部分(如http://或https://)。
  • location.pathname:获取或设置路径部分。
  • location.search:获取或设置查询参数部分。
  • location.hash:获取或设置URL中的哈希部分。
  • location.reload():重新加载当前页面。
  • location.replace(url):加载一个新的URL并替换当前的URL。

通过使用location 对象,你可以方便地获取和操作当前页面的URL信息,从而实现页面导航、URL参数传递、页面刷新等功能。

为什么要用location

在JavaScript中,location 对象是一个非常常用的对象,因为它提供了许多有用的功能来处理当前页面的URL。以下是一些使用location 的常见用途:

  1. 获取当前页面的URL:通过location.href 属性可以获取当前页面的完整URL,包括协议、主机、路径、查询参数和哈希部分。

  2. 解析URL的各个部分:通过location.protocollocation.hostlocation.pathnamelocation.searchlocation.hash 等属性,可以分别获取URL的协议、主机名、路径、查询参数和哈希部分。

  3. 导航到新页面:通过location.hreflocation.assign() 方法,可以将浏览器导航到一个新的URL。这可以用于跳转到其他页面或刷新当前页面。

  4. 修改当前页面的URL:通过location.replace()location.href 属性,可以修改当前页面的URL。这可以用于在不刷新页面的情况下改变URL,例如在单页应用中实现页面切换效果。

  5. 获取和设置URL的查询参数:通过location.search 属性可以获取URL中的查询参数部分,也可以通过修改location.search 的值来修改URL的查询参数。

总而言之,location 对象提供了许多有用的功能,可以方便地处理当前页面的URL。无论是获取URL信息、导航到新页面还是修改URL,location 都是一个非常有用的工具。

location对象属性

属性描述
hash设置或返回从井号 (#) 开始的 URL(锚)。
host设置或返回主机名和当前 URL 的端口号。
hostname设置或返回当前 URL 的主机名。
href设置或返回完整的 URL。
pathname设置或返回当前 URL 的路径部分。
port设置或返回当前 URL 的端口号。
protocol设置或返回当前 URL 的协议。
search设置或返回从问号 (?) 开始的 URL(查询部分)。

location对象方法

  • location.assign()
    跟href一样,可以跳转页面,记录历史,可以后退。

    代码示例

    <body>
    <input type="button" value="跳转百度" onclick="f1()">
    <script>function f1() {location.assign('https://www.baidu.com');}
    </script>
    </body>
    

    结果:
    点击前
    在这里插入图片描述
    点击后
    在这里插入图片描述
    可以看到网址为百度,我就不截太大的图了。

  • location.replace()
    替换当前页面,因为不记录历时,所以不能后退页面。

    代码演示:

    <body>
    <input type="button" value="跳转百度" onclick="f1()">
    <script>function f1() {location.replace('https://www.baidu.com');}
    </script>
    </body>
    

    结果:
    点击前
    在这里插入图片描述
    点击后
    在这里插入图片描述
    可以看到不能回到上一个页面。

  • location.reload()
    强制刷新页面,从服务器重新请求! (如果有数据提交的话,会提示是否提交的),迫使浏览器重新下载当前的页面。

    代码演示:

    <body>
    <input type="button" value="刷新页面" onclick="f1()">
    <script>function f1() {location.reload();}
    </script>
    </body>
    

    结果:
    在这里插入图片描述
    点击后会刷新页面。

总结

属性/方法描述
location.href获取/设置当前页面的完整URL。
location.protocol获取当前页面的协议(例如,"http:"或"https:")。
location.host获取当前页面的主机名和端口号。
location.hostname获取当前页面的主机名。
location.port获取当前页面的端口号。
location.pathname获取当前页面的路径部分。
location.search获取当前页面的查询参数部分(以问号开头)。
location.hash获取当前页面的锚点部分(以井号开头)。
location.assign(url)导航到指定的URL。
location.replace(url)使用指定的URL替换当前页面,不会生成新的历史记录。
location.reload()重新加载当前页面。
location.search = queryString将查询参数部分设置为指定的查询字符串。
location.hash = hashValue将锚点部分设置为指定的值。

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

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

相关文章

速通C语言第十二站 文件操作

系列文章目录 速通C语言系列 速通C语言第一站 一篇博客带你初识C语言 http://t.csdn.cn/N57xl 速通C语言第二站 一篇博客带你搞定分支循环 http://t.csdn.cn/Uwn7W 速通C语言第三站 一篇博客带你搞定函数 http://t.csdn.cn/bfrUM 速通C语言第四站 一篇博客带…

QML 项目中使用 Qt Design Studio 生成的UI界面

作者&#xff1a;billy 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 前言 今天来和大家聊一下 Qt Design Studio 这个软件。这个软件的主要功能是用来快速完成 UI 界面&#xff0c;就和 widget 中的 desig…

Vue.js 中使用 Watch 选项实现动态问题判断与展示答案

组件结构 以下是组件的基本结构&#xff1a; <template><div><!-- 输入框&#xff0c;用于输入问题 --><p>提出一个是/否问题&#xff1a;<input v-model"question" :disabled"loading" /></p><!-- 显示答案 --&…

栈实现后缀表达式的计算

后缀表达式计算 过程分析 中缀表达式 &#xff08;15&#xff09;*3 > 后缀表达式 153* (可参考这篇文章&#xff1a;中缀转后缀) 第一步&#xff1a;我们从左至右扫描 后缀表达式(已经存放在一个字符数组中)&#xff0c;遇到第一个数字字符 ‘1’ 放入栈中第二步&#xf…

市场复盘总结 20240103

仅用于记录当天的市场情况,用于统计交易策略的适用情况,以便程序回测 短线核心:不参与任何级别的调整 昨日回顾: 方法一:指标选股 select * from dbo.ResultAll where 入选类型 like %指标选股% and 入选日期=20240103;方法二:趋势选股法 1、最低价持续3日上涨 2、均价…

新的一年,新的征程,35岁,再出发!!

2024&#xff0c;迈入新的征程&#xff01;35岁是人生的一个重要阶段&#xff0c;是积累经验、提升自我、迎接挑战的黄金时期&#xff0c;在接下来的日子&#xff1a; 设定目标&#xff1a;明确自己的长期和短期目标&#xff0c;确保自己始终朝着正确的方向前进。目标可以是职…

jmeter线程组

特点&#xff1a;模拟用户&#xff0c;支持多用户操作&#xff1b;可以串行也可以并行 分类&#xff1a; setup线程组&#xff1a;初始化 类似于 unittest中的setupclass 普通线程组&#xff1a;字面意思 teardown线程组&#xff1a;环境恢复&#xff0c;后置处理

机器视觉系统选型-选型-总结

一&#xff1a;明确需求 需求&#xff1a;镜面材质上的划痕检测&#xff0c;传送线上运动过程中拍照&#xff0c;无景深要求&#xff0c;传送线速度0.8m/s&#xff0c;产品间隔50mm 产品大小&#xff1a;100*80mm 工作距离限制&#xff1a;≤ 300mm 最小划痕宽度&#xff1a;0.…

shell编程二

shell 脚本规范 shell脚本文件需要以.sh结尾 第一个原因&#xff0c;让别人认的这个是shell脚本&#xff0c;sh后缀编辑时有高亮显示。 拓展名后缀,如果省略.sh则不易判断该文件是否为shell脚本 ​ # 执行脚本方式 1、 sh 脚本.sh 2、 bash 脚本.sh 3、 ./脚本.sh # 需要执行权…

NVMe SSD IO压力导致宕机案例解读-2

IOVA原理扩展介绍&#xff1a; 在Linux内核的I/O虚拟地址&#xff08;IOVA&#xff09;分配机制中存在两个影响高吞吐量I/O性能的问题 问题1&#xff1a;原有IOVA分配器在分配时可能需要对已分配的IOVA范围进行线性搜索&#xff0c;这种操作效率低下&#xff0c;尤其在大规模…

Day23

Day23 一,file类 1.1file类的初识 import java.io.File; import java.text.SimpleDateFormat;public class Test01 {/*** 知识点&#xff1a;File类* File&#xff0c;是文件和目录路径名的抽象表示* File只关注文件本身的信息&#xff0c;而不能操作文件里面的内容* * File…

AIGC时代-GPT-4和DALL·E 3的结合

在当今这个快速发展的数字时代&#xff0c;人工智能&#xff08;AI&#xff09;已经成为了我们生活中不可或缺的一部分。从简单的自动化任务到复杂的决策制定&#xff0c;AI的应用范围日益扩大。而在这个广阔的领域中&#xff0c;有两个特别引人注目的名字&#xff1a;GPT-4和D…

webpack 5 mode的作用和区别

通过选择 development, production 或 none 之中的一个&#xff0c;来设置 mode 参数&#xff0c;你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 developmen或者production. 为模块和 chunk 启用…

JUC原子操作类

原子操作类 基本类型原子类&#xff1a;AtomicInteger、AtomicBoolean、AtomicLong&#xff0c;常见API&#xff1a; get 获取当前值getAndSet 获取当前的值&#xff0c;并设置新的值getAndIncrement 获取当前的值&#xff0c;并自增getAndDecrement 获取当前的值&#xff0c;并…

洗地机怎么选?哪款洗地机好用?

选择洗地机前&#xff0c;我们需要对自己购买洗地机的需求做一个清洗的判断&#xff0c;吸尘器和扫地机智能解决地面基本的清洁问题&#xff0c;作为新兴的清洁工具洗地机越来越受大家的喜欢&#xff0c;洗地机的品类很多&#xff0c;洗地机到底该买哪款呢?我们先来看看挑选洗…

【现代控制理论】浙江大学 王建全教授

博主主页还有其他上万字精品笔记,欢迎自取 ​编辑P1[1.1.1]--视频&#xff1a;绪论.mp4_高清 1080P 11:19 这个视频是浙江大学的一门精品课程&#xff0c;主要介绍了现代控制理论的基本概念和发展历程。课程包括非线性系统理论、随机控制理论、自适应控制、模糊控制、鲁棒控制…

死锁-第三十四天

目录 什么是死锁 进程死锁、饥饿、死循环的区别 死锁产生的必要条件 什么时候会发生死锁 死锁的处理策略 本节思维导图 什么是死锁 每一个人都占有一个资源&#xff0c;同时又在等待另一个人手里的资源 进程死锁、饥饿、死循环的区别 死锁&#xff1a;各进程互相等待对…

drf序列化与序列化器的使用

序列化类的使用 使用序列化类实现五个接口功能&#xff0c;但是我们发现并没有做数据校验&#xff0c;也没有做反序列化&#xff0c;是我们自己手动去进反序列化&#xff0c;是我们自己使用for来进行拼接的&#xff0c;很不方便&#xff0c;我们可以使用一个drf自带的名叫序列…

ASP.Net实现海鲜添加(三层架构,异常处理)

演示功能&#xff1a; 点击启动生成页面 点击添加跳转新界面 此处设置文本框多行 点击Button添加 步骤&#xff1a; 1、建文件 下图是三层架构列表&#xff0c;Models里面有模拟数据库中列的类&#xff0c;DAL中有DBHelper和service,BLL中有BllManager文件用于ui界面直接调用…

SpringBoot之多环境开发配置

1 多环境开发配置 问题导入 在实际开发中&#xff0c;项目的开发环境、测试环境、生产环境的配置信息是否会一致&#xff1f;如何快速切换&#xff1f; 1.1 多环境启动配置 yaml文件多环境启动 不同环境使用—隔开 示例代码&#xff1a; spring:profiles:active: dev#生产…