一.客户端中的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. AndroidHttp通信 HTTP Client与HttpURLConnection的区别
			
    Apache HTTP Client DefaultHttpClient 以及其相关类AndroidHttpClient 适用于 web browsers, 他们是可扩展的,并且拥有大量的稳定APIs ...
    
			
    2. 
						
  2. JMS消息类型模型
			
    JMS有两种消息类型模型,一种是P2P(Point To Point), 另一种是Pub/Sub(Publisher/Subscriber),二者之间的主要区别在于消息是否支持重复消费. P2P模型中 ...
    
			
    3. 
						
  3. maven项目文件乱码问题
			
    今日碰到maven项目中的一个资源文件出现乱码,排查发现是在.setting文件夹下的org.eclipse.core.resources.prefs文件导致的. 修改前的编码规则如下: <sp ...
    
			
    4. 
						
  4. PHP判断变量是否为长整形的方法
			
    PHP判断变量是否为长整形的方法,可用于判断QQ号等,避免了int溢出的问题 <?php /** * 判断变量是否为长整数(int与整数float) * @param mixed $var *  ...
    
			
    5. 
						
  5. Eclipse中修改SVN用户名和密码方法[转]
			
    由于在svn 的界面中并没有为我们提供直接更换用户名密码的地方,所以一旦我们需要更换用户名的就需要自己想一些办法. 解决方案: 在Eclipse 使用SVN 的过程中大多数人往往习惯把访问SVN 的用 ...
    
			
    6. 
						
  6. Java 加密 base64 encode
			
    版权声明:本文为博主原创文章,未经博主允许不得转载. [前言] 计算机中的数据都是二进制的,不管是字符串还是文件,而加密后的也是二进制的, 而我们要看到的往往是字符串,本文就介绍了将byte[]转为各 ...
    
			
    7. 
						
  7. Struck: Structrued Output Tracking with Kernels 论文笔记
			
    Main idear Treat the tracking problem as a classification task and use online learning techniques to ...
    
			
    8. 
						
  8. 传输层：TCP UDP SCTP
			
    总图 虽然协议族被称为“TCP/IP”,但除了TCP和IP这两个主要协议外,还有许多其他成员.图2-1展示了这些协议的概况. 图2-1中同时展示了IPV4和IPV6.从右向左看该图,最右边的5个网络应 ...
    
			
    9. 
						
  9. Linux shell的&&和||--转载
			
    Linux shell的&&和||   shell 在执行某个命令的时候,会返回一个返回值,该返回值保存在 shell 变量 $? 中.当 $? == 0 时,表示执行成功:当 $?  ...
    
			
    10. 
						
  10. Class Fxp\Composer\AssetPlugin\Repository\NpmRepository does not exist
			
    使用 composer 安装 laravel 时报错, 如下: [ReflectionException] Class Fxp\Composer\AssetPlugin\Repository\NpmR ...
    
			
    11.