一.客户端中的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. 【转】tmux入门指南
			
    按照官方说明,tmux是一个终端复用软件.我接触tmux也就是这几天的事情,但已经发现其强大.作为一个文艺程序员,有必要向大家分享一下,这么好的东东怎敢藏着掖着. 先用起来再说 假设你已经装好tmux ...
    
			
    2. 
						
  2. 使用webdav实现文档共享
			
    1.PC1上开启WebDAV的服务,添加创建规则:运行访问的路径.运行访问的用户(这里的用户是指PC1上的用户名和密码).访问权限
    
			
    3. 
						
  3. MSSQLSERVER数据库- 打开表出现目录名无效
			
    打开SQLSERVER数据库,出现目录名无效,如下图: 解决方法到 临时目录:C:\Documents and Settings\Administrator\Local Settings\Temp 手 ...
    
			
    4. 
						
  4. iOS开发总结-UITableView 自定义cell和动态计算cell的高度
			
    UITableView cell自定义头文件:shopCell.h#import <UIKit/UIKit.h>@interface shopCell : UITableViewCell@ ...
    
			
    5. 
						
  5. java版本 ueditor  在线编辑器 配置
			
    上传文件大小的配置 1. ueditor\dialogs\video\video.js   搜索  file_size_limit  修改这个数值 (这是前台 flash的限制) 2. ueditor ...
    
			
    6. 
						
  6. boost库在工作（37）网络UDP服务端之七
			
    前面介绍的都是网络TCP的服务器和客户端,其实还有UDP的服务器和客户端,同时也有同步和异步之分.UDP与TCP最大的区别,就是TCP是基于连接的,而UDP是无连接的.这里所谓的连接是指对方中断服务时 ...
    
			
    7. 
						
  7. ios6如何处理内存，分别为前警告后
			
    这里有一篇文章.非常具体地说明了ios6前后是怎样处理内存警告的: 来自唐巧的技术博客:http://blog.devtang.com/blog/2013/05/18/goodbye-viewdidu ...
    
			
    8. 
						
  8. Linux内核源代码情景分析系列
			
    http://blog.sina.com.cn/s/blog_6b94d5680101vfqv.html Linux内核源代码情景分析---第五章 文件系统  5.1 概述 构成一个操作系统最重要的就 ...
    
			
    9. 
						
  9. AndroidManifest.xml解释说明和android的启动过程
			
    1.android清单文件:AndroidManifest.xml 说明如下: <?xml version="1.0" encoding="utf-8"? ...
    
			
    10. 
						
  10. css3中允许单词内断句word-wrap和怎么处理断句word-break
			
    首先说一下:浏览器的默认行为,在一行中几个单词 排列着,如果最后一个长单词 太长时 首先是移到下一行,如果该单词的长度大于父元素的宽度,会溢出. <!doctype html> <h ...
    
			
    11.