BOM中l(wèi)ocation對(duì)象的屬性和方法
一、location 對(duì)象是什么?
window 對(duì)象給我們提供了一個(gè) location 屬性用于獲取或設(shè)置窗體的 URL,并且可以用于解析 URL 。 因?yàn)檫@個(gè)屬性返回的是一個(gè)對(duì)象,所以我們將這個(gè)屬性也稱為 location 對(duì)象。
1.1 URL
統(tǒng)一資源定位符 (Uniform Resource Locator, URL) 是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址?;ヂ?lián)網(wǎng)上的每個(gè)文件都有一個(gè)唯一的 URL,它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它。
URL 的一般語法格式為:
protocol://host[:port]/path/[?query]#fragment http://www.itcast.cn/index.html?name=andy&age=18#link
二、 location 對(duì)象的屬性
案例1:5秒鐘之后自動(dòng)跳轉(zhuǎn)頁面
分析:
利用定時(shí)器做倒計(jì)時(shí)效果 時(shí)間到了,就跳轉(zhuǎn)頁面。使用 location.href
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button>點(diǎn)擊</button> <div></div> <script> var btn = document.querySelector('button'); var div = document.querySelector('div'); btn.addEventListener('click', function() { // console.log(location.href); location.; }) var timer = 5; setInterval(function() { if (timer == 0) { location.; } else { div.innerHTML = '您將在' + timer + '秒鐘之后跳轉(zhuǎn)到首頁'; timer--; } }, 1000); </script> </body> </html>
案例2:獲取 URL 參數(shù)數(shù)據(jù)(主要練習(xí)數(shù)據(jù)在不同頁面中的傳遞)
分析:
- 第一個(gè)登錄頁面,里面有提交表單, action 提交到 index.html頁面
- 第二個(gè)頁面,可以使用第一個(gè)頁面的參數(shù),這樣實(shí)現(xiàn)了一個(gè)數(shù)據(jù)不同頁面之間的傳遞效果
- 第二個(gè)頁面之所以可以使用第一個(gè)頁面的數(shù)據(jù),是利用了URL 里面的 location.search參數(shù)
- 在第二個(gè)頁面中,需要把這個(gè)參數(shù)提取。
- 第一步去掉? 利用 substr
- 第二步 利用=號(hào)分割 鍵 和 值 split(‘=‘)
- 第一個(gè)數(shù)組就是鍵 第二個(gè)數(shù)組就是值
三、location 對(duì)象的方法
<body> <button>點(diǎn)擊</button> <script> var btn = document.querySelector('button'); btn.addEventListener('click', function() { // 記錄瀏覽歷史,所以可以實(shí)現(xiàn)后退功能 // location.assign('http://www.itcast.cn'); // 不記錄瀏覽歷史,所以不可以實(shí)現(xiàn)后退功能 // location.replace('http://www.itcast.cn'); location.reload(true); }) </script> </body>
到此這篇關(guān)于BOM中l(wèi)ocation對(duì)象的屬性和方法的文章就介紹到這了,更多相關(guān)location對(duì)象的屬性方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript 學(xué)習(xí)筆記 Black.Caffeine 09.11.28
這兩天終于寫出了一個(gè)個(gè)人認(rèn)為真正意義上的作業(yè)了,不過,最大感受就是。。。IE太垃圾了。。。so,這個(gè)作業(yè)實(shí)際上也沒有完成的很完美,因?yàn)?,在IE上還是有兼容性的問題存在,不錯(cuò),就此先自我總結(jié)一下吧~免得以后又忘了~2009-11-11鍵盤 keycode的值 javascript時(shí)觸發(fā)事件時(shí)很有用的要素
鍵盤keycode的值 編寫javascript時(shí)觸發(fā)事件時(shí)很有用的要素,大家可以收藏一下。2009-11-11JavaScript簡介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
JavaScript是一種基于對(duì)象(Object)和事件驅(qū)動(dòng)(EventDriven)并具有安全性能的腳本語言,javascript的出現(xiàn)使得網(wǎng)頁和用戶之間實(shí)現(xiàn)了一種實(shí)時(shí)性的,動(dòng)態(tài)性的,交互性的關(guān)系,使網(wǎng)頁包含更多活躍的元素和更加精彩的內(nèi)容2017-06-06JavaScript 內(nèi)置對(duì)象屬性及方法集合
JavaScript內(nèi)置對(duì)象屬性及方法大全,學(xué)習(xí)js的朋友可以收藏下, 方便以后的學(xué)習(xí)。2010-07-07簡略說明Javascript中的= =(等于)與= = =(全等于)區(qū)別
本篇文章簡略說明了Javascript中的= =(等于)與= = =(全等于)區(qū)別,有需要的朋友可以參考一下2013-04-04JavaScript DOM學(xué)習(xí)第四章 getElementByTagNames
HTML有一些相關(guān)有不同tag名字的相關(guān)元素,比如H1-H6或者input,select和TEXTAREA。getElementByTagName只能取得那些有相同tag名稱的元素,所以你不能用他來取得所有的標(biāo)題或者整個(gè)表單內(nèi)容。2010-02-02