BOM中location对象的属性和方法
作者：Wu_hello_mi 时间：2024-04-16 09:55:07
一、location 对象是什么？
window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL 。 因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。
1.1 URL
统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL 的一般语法格式为：
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
二、 location 对象的属性
案例1：5秒钟之后自动跳转页面
分析：
利用定时器做倒计时效果 时间到了，就跳转页面。使用 location.href
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>点击</button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function() {
// console.log(location.href);
location.href = 'http://www.itcast.cn';
})
var timer = 5;
setInterval(function() {
if (timer == 0) {
location.href = 'http://www.itcast.cn';
} else {
div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
timer--;
}
}, 1000);
</script>
</body>
</html>
案例2：获取 URL 参数数据（主要练习数据在不同页面中的传递）
分析：
第一个登录页面，里面有提交表单， action 提交到 index.html页面
第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果
第二个页面之所以可以使用第一个页面的数据，是利用了URL 里面的 location.search参数
在第二个页面中，需要把这个参数提取。
第一步去掉？ 利用 substr
第二步 利用=号分割 键 和 值 split(‘=‘)
第一个数组就是键 第二个数组就是值
三、location 对象的方法
<body>
<button>点击</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// 记录浏览历史，所以可以实现后退功能
// location.assign('http://www.itcast.cn');
// 不记录浏览历史，所以不可以实现后退功能
// location.replace('http://www.itcast.cn');
location.reload(true);
})
</script>
</body>
来源：https://blog.csdn.net/qq_51387458/article/details/129957036
标签：location,对象,属性,方法
0
投稿猜你喜欢
python Selenium 库的使用技巧
2021-08-07 21:23:47
python 获取sqlite3数据库的表名和表字段名的实例
2024-01-24 13:34:22
SQL Server误区30日谈 第30天 有关备份的30个误区
2024-01-26 05:52:26
解决golang在import自己的包报错的问题
2024-04-25 15:09:19
CSS改变字体而不影响网页
2010-10-20 20:11:00
MySql常用操作SQL语句汇总
2024-01-21 00:11:53
python 函数、变量中单下划线和双下划线的区别详解
2021-06-29 11:32:33
Django和Ueditor自定义存储上传文件的文件名
2021-02-26 02:43:17
PHP 字符串 小常识
2023-11-20 22:08:32
Python with语句上下文管理器两种实现方法分析
2023-03-21 21:50:18
DBCC CHECKIDENT 重置数据库标识列从某一数值开始
2024-01-15 11:16:27
TensorFlow2.X使用图片制作简单的数据集训练模型
2023-08-17 04:01:55
Ubuntu16.04 安装多个python版本的问题及解决方法
2021-05-26 05:27:11
Oracle数据库处理多媒体信息
2010-07-16 13:01:00
用jquery写的自动提示效果
2008-06-17 14:27:00
python基于queue和threading实现多线程下载实例
2023-02-04 09:58:22
实例解析js中try、catch、finally的执行规则
2024-04-22 13:25:49
详解SQL中的DQL查询语言
2024-01-24 01:51:54
(X)HTML中最多余的元素标签
2008-06-15 15:48:00
分享给Python新手们的几道简单练习题
2021-08-01 22:05:14