欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺述Javascript的外部對(duì)象

 更新時(shí)間:2016年12月07日 08:38:03   作者:梁小濤  
本文主要對(duì)Javascript的外部對(duì)象進(jìn)行介紹,列舉了具體實(shí)例。便于理解。有需要的朋友可以看下

Window 瀏覽器:

- location:地址
- history:歷史
- Document:文檔
- screen:窗口
- navigator:幫助

> 1.外部對(duì)象就是瀏覽器提供的API -- **BOM**

> 2.這些對(duì)象由w3c規(guī)定,由瀏覽器開發(fā)者設(shè)計(jì)并開發(fā)

> 3.這些對(duì)象分為2部分,其中BOM包含了DOM

> 4.我們可以通過js訪問這些對(duì)象

# 外部對(duì)象

> BOM (Browser Object Model)

    瀏覽器對(duì)象模型,用來訪問和操縱瀏覽器窗口,是JavaScript有能力與瀏覽器對(duì)話。

> DOM (Document Object Model)

    文檔對(duì)象模型,用來操作文檔。

##1.對(duì)話框

- alert(str)
    - 提示對(duì)話框,顯示str字符串的內(nèi)容

- confirm(str)
    - 確認(rèn)對(duì)話框,顯示str字符串的內(nèi)容
    - 按"確定"按鈕返回true,其他操作返回false

>案例

 //調(diào)用window對(duì)象的屬性或方法,可以省略"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. 定時(shí)器

- 多用于網(wǎng)頁動(dòng)態(tài)時(shí)鐘,制作倒計(jì)時(shí),跑馬燈效果

- 周期性時(shí)鐘

    - 以一定的間隔執(zhí)行代碼,循環(huán)往復(fù)

    - setInterval(exp,time);

    - 返回已經(jīng)啟動(dòng)的定時(shí)器對(duì)象

- 停止啟動(dòng)的定時(shí)器

    - clearInterval(tID)

    - tID:啟動(dòng)的定時(shí)器對(duì)象

- 一次性時(shí)鐘

    - 在一個(gè)設(shè)定的時(shí)間間隔之后來執(zhí)行代碼,而不是在函數(shù)被調(diào)用后執(zhí)行

 - setTimeout(exp,time);

- 停止啟動(dòng)的定時(shí)器

    - clearTimeout(tID)   

- tID:啟動(dòng)的定時(shí)器對(duì)象

> 案例

1)周期性定時(shí)器

  //每隔N毫秒執(zhí)行一次函數(shù),反復(fù)執(zhí)行,直到達(dá)到停止條件位置。
  function f4(){
   var n = 5;
   //啟動(dòng)定時(shí)器,返回定時(shí)器的ID,用來停止定時(shí)器 
   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)定時(shí)器就相當(dāng)于啟動(dòng)了一個(gè)支線程,當(dāng)前方法f4相當(dāng)于主線程。
   //2個(gè)線程并發(fā)執(zhí)行,不互相等待,
   //因此主線程在啟動(dòng)完支線程后立刻向下執(zhí)行,而支線程卻需要在1秒后才執(zhí)行
   console.log("蹦");
  }

2)一次性定時(shí)器

  //推遲N毫秒執(zhí)行一次函數(shù),執(zhí)行完之后,自動(dòng)停止,
  //也可以在未執(zhí)行前手動(dòng)停止
 var id;
 function f5(){
  //啟動(dòng)定時(shí)器,若想在未執(zhí)行定時(shí)器前就將它停止,需要使用id
  id = setTimeout(function(){
   console.log("叮叮叮");
   f4();
  },3000);
 }
 function f6(){
  //若定時(shí)器已經(jīng)執(zhí)行,則取消無效; 若定時(shí)器還未執(zhí)行,則可以取消
  clearTimeout(id);
  console.log("已停止!");
 }

 ## 3. 常用屬性

- screen 對(duì)象

    - 包含有關(guān)客戶端顯示屏幕的信息
    - 常用于獲取屏幕的分辨率和色彩
    - 常用屬性:
        - width height
        - availWidth availHeight

-  history對(duì)象

    -  包含用戶訪問過的URL

        -  length屬性:瀏覽器歷史列表中的URL數(shù)量

    - 方法:

        - back();
        - forwird();

- location對(duì)象

    - 包含有關(guān)當(dāng)前URL的信息

        - 常用于獲取和改變當(dāng)前瀏覽的網(wǎng)址

    - href屬性:當(dāng)前窗口正在瀏覽的網(wǎng)址地址

    - 方法

        - reload():重新載入當(dāng)前網(wǎng)址,相當(dāng)于刷新   

  - navigator 對(duì)象

    - 包含有關(guān)瀏覽器的信息

        - 常用于獲取客戶端瀏覽器和操作系統(tǒng)的信息

> 案例

//Location對(duì)象
 function f1(){
  var b = confirm("你真的要離開我嗎?");
  if(b){
   location.;
  } 
 }
 //刷新頁面
 function f2(){
  location.reload();
 }
 //screen 對(duì)象: 獲取屏幕寬高
 function f3(){
  console.log(screen.width);
  console.log(screen.height);
  console.log(screen.availWidth);
  console.log(screen.availHeight);
 }
 //history對(duì)象 
 function f4(){
  history.forward();
 }
 //navigator對(duì)象
 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

以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,同時(shí)也希望多多支持腳本之家!

相關(guān)文章

  • 從JavaScript純函數(shù)解析最深刻的函子 Monad實(shí)例

    從JavaScript純函數(shù)解析最深刻的函子 Monad實(shí)例

    這篇文章主要為大家介紹了從JavaScript純函數(shù)解析最深刻的函子 Monad實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • 微信小程序?qū)崿F(xiàn)商品屬性聯(lián)動(dòng)選擇

    微信小程序?qū)崿F(xiàn)商品屬性聯(lián)動(dòng)選擇

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)商品屬性聯(lián)動(dòng)選擇,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-02-02
  • Bootstrap教程JS插件滾動(dòng)監(jiān)聽學(xué)習(xí)筆記分享

    Bootstrap教程JS插件滾動(dòng)監(jiān)聽學(xué)習(xí)筆記分享

    這篇文章主要為大家分享了Bootstrap教程JS插件滾動(dòng)監(jiān)聽學(xué)習(xí)筆記,內(nèi)容很詳細(xì),感興趣的小伙伴們可以參考一下
    2016-05-05
  • js實(shí)現(xiàn)盒子移動(dòng)動(dòng)畫效果

    js實(shí)現(xiàn)盒子移動(dòng)動(dòng)畫效果

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)盒子移動(dòng)動(dòng)畫效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • JS正則表達(dá)式常見函數(shù)與用法小結(jié)

    JS正則表達(dá)式常見函數(shù)與用法小結(jié)

    這篇文章主要介紹了JS正則表達(dá)式常見函數(shù)與用法,結(jié)合實(shí)例形式分析了JS正則表達(dá)式基本功能、常見函數(shù)與相關(guān)使用技巧,需要的朋友可以參考下
    2020-04-04
  • JS嚴(yán)格模式原理與用法實(shí)例分析

    JS嚴(yán)格模式原理與用法實(shí)例分析

    這篇文章主要介紹了JS嚴(yán)格模式原理與用法,結(jié)合實(shí)例形式分析了JS嚴(yán)格模式基本概念、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2020-04-04
  • JavaScript中reduce方法的用法及使用場(chǎng)景

    JavaScript中reduce方法的用法及使用場(chǎng)景

    reduce()方法對(duì)數(shù)組中的每個(gè)元素按序執(zhí)行一個(gè)提供的reducer函數(shù),每一次運(yùn)行 reducer會(huì)將先前元素的計(jì)算結(jié)果作為參數(shù)傳入,最后將其結(jié)果匯總為單個(gè)返回值,今天我們就介紹一下reduce的幾種簡(jiǎn)單使用場(chǎng)景,需要的朋友可以參考下
    2023-08-08
  • 基于JavaScript實(shí)現(xiàn)TAB標(biāo)簽效果

    基于JavaScript實(shí)現(xiàn)TAB標(biāo)簽效果

    js實(shí)現(xiàn)tab標(biāo)簽效果,在項(xiàng)目中經(jīng)常用到,今天抽點(diǎn)時(shí)間把我寫的js實(shí)現(xiàn)tab標(biāo)簽效果源碼分享給大家,對(duì)js tab標(biāo)簽代碼需要的朋友參考下
    2016-01-01
  • JS動(dòng)態(tài)調(diào)用方法名示例介紹

    JS動(dòng)態(tài)調(diào)用方法名示例介紹

    在JS中如何動(dòng)態(tài)調(diào)用方法名,想必很多的朋友們都不會(huì)吧,下面為大家舉例介紹下具體的調(diào)用方法
    2013-12-12
  • JSscript標(biāo)簽有哪些屬性

    JSscript標(biāo)簽有哪些屬性

    本文介紹了JSscript標(biāo)簽有哪些屬性,向HTML頁面中插入JavaScript的主要方法,就是使用script>元素.這個(gè)元素由Netscape創(chuàng)造并在NetscapeNavigator2中首先實(shí)現(xiàn).后來,這個(gè)元素被加入到正式的HTML規(guī)范中,下面小編來講解下JSscript標(biāo)簽有哪些屬性,需要的朋友可以參考下
    2022-01-01

最新評(píng)論