咸鱼前端—js location对象

Location 对象
URL
Location 对象属性
Location 对象方法

Location 对象

location对象是window对象下的一个属性，时候的时候可以省略window对象

location可以获取或者设置浏览器地址栏的URL

URL

统一资源定位符 (Uniform Resource Locator, URL)
URL的组成

scheme://host:port/path?query#fragment
scheme:通信协议常用的http,ftp,maito等
host:主机服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port:端口号整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
path:路径由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
query:查询可选，用于给动态网页传递参数，可有多个参数，用'&'符号隔开，每个参数的名和值用'='符号隔开。例如：name=zs
fragment:信息片断字符串，锚点.

Location 对象属性

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

//地址栏上#及后面的内容
console.log(window.location.hash);
//主机名及端口号
console.log(window.location.host);
//主机名
console.log(window.location.hostname);
//文件的路径---相对路径
console.log(window.location.pathname);
//端口号
console.log(window.location.port);
//协议
console.log(window.location.protocol);
//搜索的内容
console.log(window.location.search);

案例：跳转链接

<!DOCTYPE html>
<html>
<head><script type="text/javascript">window.onload = function () {document.getElementById("btn").onclick = function () {//设置跳转的页面的地址location.href = "https://xymgf.blog.csdn.net/";};};</script>
</head><body>
<input type="button" id="btn" value="go"></body></html>

Location 对象方法

属性	描述
assign()	加载新的文档。
reload()	重新加载当前文档。相当于刷新
replace()	用新的文档替换当前文档。木有历史记录哦

咸鱼前端—js location对象相关推荐

咸鱼前端—js 函数
咸鱼前端-js 函数函数的定义函数的调用作为函数作为方法作为构造函数通过它们的call()和apply()方法间接调用函数的形参和实参返回值函数:把一些重复的代码封装起来,以供需要时 ...
前端js修改对象的属性值、添加新的属性、删除对象属性
//源对象 let rtkobj = formRef.current.getFieldsValue(); //要新加的属性let farmname = userInfo.ffarmRespVO.nam ...
JS中location对象使用
location 地址对象它描述的是某一个窗口对象所打开的地址.要表示当前窗口的地址,只需要使用"location"就行了:若要表示某一个窗口的地址,就使用"<窗 ...
JavaScript之BOM对象（JS函数作用域、window、history、location对象）
文章目录一.JS作用域二.window窗口三.history对象四.location对象本篇文章来简单介绍一下JS作用域,以及BOM对象中的三个基础对象,分别是window对象.histor ...
前端JS：判断list(数组)中的json对象是否重复
前端JS:判断list(数组)中的json对象是否重复 <!DOCTYPE html> <html> <head> <meta charset="u ...
从零开始学前端：json对象，对象的序列化和反序列化 --- 今天你学习了吗？（JS：Day15）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:字符串.数组的方法 - 今天你学习了吗?(JS:Day12/13/14) 文章目录从零开始学前端:程序猿小 ...
JS9day(BOM对象模型,setTimeout定时器，JS单线程执行机制，location对象，swiper插件，localStorage本地存储，购物车案例升级版，学习信息案例（本地存储）)
文章目录 BOM简介定时器-延时函数 5秒关闭广告案例递归模拟setInterval函数两种定时器对比 JS 执行机制 location对象 navigator对象 histroy对象(了解) ...
day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素（标签）、正则表达式
回顾 1. js基础语法运算符:算数运算符可以与字符串进行数学运算,js底层进行隐式转换比较运算符:===(恒等) 特点,比较类型+内容流程控制语句if判断条件表达式:1)布尔2)数值:非0为真3)字 ...
java后端js_后端传java复杂对象给前端js对象
jsp界面中将后端的java复杂对象传递给前端js对象的方法: 用JSP表达式--加JSON数据转换复杂对象需要转成JSON数据进行前后端传输,所以后端传值前.前端接收对象后都需要进行JSON数据处 ...

咸鱼前端—js location对象

咸鱼前端—js location对象

Location 对象

URL

Location 对象属性

Location 对象方法

咸鱼前端—js location对象相关推荐

最新文章

热门文章