一.客户端中的window对象

  1. window对象表示当前浏览器的窗口，它是一个顶级对象，我们创建的所有对象、函数、变量都是window对象的成员。
  2. window对象自带了一些非常有用的方法、属性。
window的子对象：
  • document:可操作显示在窗口的文档内容。
  • location:可让窗口载入新的URL。
  • navigator：包含当前浏览器的信息。
  • history：包含当前浏览器的历史。
window的方法：
  • open()：打开一个新的窗体。
  • close()：关闭窗体。
window对话框函数：

  • alert():弹出消息对话框（对话框中只有一个ＯＫ按钮）。
  • confirm():弹出消息对话框（对话框中包含一个ＯＫ按钮与Cancel按钮）。
  • prompt():弹出消息对话框（对话框中包含一个ＯＫ按钮、Cancel按钮与一个文本输入框）。

二.web文档里使用Javascript

  1. Javascript程序可以操作文档对象(window.document,通常window可以省略)，遍历和管理文档内容，改变CSS的样式，注册适当的事件来改变文档元素的行为。
  2. Javascript可增强用户浏览web文档的体验。
  3. Javascript可操作XMLHttpRequest对象，实现从服务器获取新信息，而不重新载入页面。通常叫Ajax应用

三.html中嵌入script代码简单示例

<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事件等。

<html>

  <head>

    <script>

    </script>

  </head>

 <body>

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

 </body>

</html>

四.javascript执行顺序　

1､javascript程序执行有两个阶段。
第一阶段，载入文档内容，并执行<script>元素里的代码，按javascript代码顺序从上往下执行。
第二阶段，此阶段是异步的，而且由事件驱动。事件驱动阶段里发生的第一个事件是onload事件，表示文档已经载入完成

五.javascript的线程模型

1、javascript中没有任何关于线程的定义，也就是javascript是按单线程一样工作，单线程执行是为让编程更加简单。
2､ 当响应用户的某个事件处理过程中，如果过程复杂可能导致浏览器会变的无响应。所以我们在处理时要反馈用户当前浏览器是正在活动，以获得最好的用户体验。
3､如果有些计算而导致明显的延迟，应在文档完全载入后做计算，也可用setTimeout()或setInterval()方法在后台运行子任务。

4.可通过setTimeout()可以把计算任务分成若干个小任务来执行，提高页面的响应能力。

<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/
  1. javascript编程中很多是不兼容性都是针对的IE的。
  2. 可以用IE支持的条件注释来处理对ＩＥ的不兼容。
  3. 条件注释可以应用到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/
4、ＹＵＩ是Yahoo!使用的一个框架，包括了DOM工具、UI组件等。
http://yuilibrary.com/


												


											
js学习--DOM操作详解大全一（浏览器对象）的更多相关文章
	

    
								
  1. js学习--DOM操作详解大全 前奏（认识DOM）
		
    一 . 节点属性 DOM 是树型结构,相应的,可以通过一些节点属性来遍历节点树: 方法 说明 nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text.nodeNa ...
    
		
    2. 
						
  2. js学习--DOM操作详解大全二（window对象）
		
    一.window - 计时器 1､setTimeout()可以用来在指定的时间之后单次调用函数.setTimeount(f,1000);//一秒后调用函数fclearTimeout();取消函数的执行 ...
    
		
    3. 
						
  3. jQuery的DOM操作详解
		
    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
    
		
    4. 
						
  4. JavaScript 的DOM操作详解
		
    内容概要 DOM之查找标签 基本查找 间接查找 节点操作 获取值操作 class操作 样式操作 事件 内置参数this 事件练习 内容详细 DOM操作 DOM(Document Object Mode ...
    
		
    5. 
						
  5. javascript dom 操作详解 js加强
		
    js加强操作实现代码. 1 .文档里的每个节点都有属性 nodeName . nodeValue . nodeType nodeName 文本节点的的节点名是 #text , nodeName 是只读 ...
    
		
    6. 
						
  6. JavaScript基础：DOM操作详解
		
    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...
    
		
    7. 
						
  7. Jqurey DOM 操作详解
		
    一.获取 1.获取内容----.text()  .html()   .value() text() - 设置或返回所选元素的文本内容                         格式:$(选择器) ...
    
		
    8. 
						
  8. mongodb学习04 操作详解(2)
		
    查找文档 筛选查找 db.collection.find(); 返回一个集合中文档的子集,子集的 范围从 0 个文档到整个集合; db.collection.findOne(); 返回筛选的一个文档; ...
    
		
    9. 
						
  9. mongodb学习03 操作详解
		
    插入文档 db.test.insert({"name":"jinks"}); 批量插入 db.test.insert([{}, {}, {}]); 一次批量插入 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Linux常用命令及vim的使用、vim常用插件（推荐）
			
    看了3篇文章,很好 vim中的区域拷贝 剪切,粘贴: 正常模式,移动光标到剪切的区域开始处,按v,进入可视模式,然后选择区域.按x键,剪切.到指定位置按p粘贴. 撤销按u 恢复按ctrl-r  简明  ...
    
			
    2. 
						
  2. Overview of the Packages JAXP
			
    The SAX and DOM APIs are defined by the XML-DEV group and by the W3C, respectively. The libraries th ...
    
			
    3. 
						
  3. 字符串hash函数
			
    本文搜集了一些字符串的常用hash函数. 范例1:判断两个单词是否含有相同的字母,此时我们可以用hash做.例如,“aaabb”与"aabb"含有相同的单词.(参考:http:// ...
    
			
    4. 
						
  4. [置顶] 在Ubuntu下实现一个简单的Web服务器
			
    要求: 实现一个简单的Web服务器,当服务器启动时要读取配置文件的路径.如果浏览器请求的文件是可执行的则称为CGI程序,服务器并不是将这个文件发给浏览器,而是在服务器端执行这个程序,将它的标准输出发给 ...
    
			
    5. 
						
  5. Javascript之<script>标签
			
    把javascript代码插入到HTML页面中需要使用<script>标签,使用这个元素可以使javascript和html标记混合在一个页面中,也可以引入外部的javascript文件. ...
    
			
    6. 
						
  6. MiniCodeEditor：只有168字节的在线Html/CSS/JavaScript编辑器
			
    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:MiniCodeEditor:只有168字节的在线Html/CSS/JavaScript编辑器.
    
			
    7. 
						
  7. Microsoft SyncToy 文件同步工具
			
    Microsoft SyncToy SyncToy 是由 微软 推出的一款免费的文件夹同步工具.虽然名字中有一个 Toy,但是大家可千万不要误以为它的功能弱爆了.实际上,我感觉这款软件还真是摆脱了微软 ...
    
			
    8. 
						
  8. Android Studio 1.0.2 设置内存大小
			
    http://www.linuxidc.com/Linux/2015-04/116457.htm Android studio 1.0.2默认最大内存是750M,这样跑起来非常的卡,难以忍受,机器又不 ...
    
			
    9. 
						
  9. 关于Struts框架简介
			
    一,什么是框架? 所谓框架就是提供了一组统一的接口和编程方式的可以重用组件,同时我们可以在框架中扩充我们自己的特定逻辑. 二,MVC设计模式 将应用程序分为3个部分:模型 Model,视图View,控 ...
    
			
    10. 
						
  10. C语言中volatilekeyword的作用
			
    一.前言 1.编译器优化介绍: 由于内存訪问速度远不及CPU处理速度,为提高机器总体性能,在硬件上引入硬件快速缓存Cache,加速对内存的訪问.另外在现代CPU中指令的运行并不一定严格依照顺序运行,没 ...
    
			
    11.