淺述Javascript的外部對象
Window 瀏覽器:
- location:地址 - history:歷史 - Document:文檔 - screen:窗口 - navigator:幫助
> 1.外部對象就是瀏覽器提供的API -- **BOM**
> 2.這些對象由w3c規(guī)定,由瀏覽器開發(fā)者設(shè)計并開發(fā)
> 3.這些對象分為2部分,其中BOM包含了DOM
> 4.我們可以通過js訪問這些對象
# 外部對象
> BOM (Browser Object Model)
瀏覽器對象模型,用來訪問和操縱瀏覽器窗口,是JavaScript有能力與瀏覽器對話。
> DOM (Document Object Model)
文檔對象模型,用來操作文檔。
##1.對話框
- alert(str)
- 提示對話框,顯示str字符串的內(nèi)容
- confirm(str)
- 確認(rèn)對話框,顯示str字符串的內(nèi)容
- 按"確定"按鈕返回true,其他操作返回false
>案例
//調(diào)用window對象的屬性或方法,可以省略"window." //1.彈出框 //1)彈出框 function f1(){ alert("你好,小俊子"); } //2)確認(rèn)框 function f2(){ var v = confirm("你吃了嗎?"); //點(diǎn)擊確定返回true,否則返回false console.log(v); } //3)輸入框 function f3(){ var p = prompt("你吃的什么?"); //點(diǎn)擊取消返回null console.log(p); }
## 2. 定時器
- 多用于網(wǎng)頁動態(tài)時鐘,制作倒計時,跑馬燈效果
- 周期性時鐘
- 以一定的間隔執(zhí)行代碼,循環(huán)往復(fù)
- setInterval(exp,time);
- 返回已經(jīng)啟動的定時器對象
- 停止啟動的定時器
- clearInterval(tID)
- tID:啟動的定時器對象
- 一次性時鐘
- 在一個設(shè)定的時間間隔之后來執(zhí)行代碼,而不是在函數(shù)被調(diào)用后執(zhí)行
- setTimeout(exp,time);
- 停止啟動的定時器
- clearTimeout(tID)
- tID:啟動的定時器對象
> 案例
1)周期性定時器
//每隔N毫秒執(zhí)行一次函數(shù),反復(fù)執(zhí)行,直到達(dá)到停止條件位置。 function f4(){ var n = 5; //啟動定時器,返回定時器的ID,用來停止定時器 var id = setInterval(function(){ console.log(n); switch(n%4){ case 0: btn1();break; case 3: btn2();break; case 2: btn3();break; case 1: btn4();break; default: ; } n++; },100); //啟動定時器就相當(dāng)于啟動了一個支線程,當(dāng)前方法f4相當(dāng)于主線程。 //2個線程并發(fā)執(zhí)行,不互相等待, //因此主線程在啟動完支線程后立刻向下執(zhí)行,而支線程卻需要在1秒后才執(zhí)行 console.log("蹦"); }
2)一次性定時器
//推遲N毫秒執(zhí)行一次函數(shù),執(zhí)行完之后,自動停止, //也可以在未執(zhí)行前手動停止 var id; function f5(){ //啟動定時器,若想在未執(zhí)行定時器前就將它停止,需要使用id id = setTimeout(function(){ console.log("叮叮叮"); f4(); },3000); } function f6(){ //若定時器已經(jīng)執(zhí)行,則取消無效; 若定時器還未執(zhí)行,則可以取消 clearTimeout(id); console.log("已停止!"); }
## 3. 常用屬性
- screen 對象
- 包含有關(guān)客戶端顯示屏幕的信息
- 常用于獲取屏幕的分辨率和色彩
- 常用屬性:
- width height
- availWidth availHeight
- history對象
- 包含用戶訪問過的URL
- length屬性:瀏覽器歷史列表中的URL數(shù)量
- 方法:
- back();
- forwird();
- location對象
- 包含有關(guān)當(dāng)前URL的信息
- 常用于獲取和改變當(dāng)前瀏覽的網(wǎng)址
- href屬性:當(dāng)前窗口正在瀏覽的網(wǎng)址地址
- 方法
- reload():重新載入當(dāng)前網(wǎng)址,相當(dāng)于刷新
- navigator 對象
- 包含有關(guān)瀏覽器的信息
- 常用于獲取客戶端瀏覽器和操作系統(tǒng)的信息
> 案例
//Location對象 function f1(){ var b = confirm("你真的要離開我嗎?"); if(b){ location.; } } //刷新頁面 function f2(){ location.reload(); } //screen 對象: 獲取屏幕寬高 function f3(){ console.log(screen.width); console.log(screen.height); console.log(screen.availWidth); console.log(screen.availHeight); } //history對象 function f4(){ history.forward(); } //navigator對象 function f5(){ console.log(navigator.userAgent); }
## DOM
### DOM操作
- 查找節(jié)點(diǎn)
- 讀取節(jié)點(diǎn)信息
- 修改節(jié)點(diǎn)信息
- 創(chuàng)建節(jié)點(diǎn)信息
- 刪除節(jié)點(diǎn)
### 讀取、修改
- 節(jié)點(diǎn)信息
- nodeName:節(jié)點(diǎn)名稱
- nodeType:節(jié)點(diǎn)類型
- (1) 讀取節(jié)點(diǎn)
- 讀取節(jié)點(diǎn)的名稱,類型
<p id="p1">1.<b>讀寫</b>節(jié)點(diǎn)</p> <p id="p2">2.<b>查詢</b>節(jié)點(diǎn)</p> <p id="p3">3.<b>增刪</b>節(jié)點(diǎn)</p> var p1 = document.getElementById("p1"); console.log(p1.nodeName); console.log(p1.nodeType);
- 讀寫節(jié)點(diǎn)的內(nèi)容
- 雙標(biāo)簽中間的文本叫內(nèi)容,任何雙標(biāo)簽都有內(nèi)容
- innerHTML:包括子標(biāo)簽信息
- innerText:忽略子標(biāo)簽
console.log(p1.innerHTML); p1.innerHTML="1.<i>讀寫</i>節(jié)點(diǎn)"; console.log(p1.innerText);
- 讀寫節(jié)點(diǎn)的值
- 表單控件中的數(shù)據(jù)叫值,只有如下表單控件才有值:
- input
- select
- textarea
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,同時也希望多多支持腳本之家!
- 詳解springmvc 接收json對象的兩種方式
- 原生js編寫基于面向?qū)ο蟮姆猪摻M件
- Javascript之面向?qū)ο?-接口
- Javascript之面向?qū)ο?-封裝
- Javascript之面向?qū)ο?-方法
- 遍歷json 對象的屬性并且動態(tài)添加屬性的實(shí)現(xiàn)
- js實(shí)現(xiàn)倒計時及時間對象
- JS創(chuàng)建對象的寫法示例
- JavaScript 深層克隆對象詳解及實(shí)例
- JS日期對象簡單操作(獲取當(dāng)前年份、星期、時間)
- JS動態(tài)給對象添加屬性和值的實(shí)現(xiàn)方法
- JavaScript 判斷一個對象{}是否為空對象的簡單方法
相關(guān)文章
從JavaScript純函數(shù)解析最深刻的函子 Monad實(shí)例
這篇文章主要為大家介紹了從JavaScript純函數(shù)解析最深刻的函子 Monad實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10微信小程序?qū)崿F(xiàn)商品屬性聯(lián)動選擇
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)商品屬性聯(lián)動選擇,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-02-02Bootstrap教程JS插件滾動監(jiān)聽學(xué)習(xí)筆記分享
這篇文章主要為大家分享了Bootstrap教程JS插件滾動監(jiān)聽學(xué)習(xí)筆記,內(nèi)容很詳細(xì),感興趣的小伙伴們可以參考一下2016-05-05JS正則表達(dá)式常見函數(shù)與用法小結(jié)
這篇文章主要介紹了JS正則表達(dá)式常見函數(shù)與用法,結(jié)合實(shí)例形式分析了JS正則表達(dá)式基本功能、常見函數(shù)與相關(guān)使用技巧,需要的朋友可以參考下2020-04-04基于JavaScript實(shí)現(xiàn)TAB標(biāo)簽效果
js實(shí)現(xiàn)tab標(biāo)簽效果,在項(xiàng)目中經(jīng)常用到,今天抽點(diǎn)時間把我寫的js實(shí)現(xiàn)tab標(biāo)簽效果源碼分享給大家,對js tab標(biāo)簽代碼需要的朋友參考下2016-01-01