1、概念
（1）window對象
window對象給我們提供了location屬性用於獲取或設置窗體的url，並且可以解析url，因為這個屬性返回的是一個對象，所以我們也將這個屬性稱為location對象。
（2）URL
URL即統一資源定位符，是互聯網上標准資源的地址，互聯網上的每一個文件都有一個唯一的URL，它包含的信息指出文件的位置以及瀏覽器應該如何去處理它
（3）location的屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
console.log(location.href);
console.log(location.host);
console.log(location.port);
console.log(location.pathname);
console.log(location.search);
</script>
</head>
<form action="#" method="get">
<input type="text" name="username"/>
<input type="submit" value="提交" />
</form>
</body>
</html>
href：獲取或者設置整個url
host：返回WEB主機的域名
port：端口號
pathname：路徑，返回當前頁面的路徑和文件名
search：參數
hash：返回片段，#后面的內容
location.protocol 返回所使用的 web 協議
這些屬性在書寫的時候可以省略最前面的window
2、href實現頁面跳轉
（1）給href屬性設置一個url：
<body>
<button>跳轉</button>
<script>
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
window.location.href="https://www.cnblogs.com/";
})
</script>
</body>
點擊按鈕后觸發onclick事件，實現了頁面的跳轉，其他的頁面跳轉方式還有表單提交的跳轉、文字或圖片鏈接方式的跳轉等。
（2）五秒鍾跳轉頁面
<body>
<div></div>
<script>
var time=5;
var div=document.querySelector("div");
setInterval(function(){
if(time==0){
window.location.href="https://www.cnblogs.com/";
}else{
div.innerHTML='您將在'+time+"s后跳轉博客園首頁"
time--;
}
},1000);
</script>
</body>
3、在不同頁面傳遞數據
在頁面一書寫表單：
<form action="test.html"> <input type="text" name="username" /> <input type="submit" value="提交" /> </form>
在第二個頁面獲取數據：
<body>
<div></div>
<script>
var params=location.search.substr(1);//去掉問號
var arr=params.split("=");
var div=document.querySelector("div");//分割后的數據為數組
div.innerHTML=arr[1];
</script>
</body>
4、location對象的方法
（1）assign方法
<body>
<button>點擊進入博客園首頁</button>
<script>
var btn=document.querySelector("button");
btn.addEventListener("click",function(){
location.assign("https://www.cnblogs.com/");
})
</script>
</body>
assign方法實現的頁面跳轉，跳轉后的頁面是可以點擊返回按鈕返回到原始頁面的。
（2）replace方法
<body>
<button>點擊進入博客園首頁</button>
<script>
var btn=document.querySelector("button");
btn.addEventListener("click",function(){
location.replace("https://www.cnblogs.com/");
})
</script>
</body>
不可返回原始頁面，因為是替換原始頁面，不能記錄原始頁面的信息
（3）reload方法
<body>
<button>點擊進入博客園首頁</button>
<script>
var btn=document.querySelector("button");
btn.addEventListener("click",function(){
location.reload("https://www.cnblogs.com/");
})
</script>
</body>
重新加載頁面，相當於瀏覽器的刷新