js學習--DOM操做詳解大全一（瀏覽器對象）

時間 2019-12-12

原文原文鏈接

一.客戶端中的window對象javascript

window對象表示當前瀏覽器的窗口，它是一個頂級對象，咱們建立的全部對象、函數、變量都是window對象的成員。
window對象自帶了一些很是有用的方法、屬性。

window的子對象：

document:可操做顯示在窗口的文檔內容。
location:可以讓窗口載入新的URL。
navigator：包含當前瀏覽器的信息。
history：包含當前瀏覽器的歷史。

window的方法：

open()：打開一個新的窗體。
close()：關閉窗體。

window對話框函數：

alert():彈出消息對話框（對話框中只有一個ＯＫ按鈕）。
confirm():彈出消息對話框（對話框中包含一個ＯＫ按鈕與Cancel按鈕）。
prompt():彈出消息對話框（對話框中包含一個ＯＫ按鈕、Cancel按鈕與一個文本輸入框）。

二.web文檔裏使用Javascriptcss

Javascript程序能夠操做文檔對象(window.document,一般window能夠省略)，遍歷和管理文檔內容，改變CSS的樣式，註冊適當的事件來改變文檔元素的行爲。
Javascript可加強用戶瀏覽web文檔的體驗。
Javascript可操做XMLHttpRequest對象，實現從服務器獲取新信息，而不從新載入頁面。一般叫Ajax應用

三.html中嵌入script代碼簡單示例html

<html>
  <head>
	<script>
      function showTime(){
        var ele = document.getElementById('clock');//經過id＝clock獲取文檔元素
        var d = new Date();//取得當前時間
        console.log(ele);
        ele.innerHTML = d.toLocaleTimeString();//轉換爲本地時間
        setTimeout(showTime,1000);//定時調用
      }

  	</script>
    <style>
      #clock{
        font:bold 26pt;
      }
    </style>
  </head>
  <body onload="showTime();">
    <h1>顯示當前時間：</h1>
    <span id="clock"></span>
  </body>
</html>

javascript代碼能夠放置在html屬性裏來定義事件處理程序。如onclick，onchange事件等。html5

<html>
  <head>
    <script>
      
    </script>
  </head>
 <body>
   <input type="checkbox" name="sex" value="男" onchange="alert(this.checked);"/>男
 </body>
</html>

四.javascript執行順序　java

1､javascript程序執行有兩個階段。
第一階段，載入文檔內容，並執行<script>元素裏的代碼，按javascript代碼順序從上往下執行。
第二階段，此階段是異步的，並且由事件驅動。事件驅動階段裏發生的第一個事件是onload事件，表示文檔已經載入完成jquery

五.javascript的線程模型web

一、javascript中沒有任何關於線程的定義，也就是javascript是按單線程同樣工做，單線程執行是爲讓編程更加簡單。
2､當響應用戶的某個事件處理過程當中，若是過程複雜可能致使瀏覽器會變的無響應。因此咱們在處理時要反饋用戶當前瀏覽器是正在活動，以得到最好的用戶體驗。
3､若是有些計算而致使明顯的延遲，應在文檔徹底載入後作計算，也可用setTimeout()或setInterval()方法在後臺運行子任務。編程

4.可經過setTimeout()能夠把計算任務分紅若干個小任務來執行，提升頁面的響應能力。bootstrap

<html>
  <head>
    <script>
        //判斷質數
        var MAX = 1000000;
      	function isPrime(n) { 
          if (n == 0 || n == 1) { 
              return false; 
          } 
          var bound = Math.floor(Math.sqrt(n)); 
          for (var i = 2; i <= bound; i++) { 
             if (n % i == 0) { 
                 return false; 
             } 
          } 
          return true; 
       }
    var jobs = 10, numberPerJob = Math.ceil(MAX / jobs); 
    var count = 0; 
    
    function calculate(start, end) { 
        for (var i = start; i <= end; i++) { 
            if (isPrime(i)) { 
                count++; 
            } 
        } 
    } 
    
    var start, end, timeout, finished = 0; 
    function manage() { 
        if (finished == jobs) { 
            window.clearTimeout(timeout); 
            alert("計算完成，質數個數爲：" + count); 
        } 
        else { 
            start = finished * numberPerJob + 1, 
                end = Math.min((finished + 1) * numberPerJob, MAX); 
            timeout = window.setTimeout(function() { 
                calculate(start, end); 
                finished++; 
                manage(); 
            }, 100); 
        } 
    } 
    
    manage(); 
      

    </script>
  </head>
  <body>
    <h1>有大量的計算，頁面當即顯示出來，大量的計算在後臺運行。</h1>
  </body>
</html>

　　六.兼容性瀏覽器

測試網站來測試瀏覽器的兼容性：http://www.quirksmode.org/dom/core/

javascript編程中不少是不兼容性都是針對的IE的。
能夠用IE支持的條件註釋來處理對ＩＥ的不兼容。

條件註釋能夠應用到js,css,內容

<html>
  <head>
    <!--[if lt IE 9]>
		<script type="text/javascript" src="http://www.itbegin.com/commonscripts/bootstrap/html5shiv.min.js?20150301" ></script>
<![endif]-->
  </head>
  <body>
    <!--[if IE 6]>
		這是IE6顯示的內容
	<![endif]-->
    <!--[if !IE ]><-->
		這不是IE要顯示的內容
	<!--><![endif]-->
  </body>
</html>

七.javascript框架
1､jQuery是當前最流行的框架之一。

http://jquery.com/

2､Prototype與jQuery相似，是專門針對DOM和Ajax實現的實用工具。

http://prototypejs.org/

3､Dojo是一個大型的框架，它包含一個ＵＩ組件集合、包管理系統、數據抽象層等。

http://dojotoolkit.org/

四、ＹＵＩ是Yahoo!使用的一個框架，包括了DOM工具、UI組件等。

http://yuilibrary.com/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。