首先了解一个名词。URL是统一资源定位符（Uniform Resource Locator）是互联网上标准资源的地址。互联网上的每个文件都有唯一的URL，它包含的信息指出文件的位置以及游览器应该怎么处理它。
| protocol | 通信协议 常用的http，ftp，maito等 |
| host | 主机名（域名） |
| port | 端口号 可选，省略时使用方案的默认端口 如http的默认端口80 |
| path | 路径，由零或多个‘/’符号隔开的字符串，一般用来表示表示主机的一个目录或文件地址 |
| query | 参数 以键值对的形式，通过&符号分隔开 |
| fragment | 片段 #后面内容 常见链接 锚点 |
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。
| 属性 | 作用 |
| location.href | 获取或者设置 整个URL |
| location.host | 返回主机（域名） |
| location.pathname | 返回路径 |
| location.port | 返回端口号 如果未写返回 空字符串 |
| location.search | 返回参数 |
| location.hash | 返回片段 #后面内容 常见于链接、锚点 |
练习：五秒钟后跳转页面
var btn = document.querySelector('button');
var div = document.querySelector('div');
var timer = 5;
setInterval(function(){
if(timer == 0) {
location.href = 'https://www.baidu.com/';
}
else{
div.innerHTML = '将在'+timer+'秒后跳转页面';
timer--;
}
},1000)案例：获取URL参数
- 第一个登陆页面，里面有提交表单，action提交到index.html页面
- 第二个页面，可以使用第一个页面的参数，这样就实现了一个数据不同页面之间的传递效果
- 第二个页面之所以可以使用第一个页面的数据，是利用了URL里面的location.search参数
- 在第二个页面中，需要把这个参数提取
- 然后把多余的？去掉，利用substr，用分隔符=号分割 键 和 值 split（‘=’）
//login，html页面
<form action="index.html">
用户名：<input type="text" name="uname">
<input type="submit" value="登录">
</form>在输入点击登录后跳转到第二个页面
‘做出选择’用户进行提交登录的
//index.html页面
<div></div>
<script>
// console.log(location.search); 输出 ?uname=andy
// 1.先去掉？ substr('起始的位置'，截取几个字符);
var params = location.search.substr(1);
//console.log(params);输出 uname=andy
// 2. 利用=把字符串分割为数组 split('=');
var arr = params.split('=');
//console.log(arr); 输出 ["uname", "ANDY"]
var div = document.querySelector('div');
div.innerHTML = arr[1] + ',欢迎您';
</script>location对象的方法
| location.assign() | 跟href一样，可以跳转页面（重定向页面）,记录历史 |
| location.replace() | 替换当前页面，不记录历史，不能后退 |
| location.reload() | 重新加载页面，相当于刷新按钮，参数为ture则强制刷新 |
// 记录浏览历史，所以可以实现后退功能
location.assign('http://www.itcast.cn');
// 不记录浏览历史，所以不可以实现后退功能
location.replace('http://www.itcast.cn');
location.reload(true);祝你学习快乐！
