javascript-一篇搞懂location对象！！(建议收藏)

目录

前言

1、URL的组成

一、location对象

1、location对象的属性

        属性例子

2、location对象的方法

        assign()的案例

         replace()案例

四、结束语

---

前言

在介绍location对象时，我们不妨先了解一下URL，通俗理解就是网址。

1、URL的组成

小糖认为以后学计算机网络会深入了解，就先简单介绍啦~
（1）protocol 通信协议常用的http、ftp、maito等 
（2）host 主机(域名) www.bilibili.com
（3）port 端口号可选，省略时使用方案的默认端口如http的默认端口为80
（4）path 路径由零或多个/符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
（5）query 参数以键值对的形式通过&符号分隔开来
（6）fragment 片段#后面内容常见于链接锚点

举个栗子：

protocol:/host[:port]path[query]#fragment

对应

https://www.baidu.comswd=csdn&ie=utf-8&tn=15007414_1_pg

而location对象所带的属性，就是用来操作URL的各个组成部分的。

一、location对象

对于location对象的学习，我们要学习他的属性与方法，下面开始介绍该对象的属性与方法。

1、location对象的属性

（1）location.href 获取或者设置整个URL
（2）location. host 返回主机(域名)www.bilibili.com
（3）location.port 返回端☐号如果未写返回空字符串
（4）location.pathname 返回路径
（5）location. search 返回参数
（6）location. hash 返回片段#后面内容常见于链接锚点

        其中最常用的就是（重点记）
        location.href和location. search

属性例子

下面利用一个自动跳转案例来举栗子~
看以下代码

button {
            margin-left: 47%;
            width: 80px;
            height: 48px;
            text-align: center;
            line-height: 24px;
            font-size: 24px;
        }
        div {
            padding: 0 1px;
            height: 50px;
            margin: 100px auto;
            font-size: 30px;
            text-align: center;
            line-height: 100px;
            color: cornflowerblue;
        }

<button>跳转</button>
<div></div>

 //1.获取其元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var timer = 4;
        btn.addEventListener('click',function(){
            div.innerHTML = '页面将在'+(timer+1)+'秒后跳转';  //解决延迟问题
            setInterval(function(){
            if(timer == 0){
                location.href = 'http://www.bilibili.com';
            }else {
                div.innerHTML = '页面将在'+timer+'秒后跳转';
                timer--;
            }
        },1000);
        });

    
效果图如下：（呜呜呜呜呜，终于会做动图了！！）

 

 

2、location对象的方法

（1）location.assign() 跟href一样，可以跳转页面(也称为重定向页面)
（2）location.replace() 替换当前页面，因为不记录历史，所以不能后退页面
（3）location.reload() 重新加载页面，相当于刷新按钮或者f5如果参数为true强制刷新ctrl+f5

 下面用各个方法给各位小糖粉举一些栗子~

assign()的案例

以location.assign()为栗子

button {
            margin-left: 47%;
            padding: 0 1px;
            height: 48px;
            text-align: center;
            line-height: 24px;
            font-size: 24px;
        }

 

<button>点击跳转</button>

var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            //记录浏览历史，所以实现可后退功能
            location.assign('http://www.bilibili.com');
            
        })

效果图如下~

 

 replace()案例

以location.replace()为栗子（css部分与第一个栗子一样）~

var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            //替换网址 没有记忆功能
            location.replace('http://www.bilibili.com');
            
        })

 效果图如下

四、结束语

希望本篇文章可以帮到求知若渴的众多同学吖~
若能帮到 也欢迎点赞、收藏、关注我，后续也会持续发布新文章，祝大家学有所成！
欢迎各位前端大佬留言讨论指教！ 谢谢各位~