一.客户端中的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. 2  weekend110的hadoop的自定义排序实现  + mr程序中自定义分组的实现
			
    我想得到按流量来排序,而且还是倒序,怎么达到实现呢? 达到下面这种效果, 默认是根据key来排, 我想根据value里的某个排, 解决思路:将value里的某个,放到key里去,然后来排 下面,开始w ...
    
			
    2. 
						
  2. hdoj 1787 GCD Again【欧拉函数】
			
    GCD Again Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...
    
			
    3. 
						
  3. Hyperic Agent 安装配置报 - No token file found, waiting for Agent to initialize
			
    本人经过跟VMWare 支持的多方努力,问题终于得到解决,方案如下: * Stop the agent Windows service. * Make sure all the agent proce ...
    
			
    4. 
						
  4. 事物复制中大项目(Large Article)出问题如何快速修复
			
    事物日志中如果大的发布项目(Article)出问题了,并且影响了系统的使用,如何快速的解决? 一般的做法是重新用快照或者备份初始化,但是如果出问题的表非常大(上亿的记录,几十GB的数据),使用初始化是 ...
    
			
    5. 
						
  5. SQLite 入门教程（四）增删改查，有讲究 （转）
			
    转于: SQLite 入门教程(四)增删改查,有讲究 一.插入数据 INSERT INTO 表(列...) VALUES(值...) 根据前面几篇的内容,我们可以很轻送的创建一个数据表,并向其中插入一 ...
    
			
    6. 
						
  6. Thoughtworks的技术雷达
			
    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Thoughtworks的技术雷达.
    
			
    7. 
						
  7. 驱动lx4f120h,头文件配置,没有完全吃透，望指点
			
    来了块开发板,没接触过,希望能驱动起来,就首先试一下驱动LED,没想到刚开始建好工程问题就来了 使用GPIO驱动,首先想到的是关于GPIO的头文件gpio.h,事实上这个还不够,还需要设置一下系统的配 ...
    
			
    8. 
						
  8. Char* ,CString ,WCHAR*之间的转换
			
    关于Char* ,CString ,WCHAR*之间的转换问题 GDI+所有类的接口函数如果要传递字符串作为参数的话,似乎都用UNICODE串,即WCHAR*.我开始也被整得晕头转向,因为窗口编程所用 ...
    
			
    9. 
						
  9. [Javascript] Immutable opreators
			
    slice filter map ...spread concat Object.assign let items = [1,2,3]; //add let newItems = [...items, ...
    
			
    10. 
						
  10. 懂，你的App生，不懂，死！
			
    近期有一些开发人员.创业公司的人加我微信viyi88,咨询一些关于自己App的事情.被问得最多的可能就是:"我的App怎样推广添加下载量?"而且信誓旦旦地说自己的App做得非常好, ...
    
			
    11.