Location对象
location用于获取或设置窗体的URL，并且可以用于解析URL。
因为location返回的是一个对象，因此这个属性也称为location对象
URL：统一资源定位符，是互联网上标准资源的地址
URL由三部分组成：资源类型、存放资源的主机域名、资源文件名。
也可认为由4部分组成：协议、主机、端口、路径
URL的一般语法格式为：
protocol :// hostname[:port] / path / [;parameters][?query]#fragment
| 组成 | 说明 |
|---|---|
| protocol（协议） | 通信协议 http ftp maito等 |
| host | 主机（域名） |
| port | 端口号可选，省略时使用方案的默认端口，各种传输协议都有默认的端口号，如http的默认端口为80 |
| path | 路径由零或多个“/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。 |
| query | 参数，以键值对的形式，用“&”符号隔开 |
| fragment | 片段 #后面内容 常见于链接 锚点 |
location对象的属性
| Location 对象属性 | 返回值 |
|---|---|
| Location.href | 设置或返回完整的 URL。 |
| Location.host | 设置或返回主机名和当前 URL 的端口号。 |
| Location.port | 设置或返回当前 URL 的端口号。 如果未写返回 空字符串 |
| Location.pathname | 返回 URL 的路径部分。 |
| Location.search | 返回参数 |
| Location.hash | 返回片段 # 后面的内容 常见于链接（锚点）。 |
href search 较为重要
console.log(location.herf) 得到当前页面的url地址
location.herf= ' ' 跳转到新的页面
案例：5秒后自动跳转页面
思路：
- 利用定时器做倒计时效果
- 时间到了，就自动跳转页面，使用 location.herf
<body>
<div></div>
<script>
var div = document.querySelector("div");
var timer = 5;
CutDown();//先调用一次这个函数，防止刚开始刷新页面时有空白问题
setInterval(CutDown, 1000); function CutDown() {
if (timer == 0) {
location.href = "http://baidu.com";
} else {
div.innerHTML = "您将在" + timer + "内跳转页面";
timer--;
}
}
</script>
</body>
案例：获取URL参数数据
主要练习数据在不同页面上的传递
分析：
- 第一个登录页面，里面有提交表单，action提交到index.html 页面
- 第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果
- 第二个页面之所以可以使用第一个页面的数据，是利用了URL里面的location.search参数
- 在第二个页面中，需要把这个参数提取
- 要把参数里面的？提取，利用substr
- 再利用=号分隔符，分割键和值 split(’=’)
代码：
login.html 页面：
<body>
<form action="index.html">
<input type="text" name="uname" /> <!--必须用name -->
<input type="submit" value="登录" />
</form>
</body>
index.html页面
<body>
<div></div>
<script>
//利用substr('起始的位置',截取几个字符)先去掉 ？
var params = location.search.substr(1); //得到的是 uname=name 类型
//再利用=号分隔符，分割键和值 split('=')
var arr = params.split("="); //得到的是[uname,name] 类型
//把数据写入到div中
var div = document.querySelector("div");
div.innerHTML = arr[1] + "欢迎您";
</script>
</body>
