zoukankan      html  css  js  c++  java
  • js学习--DOM操作详解大全一(浏览器对象)

    一.客户端中的window对象

    1. window对象表示当前浏览器的窗口,它是一个顶级对象,我们创建的所有对象、函数、变量都是window对象的成员。
    2. window对象自带了一些非常有用的方法、属性。
    window的子对象:
    • document:可操作显示在窗口的文档内容。
    • location:可让窗口载入新的URL。
    • navigator:包含当前浏览器的信息。
    • history:包含当前浏览器的历史。
    window的方法:
    • open():打开一个新的窗体。
    • close():关闭窗体。
    window对话框函数:
    • alert():弹出消息对话框(对话框中只有一个OK按钮)。
    • confirm():弹出消息对话框(对话框中包含一个OK按钮与Cancel按钮)。
    • prompt():弹出消息对话框(对话框中包含一个OK按钮、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支持的条件注释来处理对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是一个大型的框架,它包含一个UI组件集合、包管理系统、数据抽象层等。
    http://dojotoolkit.org/
    4、YUI是Yahoo!使用的一个框架,包括了DOM工具、UI组件等。
    http://yuilibrary.com/

  • 相关阅读:
    arcgis 9.3安装步骤
    ENVI分类介绍
    转 经典的KNN算法解释
    彩色图像增强方法
    android中怎么让 button组件居中显示
    Android异步查询框架AsyncQueryHandler使用简介
    解决android中checkbox全部选择的操作
    System.exit(0)和System.exit(1)区别
    Andye献礼2013Android开发各种小功能大全(第一版)
    Android中退出多个Activity的两个经典方法
  • 原文地址:https://www.cnblogs.com/jerry666/p/5278219.html
Copyright © 2011-2022 走看看