webAPI

01-鍵盤事件

1. 知識點-onkeydown事件[掌握]

   onkeydown: 當鍵盤上的鍵被按下時候觸發的一個事件
   

2. 知識點-onkeyup事件[掌握]

   onkeyup: 鍵盤上鍵彈起時候觸發的一個事件
   

3. 知識點-onkeypress事件[了解]

   onkeypress: 當鍵盤上的鍵被按下時候觸發的事件
   

4. onkeydown 和 onkeypress的區別

   onkeydown 事件課可以將鍵盤上所有的鍵都執行onkeypress: 無法執行功能鍵的事件(tab, shift, ctrl ....)
   

5. 鍵盤事件對象參數

• key

  e.key   ----> 獲取鍵的名字
  

• keycode

  e.keyCode   -----> 鍵對應的值
  

02-BOM

?概念

BOM: （Browser Object Model）即瀏覽器對象模型。

?頂級對象

DOM對象  ----> 整個網頁是一個對象   (document)BOM對象  ----> 瀏覽器對象  (window)js中的頂級對象是 window 對象. 可以省略不寫.

?學習路徑

1. onload事件

   onload 事件, 當頁面中的元素,外部的css樣式都加載完成后,就會觸發該事件
   window.onload = function() {var div = document.querySelector('div');console.log(div);
   }
   

2. location對象

   location對象是window對象下的一個屬性，使用location可以設置或者獲取瀏覽器地址欄中的 url
   

   • location對象中的屬性

     • href屬性

       保存的就是網頁地址location.href  				----> 獲取網頁地址
       location.href = '網站地址'   ------> 設置備注:
       location.href = '網站地址' ; 在當前窗口中打開頁面如果希望在新窗口中打開頁面,那么使用
       window.open('url路徑');
       

     • 其他方法介紹

       //作用: 頁面跳轉 (委派)
       location.assign('http://www.baidu.com');  //設置跳轉頁面//作用: 也是用來跳轉頁面的, 跳轉頁面后,瀏覽器中的后退按鈕是不能點擊的
       location.replace('http://www.baidu.com');//作用: 刷新頁面
       location.reload(boolean);boolean參數: true 代表強制從服務端重新獲取數據 , false 代表在本地緩存中獲取數據
       

   • 其他屬性與網站地址相關的屬性[了解]

     1. location.protocol 獲取當前網站地址的協議類型
     2. location.host 獲取當前網站地址中的主機(IP地址)
     3. location.port 代表端口號(類似于房間號, 默認是 80)
     4. location.pathname 代表訪問的具體的文件路徑

3. 定時器

   1. setInterval()

      setInterval() 定時器類似于鬧鐘 (可以重復執行, 也可以停止)
      

      • 語法

        setInterval(function(){}, time);備注:
        1. time 時間參數表示的是一個毫秒
        2. 1000毫秒 = 1 秒
        3. 第一個參數既可以是匿名函數也可以是一個命名函數
        

      • 如何關掉setInterval定時器

        通過 clearInterval() 方法可以停止定時器(關掉定時器)備注:
        1. clearInterval() 方法中需要一個參數
        2. clearInterval() 的這個參數表示的就是定時器的標志(ID值)例如:
        //開啟定時器
        var id = setInterval(function(){console.log('你好');
        }, 2000);clearInterval(id);  //關掉定時器
        

   2. setTimeout()

      setTimeout() 定時器類似于定時炸彈 (到了規定的時間就執行, 不能重復執行)
      

      • 語法

        setTimeout(function(){}, time);備注:
        1. 第一個參數處理程序可以是匿名函數也可以是命名函數
        2. 第二參數表示的是一個延時時間,是一個毫秒單位特點:
        該定時器執行一次, 意思是多長時間之后執行函數中的代碼
        

      • 如果關掉setTimeout?

        通過 clearTimeout() 方法關掉setTimeout定時器備注:
        1. clearTimeout() 中也需要一個定時器的id值例如://開啟定時器
        var id = setTimeout(function(){console.log('你好');
        }, 5000);
        //關閉定時器
        clearTimeout(id);
        

4. 獲取頁面元素相關信息