亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

BOM中l(wèi)ocation對(duì)象的屬性和方法

 更新時(shí)間:2023年04月07日 10:20:26   作者:Wu_hello_mi  
這篇文章主要介紹了BOM中l(wèi)ocation對(duì)象的屬性和方法,作為前端基礎(chǔ)location對(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ù)在不同頁面中的傳遞)

分析:

  1. 第一個(gè)登錄頁面,里面有提交表單, action 提交到 index.html頁面
  2. 第二個(gè)頁面,可以使用第一個(gè)頁面的參數(shù),這樣實(shí)現(xiàn)了一個(gè)數(shù)據(jù)不同頁面之間的傳遞效果
  3. 第二個(gè)頁面之所以可以使用第一個(gè)頁面的數(shù)據(jù),是利用了URL 里面的 location.search參數(shù)
  4. 在第二個(gè)頁面中,需要把這個(gè)參數(shù)提取。
  5. 第一步去掉?  利用 substr
  6. 第二步 利用=號(hào)分割 鍵 和 值     split(‘=‘)
  7. 第一個(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

    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í)很有用的要素

    鍵盤keycode的值 編寫javascript時(shí)觸發(fā)事件時(shí)很有用的要素,大家可以收藏一下。
    2009-11-11
  • js常用數(shù)組操作方法簡明總結(jié)

    js常用數(shù)組操作方法簡明總結(jié)

    這篇文章主要介紹了js常用數(shù)組操作方法簡明總結(jié),直接上代碼,代碼中有詳細(xì)的注釋,需要的朋友可以參考下
    2014-06-06
  • 基于JavaScript 類的使用詳解

    基于JavaScript 類的使用詳解

    JavaScript里的Class(類),其實(shí)是通過Function來實(shí)現(xiàn)的。 我們通過字面量或者構(gòu)造函數(shù)來創(chuàng)建對(duì)象時(shí),其實(shí)都只是給特定的一個(gè)對(duì)象賦屬性和值。如果我們有多個(gè)對(duì)象,他們的屬性都一樣只是值不同,那就會(huì)寫很多重復(fù)的語句,這時(shí)候類就很好用了
    2013-05-05
  • JavaScript中reduce()方法的使用詳解

    JavaScript中reduce()方法的使用詳解

    這篇文章主要介紹了JavaScript中reduce()方法的使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
    2015-06-06
  • JavaScript 學(xué)習(xí)筆記(十五)

    JavaScript 學(xué)習(xí)筆記(十五)

    事件是DOM(文檔對(duì)象模型)的一部分。事件流就是事件發(fā)生順序,這是IE和其他瀏覽器在事件支持上的主要差別。
    2010-01-01
  • JavaScript簡介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

    JavaScript簡介_動(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-06
  • JavaScript 內(nèi)置對(duì)象屬性及方法集合

    JavaScript 內(nèi)置對(duì)象屬性及方法集合

    JavaScript內(nèi)置對(duì)象屬性及方法大全,學(xué)習(xí)js的朋友可以收藏下, 方便以后的學(xué)習(xí)。
    2010-07-07
  • 簡略說明Javascript中的= =(等于)與= = =(全等于)區(qū)別

    簡略說明Javascript中的= =(等于)與= = =(全等于)區(qū)別

    本篇文章簡略說明了Javascript中的= =(等于)與= = =(全等于)區(qū)別,有需要的朋友可以參考一下
    2013-04-04
  • JavaScript DOM學(xué)習(xí)第四章 getElementByTagNames

    JavaScript 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

最新評(píng)論