一.客户端中的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. 1  weekend110的hdfs源码跟踪之打开输入流  +  hdfs源码跟踪之打开输入流总结
			
    3种形式的元数据,fsimage是在磁盘上,meta.data是在内存上, 我们继续,前面呢,断点是打在这一行代码处, FileSystem fs = FileSystem.get(conf); we ...
    
			
    2. 
						
  2. Java集合类总结
			
    Java的集合类关系图,摘自网络: List: 1,ArrayList:内部采用数组存储结构:随机查找效率高,增删效率低:线程不安全: 2,LinkedList:内部采用链表存储结构:增删效率高,查找 ...
    
			
    3. 
						
  3. Hibernate查询之HQL查询
			
    转自:http://blog.csdn.net/xiao_yi/article/details/1733342 Criteria查询对查询条件进行了面向对象封装,符合编程人员的思维方式,不过HQL(H ...
    
			
    4. 
						
  4. iOS使用技能 - 短信，语言验证码的获取与验证小结
			
    最近有学习一个小技能,这里小结一下,分享给大家,互相交流. 首先是大体步骤: 在mob官网注册,然后添加短信验证的应用 使用cocoapods导入框架 Podfile文件: platform :ios ...
    
			
    5. 
						
  5. js获取几个月前，几周前时间。
			
    /**  *  DK 命名空间  防止全局变量污染  */ var DK = {} ; /**  * 获取前几个月,默认为一个月,当前时间  * @author duke  * @date 格式为yy ...
    
			
    6. 
						
  6. 找出数组中出现奇数次的元素<异或的应用>
			
    点击打开链接:百度面试题之找出数组中之出现一次的两个数(异或的巧妙应用) 题目描述|:给定一个包含n个整数的数组a,其中只有一个整数出现奇数次,其他整数都出现偶数次,请找出这个整数 使用异或操作,因为 ...
    
			
    7. 
						
  7. 用JAX-WS在Tomcat中公布WebService
			
    JDK中已经内置了Webservice公布,只是要用Tomcat等Webserver公布WebService,还须要用第三方Webservice框架. Axis2和CXF是眼下最流行的Webservi ...
    
			
    8. 
						
  8. Lua 5.2 中文参考手册
			
    闲来无事,发现Lua更新到了5.2.2,参考手册也更到了5.2,在网上发现只有云风翻译的5.1版,花了几天时间翻译了一些. 参考手册有点长,又要随时修改,所以在github上建了项目,有需要的朋友可以 ...
    
			
    9. 
						
  9. 使用tuple返回多个值
			
    17.4编写并测试findbook函数 #include<iostream> #include<vector> #include<string> #include& ...
    
			
    10. 
						
  10. adb shell dumpsys package 查看versionCode
			
    adb shell dumpsys package +包名 输出可以查看包名 aapt dump xmltree xxx.apk AndroidManifest.xml 查看AndroidManife ...
    
			
    11.