2_1 location对象

location对象时BOM最有用的对象之一，提供了当前窗口中加载文档的URL信息

. location对象保存着 当前窗口中加载文档的URL信息 和 URL解析后的离散片段

. window.loaction属性 和 document.location属性 都指向了 location对象
  window.location === document.location //返回true

. 作用有两个：
  1 可以解析URL 并通过它的属性得到
  2 可以修改URL 实现导航到新的URL 或者刷新当前页面

一获取URL

1）常用属性

. 对象属性          返回值

location.href      获取或者设置 整个URL

location.host      返回主机名+端口 www.baidu.com

location.hostname  返回主机名

location.port      返回端口号 如果未填写返回 空字符串

location.pathname  返回路径

location.search    返回查询参数

location.hash      返回 片段 #后面内容 一般都是 链接中的锚点部分

location.protocol  返回协议 常见 http https

重点记住 href 和 search

通过href属性实现5秒后跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五秒之后自动跳转到百度</title>
</head>
<body>
<div></div>
<script>
    //2 显示倒计时秒数
    var timer = 5;
    var div = document.querySelector('div');
    setInterval(function () {
        if (timer == 0) {
            location.href = 'http://www.baidu.com';
        } else {
            div.innerHTML = timer + '秒后跳转到百度';
            timer--;
        }
    },1000)
</script>
</body>
</html>

2）获取URL的参数

. 参数字符串格式 ?name=zs&age=100&sex=man
. 我们通过 location.query 可以得到 但是不太方便使用 
. 我们需要自定义方法 把URL的search属性中的参数提起出来 变成json对象格式 {name:zs,age:100,sex:man}
. 这里面用到了一个 decodeURIComponent()函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取URL参数</title>
</head>
<body>
<script>
    function urlArgs () {
        var args = {};//1 定义一个空对象
        var query = location.search.substring(1);//2 取掉参数字符串的问号
        var arr = query.split('&');//["name=zs", "age=100", "sex=man"]
        //split() 方法用于把一个字符串分割成字符串数组

        //3 for循环遍历数组
        for (var i=0; i<arr.length; i++) {

            var pos = arr[i].indexOf('=');
            //indexOf 返回指定字符 在字符串中第一次出现的索引 如果没有此字符 返回-1
            if (pos == -1) {
                continue;
            } //如果没有找到就跳过

            var name = arr[i].substring(0,pos);//提取name

            var value = arr[i].substring(pos+1);//提取value
            value = decodeURIComponent(value);//对value进行解码
            args[name] = value;//存储为属性
        }
        return args;
    }
    var pares = urlArgs();
    console.log(pares.name)
    console.log(pares.age)
</script>
</body>
</html>

二操作URL地址

1）重定向页面

. location.assing('http://www.baidu.com');  会增加历史记录  可以后退  可以回到前一页

window.location = "http://www.baidu.com"
location.href = "http://www.baidu.com"
它们两个都是隐式的调用了 location的assing()方法

2）替换当前页面

. location.replace('http://www.baidu.com')  不会增加历史记录 不能后退 不能回到前一页

3）重载当前页面

. location.reload();      重新加载 可能从缓存中加载 [ 如果页面没有修改 可能从缓存中加载 ] 相当于按下了F5 或刷新按钮
. location.reload(true);  重新加载 强制从服务器加载  相当于按下了 Ctrl + F5

三 URL知识

1）概念

URL 统一资源定位符 它是WWW的统一资源定位标志，就是指网络地址

范例

// protocol://host[:port]/path/[?query]#fragment
//   协议     主机名  端口  路径   请求参数 信息片段
// http://www.itcast.cn/index.html?name=andy&age=18#link

//. protocol：协议名称   常用http https ftp
//. host：    主机名    [ip地址 或 域名 ]
//. port：    端口号    省略使用方案的默认端口 HTTP的默认端口80
//. path：    路径      由0个或多个 / 符号隔开的字符串 用来表示主机上的一个目录或文件地址
//. query:    请求参数  以问号开头 以键值对形式 并用&分隔
//. fragment：片段      以#开头 后面内容见于链接锚点