[TOC] # 5.1什么是location对象 window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为 这个属性返回的是一个对象 ,所以我们将这个属性也称为location对象。 # 5.2 URL 统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL ,它包含的信息指出文件的位置以及浏览器应该怎么处理它。 URL的一般语法格式为: ~~~ protocol://host[:port]/path/[?query]#fragment http://www. itcast.cn/index.html?name=andy&age=18#link ~~~ | 组成 | 说明 | | --- | --- | | protocol | 通信协议常用的http,ftp,maito等 | | host | 主机 (域名)  [www.itheima.com](http://www.itheima.com/) | | port | 端口号可选,省略时使用方案的默认端口如http的默认端口为80 | | path | 路径由零或多个/符号隔开的字符串，一般用来表示主机上的一个目录或文件地址 | | query | 参数以键值对的形式，通过&符号分隔开来 | | fragment | 片段#后面内容常见于链接 锚点 | # 5.3 location对象的属性重点记住: href 和search | location对象属性 | 返回值 | | --- | --- | | location.href | 获取或者设置整个URL | | location.host | 返回主机 (域名)  [www.itheima.com](http://www.itheima.com/) | | location.port | 返回端口号如果未写返回空字符串 | | location.pathname | 返回路径 | | location.search | 返回参数 | | location.hash | 返回片段  #后面内容常见于链接锚点 | 重点记住: href 和search ~~~ <button>点击</button> <script> var btn = document.querySelector( ' button' ); btn.addEventListener( 'click', function() { // console.log(location.href); location.href = 'http://www.itcast.cn'; //可以赋予一个新的地址 跳转 }) </script> ~~~ # 5.4 location对象的方法 | location对象方法 | 返回值 | | --- | --- | | location.assign() | 跟href一样,可以跳转页面(也称为重定向页面)（记录浏览历史，所以可以实现后退功能） | | location.replace() | 替换当前页面，因为不记录历史，所以不能后退页面 | | location.reload() | 重新加载页面，相当于刷新按钮或者f5 如果参数为true强制刷新ctrl+f5 | ~~~ <button>点击</button> <script> var btn = document.querySelector( ' button'); btn.addEventL istener( 'click', function() { //记录浏览历史，所以可以实现后退功能 // location.assign( ' http:/ /www.itcast.cn'); //不记录浏览历史，所以不可以实现后退功能 // location.replace( 'http:/ /www.itcast.cn'); location.reload(true); }) </script> ~~~ # 案例: 5秒钟之后自动跳转页面 （页面开发必备 重点） ## 代码实验 ~~~ <button>点击</button> <div></div> <script> var btn = document.querySelector( ' button' ); var div = document.querySelector( ' div' ); btn.addEventListener('click', function() { // console.log(location.href); locatiqn.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> ~~~ # 5.3案例:获取URL参数数据 主要练习数据在不同页面中的传递。   ## 案例分析 ①第一个登录页面,里面有提交表单，action提交到index.htm|页面 ②第二个页面,可以使用第一个页面的参数,这样实现了一个数据不同页面之间的传递效果 ③第二个页面之所以可以使用第一个页面的数据,是利用了URL里面的location.search参数 ④在第二个页面中,需要把这个参数提取。 ⑤第一步去掉?利用substr ⑥第二步利用=号分割键和值 split( '=' ) ## 代码实验  login.html 登录界面 ~~~ <form action= ”index.htmI"> 用户名: <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); //uname=andy console.log(params); // 2.利用=把字符串分割为数组split('=' ); var arr = params.split('=' ); console.log(arr); // [ "uname",” ANDY"] var div = document.querySelector( 'div'); // 3.把数据写入div中 div.innerHTML = arr[1] + '欢迎您' ; </script> ~~~