DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 淺述Javascript的外部對象
淺述Javascript的外部對象
編輯:關於JavaScript     

Window 浏覽器:

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

> 1.外部對象就是浏覽器提供的API -- **BOM**

> 2.這些對象由w3c規定,由浏覽器開發者設計並開發

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

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

# 外部對象

> BOM (Browser Object Model)

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

> DOM (Document Object Model)

    文檔對象模型,用來操作文檔。

##1.對話框

- alert(str)
    - 提示對話框,顯示str字符串的內容

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

>案例

 //調用window對象的屬性或方法,可以省略"window."
 //1.彈出框
  //1)彈出框
  function f1(){
   alert("你好,小俊子");
  }
  //2)確認框
  function f2(){
   var v = confirm("你吃了嗎?");
   //點擊確定返回true,否則返回false
   console.log(v);
  }
  //3)輸入框
  function f3(){
   var p = prompt("你吃的什麼?");
   //點擊取消返回null
   console.log(p);
  }

## 2. 定時器

- 多用於網頁動態時鐘,制作倒計時,跑馬燈效果

- 周期性時鐘

    - 以一定的間隔執行代碼,循環往復

    - setInterval(exp,time);

    - 返回已經啟動的定時器對象

- 停止啟動的定時器

    - clearInterval(tID)

    - tID:啟動的定時器對象

- 一次性時鐘

    - 在一個設定的時間間隔之後來執行代碼,而不是在函數被調用後執行

 - setTimeout(exp,time);

- 停止啟動的定時器

    - clearTimeout(tID)   

- tID:啟動的定時器對象

> 案例

1)周期性定時器

  //每隔N毫秒執行一次函數,反復執行,直到達到停止條件位置。
  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);
   //啟動定時器就相當於啟動了一個支線程,當前方法f4相當於主線程。
   //2個線程並發執行,不互相等待,
   //因此主線程在啟動完支線程後立刻向下執行,而支線程卻需要在1秒後才執行
   console.log("蹦");
  }

2)一次性定時器

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

 ## 3. 常用屬性

- screen 對象

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

-  history對象

    -  包含用戶訪問過的URL

        -  length屬性:浏覽器歷史列表中的URL數量

    - 方法:

        - back();
        - forwird();

- location對象

    - 包含有關當前URL的信息

        - 常用於獲取和改變當前浏覽的網址

    - href屬性:當前窗口正在浏覽的網址地址

    - 方法

        - reload():重新載入當前網址,相當於刷新   

  - navigator 對象

    - 包含有關浏覽器的信息

        - 常用於獲取客戶端浏覽器和操作系統的信息

> 案例

//Location對象
 function f1(){
  var b = confirm("你真的要離開我嗎?");
  if(b){
   location.href = "http://www.tmooc.cn";
  } 
 }
 //刷新頁面
 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操作

- 查找節點
- 讀取節點信息
- 修改節點信息
- 創建節點信息
- 刪除節點

### 讀取、修改

- 節點信息

    - nodeName:節點名稱
    - nodeType:節點類型

- (1) 讀取節點

    - 讀取節點的名稱,類型 

      <p id="p1">1.<b>讀寫</b>節點</p>
      <p id="p2">2.<b>查詢</b>節點</p>
      <p id="p3">3.<b>增刪</b>節點</p>
      var p1 = document.getElementById("p1");
      console.log(p1.nodeName);
      console.log(p1.nodeType);

    - 讀寫節點的內容

         - 雙標簽中間的文本叫內容,任何雙標簽都有內容
         - innerHTML:包括子標簽信息
         - innerText:忽略子標簽

        console.log(p1.innerHTML);
        p1.innerHTML="1.<i>讀寫</i>節點";
        console.log(p1.innerText);

    - 讀寫節點的值

        - 表單控件中的數據叫值,只有如下表單控件才有值:
        - input
        - select
        - textarea

以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,同時也希望多多支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved