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/