Web APIs六---BOM

1.window對象

在全局作用域下聲明的函數(shù)屬于window對象

function fn() {
    console.log('測試函數(shù)')
}
window.fn()

使用var 關鍵字在全局作用域下聲明的變量也是屬于window對象

var num = 10
console.log(window.num)
2.延時器setTimeout

setTimeout 僅僅只執(zhí)行一次,平時省略window
開啟延時器:

let timerId = setTimeout(function () {
    console.log('真的延時執(zhí)行了嗎?')
}, 1000)

關閉延時器:

clearTimeout(timerId)
3.常見異步任務

注冊事件
setTimeout setInterval
Ajax
promise

4.事件循環(huán) EventLoop

1.同步任務由 JavaScript 主線程依次來執(zhí)行
2.異步任務委托給宿主環(huán)境(瀏覽器)執(zhí)行
3.已完成的異步任務對應的回調函數(shù)和屎,會被加入到任務隊列中等待執(zhí)行
4.JavaScript 主線程的執(zhí)行棧被清空后碰煌,會讀取任務隊列中的回調函數(shù)
5.按次序執(zhí)行 JavaScript 主線程不斷重復上面的第 4 步

5.location對象

href屬性得到完整url地址

console.log(location.href)

設置href屬性值太雨, 進行頁面跳轉

location.href = 'http://www.reibang.com/'

search 屬性獲取查詢字符串蕊退,符號?及?后面部分
hash 屬性獲取哈希值验夯,符號 # 及 # 后面部分
reload 方法 用于刷新頁面

6.navigator對象

通過 userAgent 屬性檢測瀏覽器的版本及平臺

// 檢測 userAgent(瀏覽器信息)
(function () {
    const userAgent = navigator.userAgent
    // 驗證是否為Android或iPhone
    const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
    const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
    if (android || iphone) {
        // 如果是Android或iPhone猖吴,則跳轉至移動站點
         location.
     }
})()
7.histroy對象

history.back() 后退一個歷史記錄
history.forward() 前進一個歷史記錄
history.go(0) 刷新頁面
history.go(3) 前進3個歷史記錄
history.go(-3) 后退3個歷史記錄
history.go(300) undefined 不生效

8.本地存儲

數(shù)據(jù)存儲在用戶瀏覽器中
只能存字符串
生命周期永久生效
頁面刷新頁面關閉不丟失數(shù)據(jù)

存儲數(shù)據(jù):localStorage.setItem('鍵', '值') 同鍵名有覆蓋效果
獲取數(shù)據(jù):localStorage.getItem('鍵')
刪除數(shù)據(jù):localStorage.removeItem('鍵')

復雜數(shù)據(jù)類型需轉成JSON字符串,再存儲到本地

//把js復雜數(shù)據(jù)字符串化得到 JSON字符串,再本地存儲
localStorage.setItem('data', JSON.stringify(obj))

//先取出本地存儲的JSON字符串,再將JSON字符串解析成JS的復雜數(shù)據(jù)
JSON.parse(localStorage.getItem('data'))

sessionStorage和 localStorage用法一樣
生命周期為關閉瀏覽器窗口

9.自定義屬性

操作自定義屬性的方法 了解即可
1.元素.getAttribute('屬性名')
2.元素.setAttribute('屬性名', '值')
3.元素.removeAttribute('屬性名')

規(guī)范自定義做法:
在標簽上使用data-* 來表示自定義屬性
在JS操作的時候,通過 元素.dataset 來進行操作挥转,返回一個對象

<div data-index="1" data-id="2" >哈哈</div>

let box = document.querySelector('#box')
console.log(box.dataset)           //{index: '1', id: '2'}
console.log(box.dataset.index)     // 1
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末海蔽,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子绑谣,更是在濱河造成了極大的恐慌党窜,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,204評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件借宵,死亡現(xiàn)場離奇詭異幌衣,居然都是意外死亡,警方通過查閱死者的電腦和手機壤玫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評論 3 395
  • 文/潘曉璐 我一進店門豁护,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人垦细,你說我怎么就攤上這事择镇〉脖疲” “怎么了括改?”我有些...
    開封第一講書人閱讀 164,548評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長家坎。 經(jīng)常有香客問我嘱能,道長,這世上最難降的妖魔是什么虱疏? 我笑而不...
    開封第一講書人閱讀 58,657評論 1 293
  • 正文 為了忘掉前任惹骂,我火速辦了婚禮,結果婚禮上做瞪,老公的妹妹穿的比我還像新娘对粪。我一直安慰自己右冻,他們只是感情好,可當我...
    茶點故事閱讀 67,689評論 6 392
  • 文/花漫 我一把揭開白布著拭。 她就那樣靜靜地躺著纱扭,像睡著了一般。 火紅的嫁衣襯著肌膚如雪儡遮。 梳的紋絲不亂的頭發(fā)上乳蛾,一...
    開封第一講書人閱讀 51,554評論 1 305
  • 那天,我揣著相機與錄音鄙币,去河邊找鬼肃叶。 笑死,一個胖子當著我的面吹牛十嘿,可吹牛的內(nèi)容都是我干的因惭。 我是一名探鬼主播,決...
    沈念sama閱讀 40,302評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼绩衷,長吁一口氣:“原來是場噩夢啊……” “哼筛欢!你這毒婦竟也來了?” 一聲冷哼從身側響起唇聘,我...
    開封第一講書人閱讀 39,216評論 0 276
  • 序言:老撾萬榮一對情侶失蹤版姑,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后迟郎,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體剥险,經(jīng)...
    沈念sama閱讀 45,661評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,851評論 3 336
  • 正文 我和宋清朗相戀三年宪肖,在試婚紗的時候發(fā)現(xiàn)自己被綠了表制。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,977評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡控乾,死狀恐怖么介,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情蜕衡,我是刑警寧澤壤短,帶...
    沈念sama閱讀 35,697評論 5 347
  • 正文 年R本政府宣布,位于F島的核電站慨仿,受9級特大地震影響久脯,放射性物質發(fā)生泄漏。R本人自食惡果不足惜镰吆,卻給世界環(huán)境...
    茶點故事閱讀 41,306評論 3 330
  • 文/蒙蒙 一帘撰、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧万皿,春花似錦摧找、人聲如沸核行。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽钮科。三九已至,卻和暖如春婆赠,著一層夾襖步出監(jiān)牢的瞬間绵脯,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評論 1 270
  • 我被黑心中介騙來泰國打工休里, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蛆挫,地道東北人。 一個月前我還...
    沈念sama閱讀 48,138評論 3 370
  • 正文 我出身青樓妙黍,卻偏偏與公主長得像悴侵,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子拭嫁,可洞房花燭夜當晚...
    茶點故事閱讀 44,927評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 一.window對象 1. BOM(瀏覽器對象模型) BOM:(Browser Object Model ) 是瀏...
    Web_小pang閱讀 142評論 0 1
  • window對象 window對象 (瀏覽器的內(nèi)置的全局對象) 也叫頂級對象全局指的是可以在任何位置來使用wind...
    _Hfat釗閱讀 268評論 0 0
  • BOM 一.BOM的概念及作用 BOM是為了操作瀏覽器對象出現(xiàn)的API可免,window是其核心對象 二.BOM常用對...
    屈晴qq閱讀 224評論 0 0
  • BOM&&DOM BOM的概念 提供了獨立于頁面內(nèi)容而與瀏覽器進行交互的對象,其核心對象是window 在瀏覽器中...
    一二三四五_6ce3閱讀 141評論 0 0
  • 1. 瀏覽器對象模型 BOM ,它是沒有規(guī)范,各個瀏覽器廠商按照自己的想法進行擴展 // BOM對象...
    寒非魚閱讀 202評論 0 0