Window 瀏覽器：

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

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

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

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

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

# 外部對(duì)象

> BOM (Browser Object Model)

    瀏覽器對(duì)象模型，用來(lái)訪問(wèn)和操縱瀏覽器窗口，是JavaScript有能力與瀏覽器對(duì)話。

> DOM (Document Object Model)

    文檔對(duì)象模型，用來(lái)操作文檔。

##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)頁(yè)動(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í)間間隔之后來(lái)執(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，用來(lái)停止定時(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í)行，則取消無(wú)效; 若定時(shí)器還未執(zhí)行，則可以取消
  clearTimeout(id);
  console.log("已停止！");
 }

 ## 3. 常用屬性

- screen 對(duì)象

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

-  history對(duì)象

    -  包含用戶訪問(wèn)過(guò)的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("你真的要離開(kāi)我嗎？");
  if(b){
   location.;
  } 
 }
 //刷新頁(yè)面
 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>讀寫(xiě)</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);

    - 讀寫(xiě)節(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>讀寫(xiě)</i>節(jié)點(diǎn)";
        console.log(p1.innerText);

    - 讀寫(xiě)節(jié)點(diǎn)的值

        - 表單控件中的數(shù)據(jù)叫值，只有如下表單控件才有值：
        - input
        - select
        - textarea

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

最新評(píng)論