JavaScript核心参考教程--客户端JavaScript

尽管JavaScript可以运行在不同的脚本执行引擎当中，在服务器端，ASP后台程序就可以使用JScript来编写。当然最广泛的还是JavaScript在客户端的应用。JavaScript除了可以访问本身内置的各种对象外，还可以访问浏览器提供的对象，通过对这些对象的访问，可以得到当前网页以及浏览器本身的一些信息，并能完成有关的操作。
浏览器窗口与网页文档之间，网页文档与文档元素之间是一种从属关系，他们关系如下：

浏览器的主要有以下对象：

Windows 对象。
Event 对象。
XMLHTTPRequest 对象。
Document 对象。
Screen 对象。
Navigator 对象。
Location 对象。
HTML标记通用属性。
Form 对象。
Input 对象。
Option 对象。
Image 对象。
Link 对象。
Anchor 对象。

这里我们主要对Window，Event，XMLHTTPRequest，Document，Screen，Navigator等主要对象进行介绍，其他的如Form，Input，Image，Option等对象，我们这里仅列出其属性和方法，不做过多介绍，因为它们的那些属性在HTML标记中都有说明。

 

    1. Window 对象

      Window 对象是浏览器脚本执行引擎的全局对象，它的属性和方法众多，我们先看一下它的方法和属性列表，不要被它吓到，其实常用的也就那么几个，后面我会专门有介绍，对于一些不太常用，需要的时侯可以回头来再看这个表。

      closed 一个只读的布尔值,声明了窗口是否已经关闭。
      defaultStatus 一个可读可写的字符串,声明了显示在状态栏中的默认消息。
      document 对描述窗口和框架中含有的文档的Document对象的只读引用。
      frames Window对象的数组,每个Window对象在窗口中含有一个框架。
      history 对窗口或框架的History对象的只读引用。
      length 窗口或框架包含的框架个数,也是数组frames[]中的元素数。
      location 用于窗口或框架的Location对象。
      Math 对一个对象的引用,该对象含有各种算术函数和常量。
      name 一个字符串,存放了窗口的名字。
      navigator 对Navigator对象的只读引用,提供Web浏览器的版本信息和配置信息。
      opener 一个可读可写的属性,是对一个Window对象的引用,该对象含有调用open()方法的脚本以打开顶级浏览器窗口的脚本, 只有表示顶层窗口的Window对象的opener属性才有效,表示框架的Window对象的opener属性无效。
      parent 对一个Window对象的只读引用,这个Window对象包含当前的窗口或框架。
      screen 一个Screen对象,由浏览器中所有窗口共享。
      self 对窗口自身的只读引用,等价于window属性。
      status 一个可读可写的字符串,声明了浏览器状态栏中的当前内容。
      top 对一个顶级窗口的只读引用,顶级窗口包含了这个窗口。
      window window对象等价于self属性,它包含了对窗口自身的引用。
      innerHeight,innerWidth 可读可写的属性,声明了窗口的文档显示区高度和宽度,以象素计, NS 支持。
      outerHeight,outerWidth 可读可写的属性,声明了整个窗口的高度和宽度,以象素计, Firefox, NS 支持。
      pageXOffset,pageYOffset 只读的整数,声明了当前文档向右和向下滚动过的象素数, Firefox, NS 支持。
      screenX,screenY 只读整数,声明了窗口左上角在屏幕的X坐标和Y坐标, Firefox, NS 支持。
      clientInformation IE中与navigator属性同义，IE支持。
      event 一个Event对象,该对象存放窗口Window中最近发生事件的详细信息，IE支持。
      alert() 在对话框框中显示简单的消息。
      confirm() 用对话框询问一个回答为是或否的问题。
      prompt() 用对话框请求输入一个简单的字符串。
      setInterval() 周期性执行指定的代码。
      clearInterval() 取消周期性执行的代码。
      setTimeout() 在经过指定的时间之后执行代码。
      clearTimeout() 取消挂起超时操作。
      focus() 把键盘焦点赋予顶层浏览器窗口。
      blur() 把键盘焦点从顶层窗口中移走。
      open() 创建并打开一个新窗口。
      close() 关闭窗口。
      moveBy() 把窗口移动一个相对的数量。
      moveTo() 把窗口移动到一个绝对的位置。
      resizeBy() 把窗口大小调整指定的数量。
      resizeTo() 把窗口大小调整到指定的大小。
      scrollBy() 把窗口滚动指定的数量。
      scrollTo() 把窗口滚动到指定的位置。
      scroll() 滚动窗口中显示的文本。
      print() 模拟对浏览器Print按钮的点击。
      back() 其行为和用户点击了Back按钮一样, Firefox，NS支持。
      captureEvents() 指定直接发送给该窗口的事件类型, Firefox，NS支持。
      forward() 其行为和用户点击了Forward按钮一样, Firefox，NS支持。
      handleEvent() 为给定的Event对象调用合适的事件处理程序, Firefox，NS支持。
      home() 显示浏览器的主页，Firefox，NS支持。
      releaseEvents() 指定不再捕捉的事件类型, Firefox，NS支持。
      routeEvent() 将Event对象传递给下一个对它感兴趣的对象的合适的事件处理程序, Firefox，NS支持。
      stop() 模拟对浏览器Stop按钮的点击, Firefox，NS支持。
      navigate() 装载并显示出指定的URL, IE支持。
      onblur 当窗口失去焦点时调用该事件的处理程序。
      onerror 当发生JavaScript错误时调用该事件的处理程序。
      onfocus 当窗口获得焦点时调用该事件的处理程序。
      onload 当文档(或框架集)被完全装载进来时调用该事件的处理程序。
      onmove 当移动窗口时调用该事件的处理程序,仅NS支持。
      onresize 当调整窗口大小时调用该事件的处理程序。
      onunload 当浏览器离开当前文档(或框架集)时调用该事件的处理程序。

       

      最常用要数open方法和close方法了，我们先来看一下open方法的详细定义：

      window.open(url, target, style); 
      url：指定需要打开的文件的链接。
      target：指定要打开窗口的位置，一般有几个可选属性：_blank在新窗口打开页面，_self在当前窗口打开页面，_top在顶层窗口打开页面，另外还可以指定其他已命名的窗口。
      style：指定窗口显示的风格，因为它的参数众多，且都是可选的，我们用一个例子来说明它。假设我们指定style="height=100, width=400, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300"，说明我们打开的新窗口的风格是：（高度100，宽度400，不显示工具栏，菜单栏，滚动条，URL栏，状态栏，并且不可改变大小，左上角在屏幕上的位置是(100，300)）
      返回值：该方法返回对新窗口的引用。这个方法颇受争议，万恶的弹出窗口就是它了。
      close 方法就比较简单，它主要用来关闭指定引用的窗口。
      现在，我们先来看一个例子。

      [javascript] view plaincopy
       
      1. var newWindow;  
      2. function openWindow(){  
      3.     newWindow = window.open("", "_blank", "height=100, width=400, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300");  
      4. }  
      5. function closeWindow(){  
      6.     if(newWindow){  
      7.         newWindow.close();  
      8.     }  
      9. }  

       

      如果你想轮询的执行某任务，比如在AJAX的程序中，轮询的检查服务器上的数据更新，或是希望经过指定的时间去执行某个操作，这个时候我们就需要用到setTimeout,setInterval哥俩了。而clearTimeout，clearInterval 专门用来取消它们。

      先来看看setTimeout函数的定义：

      功能：用于在指定的毫秒数后调用函数或计算表达式。
      语法：setTimeout(code,millisec)
      参数：

      • code：在定时时间到时要执行的JavaScript代码串。
      • millisec：设定的定时时间，用毫秒数表示。
      返回值：定时器的ID值，可用于clearTimeout()方法停止指定的定时器。

       

      注：setTimeout()只执行code一次。如果要多次调用，可使用setInterval()或者让code自身再次调用setTimeout()。

       

      setInterval函数的定义如下：

      功能：按照指定的周期（以毫秒计）来调用函数或计算表达式。
      语法：setInterval(code,millisec)
      参数：

      • code：在定时时间到时要执行的JavaScript代码串。
      • millisec：设定的定时时间，用毫秒数表示。
      返回值：定时器的ID值，可用于clearInterval()方法停止指定的定时器。

       

      注：setInterval()方法会不停地调用函数，直到用clearInterval()终止定时或窗口被关闭。

       

      我们来看一个例子，下面有两个个进度条，当点击startTimeout的时候，第一条进度条的长度会逐渐的增加，当点击endTimeout的时候，它就会停下来。当点击startInterval的时候，第二条进度条的长度会逐渐的增加，当点击endInterval之后，它也会停下来。
       
       
       
       
      这两个特效的实现，我们就用到了setInterval和setTimeout。以下是它的实现源码。
      [javascript] view plaincopy
       
      1. function progress(id){  
      2.     var bar = document.getElementById(id);  
      3.     var len = parseInt(bar.style.width);  
      4.     if(len > 300){  
      5.         len = 10;  
      6.     }     
      7.     bar.style.width = len + 1 + 'px';  
      8. }  
      9.   
      10. var timeoutHandler, intervalHandler;  
      11.   
      12. function startTimeout(){  
      13.     //每执行一次，progressBar1的width加1。  
      14.     progress('progressBar1');  
      15.     //100ms 后，调用startTimeout  
      16.     timeoutHandler = window.setTimeout(startTimeout, 100);  
      17. }  
      18.   
      19. function startInterval(){  
      20.     //每隔100ms，progressBar2的with加1.  
      21.     intervalHandler = window.setInterval("progress('progressBar2')", 100);  
      22. }  
      23.   
      24. function endTimeout(){  
      25.     clearTimeout(timeoutHandler);  
      26. }  
      27. function endInterval(){  
      28.     clearInterval(intervalHandler);  
      29. }  

       

      moveBy()，moveTo()，resizeBy()，resizeTo()，几个方法尽管用的不多，但是却很有意思，它可以控制窗口的大小和位置，我们使用一个例子来看它们的用法：

      [javascript] view plaincopy
       
      1. function moveWindow(){  
      2.     // 打开一个新的空白窗口。  
      3.     var ow = window.open("", "_blank", "height=300, width=500, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300");  
      4.     //1秒钟后，把它向下和向右分别移动100个像素。  
      5.     setTimeout(function(){  
      6.         ow.document.writeln("我向下和向右分别移动100个像素<br />");  
      7.         ow.moveBy(100, 100)  
      8.     }, 1000);  
      9.     //2秒钟后，把它左上角移到坐标(100, 100)处。  
      10.     setTimeout(function(){  
      11.         ow.document.writeln("我左上角的坐标是(100, 100)<br />");  
      12.         ow.moveTo(100, 100)  
      13.     }, 2000);     
      14.     //3秒钟后，把它的宽度减少100，高度增加100。  
      15.     setTimeout(function(){        
      16.         ow.document.writeln("我的宽度减少了100，高度增加了100。<br />");  
      17.         ow.resizeBy(-100, 100)  
      18.     }, 3000);     
      19.     //4秒钟后，把它的宽度和高度设置成300。  
      20.     setTimeout(function(){        
      21.         ow.document.writeln("我的宽度和高度和宽度是300。<br />");  
      22.         ow.resizeTo(300, 300)  
      23.     }, 4000);  
      24.     //5秒钟后，关闭弹出窗口。  
      25.     setTimeout(function(){        
      26.         ow.document.writeln("我要被关闭了。<br />");  
      27.         ow.document.close();  
      28.         ow.close();  
      29.     }, 5000);     
      30. }  
       
      在这个例子中，我们用到了一个还没学习的方法document.writeln，这个方法在后面会有介绍，它的主要功能是将一个或多个指定的字符串插入当前正在解析的文档中或插入由open()方法打开的文档流中。

       

      说到这里，我们不得不提一下浏览器中的对话框，它有三种，就是提示框，确认框，和输入框。使用alert()，confirm()，prompt()函数可以显示它们，由于它们比较简单，而篇幅有限，我们就用一个例子来介绍他们。

      [javascript] view plaincopy
       
      1. function showAlert(){  
      2.     alert('欢迎你光临我的博客！');  
      3. }  
      4. function showConfirm(){  
      5.     if(confirm("请确认你的操作")){  
      6.         alert('你确认了你的操作。');  
      7.     }else{  
      8.         alert('你取消了你的操作。');  
      9.     }  
      10. }  
      11. function showPrompt(){  
      12.     var str = prompt("请你输入Something！");  
      13.     alert("你输入的内容是:" + str);  
      14. }  

       

       

       

    2. Event 对象

      事件模型使得浏览器能响应用户的动作，现在的浏览器都实现了强壮的事件模型，使脚本可以更加智能地处理事件。遗憾的是，不同浏览器的下事件模型是不一致的，对于不同模型下的事件对象拥有的属性和方法也是不一致的，下面列出了不同模型下事件的属性和方法。

      IE事件模型

      altKey, ctrlKey, shiftKey 一个布尔值,指定事件发生时,Alt, Ctrl, Shift键是否被按下并保持住了。
      keyCode 对于键盘事件,该属性声明了被敲击的键生成的Unicode字符码。
      reason 对于datasetcomplete事件,reason存放数据传输事件的状态码,0(成功)、1(失败)、2(错误)。
      type 一个字符串,说明了事件的类型。
      returnValue 如果设置了该属性,它的值比事件处理程序真正的返回值优先级高。
      cancelBubble 如果事件处理程序想阻止事件传播到包容对象,必须把该属性设置成true。
      fromElement 对于mouseover和mouseout事件,该属性引用移出鼠标的元素。
      toElement 对于mouseover和mouseout事件,该属性引用移入鼠标的元素。
      srcElement 对生成事件的Window对象、Document对象或HTMLDocument对象的引用。
      srcFilter 对于filterchange事件,该属性声明改变的过滤器。
      clientX, clientY 声明了事件发生的位置相对于浏览器页面的X坐标和Y坐标。
      offsetX, offsetY 发生事件的地点在事件源元素的坐标系统中的X坐标和Y坐标。
      x, y 事件发生的位置的x坐标和y坐标(IE中它们声明了相对于用CSS动态定位的最内层包容元素的X坐标和Y坐标)。
      screenX, screenY 事件发生的地点相对于屏幕的X坐标和Y坐标。
      button 对于鼠标事件,button事件声明了被按下的鼠标按钮或按钮。

       

      Firefox, NS事件模型

      type 一个字符串,说明了事件的类型。
      width 只能由resize的事件设置,声明了调整过窗口的新高度或框架的新宽度。
      height 只能由resize的事件设置,声明了调整过窗口的新高度或框架的新高度。
      which "对于键盘事件和鼠标事件来说,which声明的是按下或放开的键或鼠标按钮。
      target 对生成事件的Window对象、Document对象、Layer对象或HTMLDocument对象的引用。
      modifiers 声明了事件发生时按下并保持住的组合键,NS6 未定义该属性。
      layerX, layerY 事件相对于包容图层的X坐标和Y坐标。
      pageX, pageY 事件发生的位置相对于浏览器页面的X坐标和Y坐标。
      x, y 事件发生的位置的x坐标和y坐标(在NS4中其等价于layerX和layerY)。
      screenX, screenY 事件发生的地点相对于屏幕的X坐标和Y坐标。

       

      浏览器之间的斗争可害苦了我们这些开发者，为了兼容不同的浏览器，我们必须加入额外的判断语句。我们来看几个例子。 
      例子1：得到事件源元素，并得到事件发生的坐标。

      [javascript] view plaincopy
       
      1. function findEventSource(e){  
      2.     var evt = e.srcElement || e.target;  
      3.     var x = e.pageX || e.x;   
      4.     var y = e.pageY || e.y;  
      5.     alert("事件源: "+ evt.innerText + "/n坐标：(" + x + ", " + y + ")");  
      6. }  

       

      我们还可以动态的为元素绑定特定事件处理程序。不过不同的浏览器支持的函数又是不一致的。IE下支持attachEvent()方法，而Firefox下支持addEventListener()方法。
      attachEvent("eventType",fun)
      eventType是指事件类型,fun是指调用事件的函数
      addEventListener("eventType",fun,flag)
      addEventListener方法的前两个参数和attachEvent方法一样， flag参数则是一个boolean 值，指明该结点是否以DOM中所谓的捕捉模式来侦听事件。对于一个典型的事件侦听器来说，第三个参数应该为false（假）。 

      不仅可以为元素添加指定事件的处理程序，而且还可以为指定事件删除指定的处理程序。IE下可以使用detachEvent()方法，而Firefox下可以使用removeEventListener()方法。

      例子2：为元素绑定事件处理程序
      [javascript] view plaincopy
       
      1. var eventTestFunction = function(){  
      2.     alert("事件已经触发，测试成功。");  
      3. }     
      4. //为button MyEventTestButton 绑定事件处理程序。  
      5. function attachEventForTestButton(){      
      6.     //getElementById 方法可以拿到指定ID 的元素，将在DOM模型中介绍。  
      7.     var btn = document.getElementById('MyEventTestButton');  
      8.     if(btn.addEventListener){  
      9.         btn.addEventListener('click', eventTestFunction, false);  
      10.     }else{  
      11.         btn.attachEvent('onclick', eventTestFunction);  
      12.     }  
      13.     alert("事件绑定成功。");     
      14. }  
      15.   
      16. //为button MyEventTestButton 删除事件处理程序。  
      17. function detachEventForTestButton(){          
      18.     //getElementById 方法可以拿到指定ID 的元素，将在DOM模型中介绍。  
      19.     var btn = document.getElementById('MyEventTestButton');  
      20.     if(btn.removeEventListener){  
      21.         btn.removeEventListener('click', eventTestFunction, false);  
      22.     }else{  
      23.         btn.detachEvent('onclick', eventTestFunction);  
      24.     }  
      25.     alert("事件绑定取消。");     
      26. }  

       

    3. XMLHTTPRequest组件

      XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础。尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用；但是，我们仍然很有必要理解这个对象的详细工作机制。下表列出了它的所有属性和方法。

      abort() 停止当前请求。
      getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对返回。
      getResponseHeader() 格式：getResponseHeader(header),返回指定名称的HTTP响应头。
      open() 格式：open(method, url, async)。method指示HTTP请求方式，参数可以是GET,POST或PUT, url指示请求资源的地址，参数可以是相对于URL或绝对值URL，async参数是否建立异步连接，默认为true, 建立对服务器的调用。
      send() 格式：send(content)，向服务器发送请求。
      setRequestHeader() 格式：setRequestHeader(header, value)，把指定首部设置为所提供的值，在设置任何首部之前必须先调用open()。
      onreadystatechange 用于指定状态改变时的事件处理函数，每个状态都会触发这个事件处理器。
      readyState 请求的状态。有5个可取值：0=未初始化、1=正在加载、2=已加载、3=交互中、4=完成。
      responseText 服务器的响应,表示一个串。
      responseXML 服务器的响应,表示为XML.这个对象可以解析为一个DOM对象。
      status 服务器响应的HTTP状态码。
      statusText HTTP状态码的相应文本。

       

      为了使大家更好的理解它的原理和使用方法，我们跟着例子来学习。
      例1：创建XMLHTTPRequest对象。

      [javascript] view plaincopy
       
      1. // 为了兼容不同的浏览器，以下给出了创建XMLHttpRequest对象的方法。  
      2. function createXhrObject(){  
      3.     var _msxml_progid = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'], http;  
      4.     try{  
      5.         http = new XMLHttpRequest();  
      6.     }catch(e){  
      7.         for(var i=0; i<this._msxml_progid.length; ++i){  
      8.             try {                     
      9.                 http = new ActiveXObject(this._msxml_progid[i]);  
      10.                 break;  
      11.             } catch(ignore){}  
      12.         }  
      13.           
      14.     }  
      15.     return http;          
      16. }  
      例2：从指定的网站上获取信息。
      [javascript] view plaincopy
       
      1. function getGoogleInfo(){     
      2.     var xmlHttp = createXhrObject();      
      3.     var url = "/zhiqiangzhan/archive/2009/10/13/4663506.aspx";  
      4.     xmlHttp.open('HEAD', url, true);  
      5.     xmlHttp.onreadystatechange = function(){  
      6.         switch(xmlHttp.readyState){  
      7.             case 0:  
      8.                 alert('未初始化！');  
      9.                 break;  
      10.             case 1:  
      11.                 alert('正在加载！');  
      12.                 break;  
      13.             case 2:  
      14.                 alert('已加载！');  
      15.                 break;  
      16.             case 3:  
      17.                 alert('交互中！');  
      18.                 break;  
      19.             default:  
      20.                 var headers = xmlHttp.getAllResponseHeaders();  
      21.                 var str = headers;  
      22.                   
      23.                 if(xmlHttp.status == 200){  
      24.                     str += "Response:/n" + xmlHttp.responseText;  
      25.                 }else{  
      26.                     str += xmlHttp.status + " " + xmlHttp.statusText;  
      27.                 }  
      28.                 alert(str);  
      29.                 alert('已完成！');  
      30.                 break;                
      31.         }         
      32.     };  
      33.     xmlHttp.send(null);  
      34. }  

       

    4. Document对象

      Document对象也是最常用的对象之一，下表列出了它的常用属性和方法，不过此处列出的方法和属性都不是太常用，下篇我们将介绍DOM（文档对象模型），到时我们还将介绍document作为文档对象的另外的属性和方法，那些方法和属性可比现在的这些实用的多。

      alinkColor 一个字符串属性,指定了document中被激活的链接的颜色。
      anchors 一个Anchor对象数组,每个元素代表了文档中的一个锚。
      applets 一个Applet对象数组。
      bgColor 一个字符串,它是与文档关联在一起的cookie的值。
      domain 一个字符串,它指定了文档所属的Internet域。
      embeds 一个对象数组,每个元素表示一个由<embed>标记嵌入文档的数据。
      fgColor 一个字符串属性,指定document文本的默认颜色。
      forms 一个数组,元素是Form对象,每个元素代表出现在document中的一个表单。
      images 一个数组,元素是Image对象,每个元素代表用<img>嵌入文档的一个图像。
      lastModified 一个只读字符串,声明了最后一次修改文档的日期。
      linkColor 一个字符串属性,指定了文档中未被访问过的链接的颜色。
      links 一个数组,元素是Link对象,每个元素代表了文档中出现过的一个超文本链接。
      location 一个Location对象,含有当前文档的完整URL,是Window.location的同义词，不建议使用。
      plugins 数组embeds[]的同义词,不推荐使用。
      referrer 一个只读字符串,含有链接到当前文档的文档的URL(如果存在)。
      title 一个只读字符串,指定了当前文档的标题。
      URL 一个只读字符串,声明了文档的URL。
      vlinkColor 一个字符串属性,指定了document中已经访问过的链接的颜色。
      activeElement 一个只读属性,引用文档中当前活动的输入元素(即具有输入焦点的元素)，仅IE支持。
      all 一个数组,元素是文档中包含的所有元素，仅IE支持。
      charset 文档采用的字符集，仅IE支持。
      children 一个数组,元素是文档的所有直接子元素,以他们在源代码中的顺序存放，仅IE支持。
      defaultCharset 文档采用的默认字符集，仅IE支持。
      expando 如果将expando设置成false,可以阻止客户端对象的扩展，仅IE支持。
      parentWindow 包含文档的窗口，仅IE支持。
      readyState 文档装载的状态，仅IE支持。它有4个可用的值:
      1. uninitialized(还没有开始装载文档)
      2. loading(正在装载文档)
      3. interactive(装载的文档已经足够与用户进行交互)
      4. Complete(文档已经装载完毕)
      clear() 擦去文档的内容,反对使用。
      close() 关闭由open方法打开的文档流。
      open() 打开一个可供写入文档内容的流。
      write() 将一个或多个指定的字符串插入当前正在解析的文档中或插入由open()方法打开的文档流中。
      writeln() 与write()方法相似,只是在输入的字符串中插入一个换行符。
      captureEvents() 请求指定类型的事件，Firefox支持。
      getSelection() 返回当前选中的文档文本。
      releaseEvents() 停止捕捉指定类型的事件。
      routeEvent() 根据捕捉到的事件找到下一个与之相关的元素。
      elementFromPoint() 返回位于指定地点(X坐标,Y坐标)的元素，仅是IE。

       

      上面我们已经演示了writeln()方法，用于往文档中写入字符串，write()方法也类似，下面我们跟着例子来学习document的部分属性和方法

      [javascript] view plaincopy
       
      1. function showDemo(){  
      2.     // 打开一个新的空白窗口。  
      3.     var ow = window.open("", "_blank", "height=300, width=500, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300");  
      4.     // 设置标题  
      5.     setTimeout(function(){        
      6.         ow.document.write("设置页面的标题，同Blog页面标题一致。<br />");  
      7.         ow.document.title = document.title;       
      8.     }, 1000);  
      9.     // 设置字体颜色。  
      10.     setTimeout(function(){        
      11.         ow.document.write("设置文档字体颜色，红色。<br />");  
      12.         ow.document.fgColor = '#ff0000';          
      13.     }, 2000);     
      14.     // 设置背景颜色。  
      15.     setTimeout(function(){        
      16.         ow.document.write("设置文档背景颜色，黑色。<br />");  
      17.         ow.document.bgColor = '#000000';          
      18.     }, 3000);     
      19.     // 关闭文档输入。  
      20.     setTimeout(function(){        
      21.         ow.document.write("关闭文档输入。<br />");  
      22.         ow.document.close();          
      23.     }, 4000);  
      24.     // 文档关闭后，再次写入数据，原来的数据将被清空。  
      25.     setTimeout(function(){        
      26.         ow.document.write("文档关闭后，再次写入数据，原来的数据将被清空。。<br />");  
      27.         ow.document.close();          
      28.     }, 6000);  
      29. }  

       

    5. Screen 对象

      Screen 对象提供有关显示器的信息。常用来判别用户显示器的分别率，对象的所有属性都是只读的。

      availHeight, availWidth 声明了显示web浏览器的屏幕的可用高度和宽度,以象素计。
      availLeft, availTop 声明了屏幕最左侧的X坐标和Y坐标,这个坐标不是分配给暂存特性的空间的坐标。
      colorDepth 声明了浏览器分配的颜色数的以2为底的对数,可用于显示图像。
      pixelDepth 声明显示浏览器屏幕的颜色深度,以每象素的位数计。
      height, width 声明了显示web浏览器的屏幕的高度和宽度,以象素计。

       

      以下代码演示了如何显示用户的分辨率

      [javascript] view plaincopy
       
      1. //显示用户的分辨率  
      2. function showResolution(){  
      3.     alert("您当前电脑的分辨率是: " + screen.width + "×" + screen.height);  
      4. }  

       

       

    6. Navigator对象

      使用Navigator对象可以查看用户正在使用的浏览器的信息。

      appCodeName 一个只读字符串,声明了浏览器的代码名。
      appName 一个只读字符串,声明了浏览器的名字。
      appVersion 一个只读字符串,声明了浏览器的平台和版本信息。
      CookieEnabled 一个只读布尔值，指示是否支持Cookie。
      language 一个只读字符串,声明了浏览器版本使用的默认语言，Firefox，NS支持。
      mimeTypes 一个MimeType对象的数组,其中每个元素代表浏览器支持的一种MIME类型。
      platform 一个只读字符串,声明了运行浏览器的操作系统和(或)硬件平台。
      systemLanguage 一个只读字符串,声明了浏览器版本使用的默认语言，IE支持。
      userAgent 一个只读字符串,声明了浏览器用于HTTP请求的用户代理头的值。
      userLanguage 一个只读字符串,声明了用户想使用的语言，IE支持。
      plugins 一个Plugin对象的数组,其中每个元素代表浏览器已经安装的插件。

      [javascript] view plaincopy
       
      1. function showNavigatorInfo(){  
      2.     var result = '';  
      3.     for(var p in navigator){  
      4.         result += p + ': ' +  navigator[p] + '/n';  
      5.     }  
      6.     alert(result);  
      7. }  


      下面的代码常用来判别浏览器的类型，既可以显示浏览器的型号，还可以显示浏览器的版本。 
      [javascript] view plaincopy
       
      1. var navigatorDetector = function() {  
      2.     var o = {  
      3.         ie:0,  
      4.         opera:0,  
      5.         gecko:0,  
      6.         webkit: 0,  
      7.         mobile: null,  
      8.         air: 0,  
      9.         caja: 0  
      10.     }, ua = navigator.userAgent, m;  
      11.       
      12.     if ((/KHTML/).test(ua)) {  
      13.         o.webkit=1;  
      14.     }  
      15.     m=ua.match(/AppleWebKit//([^/s]*)/);  
      16.     if (m&&m[1]) {  
      17.         o.webkit=parseFloat(m[1]);  
      18.         if (/ Mobile///.test(ua)) {  
      19.             o.mobile = "Apple";   
      20.         } else {  
      21.             m=ua.match(/NokiaN[^//]*/);  
      22.             if (m) {  
      23.                 o.mobile = m[0];   
      24.             }  
      25.         }  
      26.         m=ua.match(/AdobeAIR//([^/s]*)/);  
      27.         if (m) {  
      28.             o.air = m[0];   
      29.         }  
      30.     }  
      31.     if (!o.webkit) {   
      32.         m=ua.match(/Opera[/s//]([^/s]*)/);  
      33.         if (m&&m[1]) {  
      34.             o.opera=parseFloat(m[1]);  
      35.             m=ua.match(/Opera Mini[^;]*/);  
      36.             if (m) {  
      37.                 o.mobile = m[0];   
      38.             }  
      39.         } else { // not opera or webkit  
      40.             m=ua.match(/MSIE/s([^;]*)/);  
      41.             if (m&&m[1]) {  
      42.                 o.ie=parseFloat(m[1]);  
      43.             } else {   
      44.                 m=ua.match(/Gecko//([^/s]*)/);  
      45.                 if (m) {  
      46.                     o.gecko=1;   
      47.                     m=ua.match(/rv:([^/s/)]*)/);  
      48.                     if (m&&m[1]) {  
      49.                         o.gecko=parseFloat(m[1]);  
      50.                     }  
      51.                 }  
      52.             }  
      53.         }  
      54.     }  
      55.     m=ua.match(/Caja//([^/s]*)/);  
      56.     if (m&&m[1]) {  
      57.         o.caja=parseFloat(m[1]);  
      58.     }      
      59.     return o;  
      60. }();  
      61.   
      62. function getNavigatorInfo(){  
      63.     var str = '';  
      64.     for(var p in navigatorDetector){  
      65.         str +=  p + ': ' + navigatorDetector[p] + '/n';  
      66.     }  
      67.     alert(str);  
      68. }  

       

    7. Location 对象

      Location提供了关于当前打开窗口或者特定框架的url信息。

      hash 一个可读可写的字符串,指定了当前URL中的锚部分,包括前导散列符(#)。
      host 一个可读可写的字符串,指定了当前URL中的主机名和端口部分。
      hostname 一个可读可写的字符串,指定了当前URL中的主机名部分。
      href 一个可读可写的字符串,它声明了当前显示文档的完整URL。
      pathname 一个可读可写的字符串,声明了当前URL中的路径部分。
      port 一个可读可写的字符串,声明了当前URL中的端口部分。
      protocol 一个可读可写的字符串,声明了当前URL中的协议部分。
      search 一个可读可写的字符串,声明了当前URL中的查询部分。
      reload() 从缓存或服务器中再次把当前文档装载进来。
      replace() 用一个新文档替换当前文档,而不用在浏览器的会话历史中生成一个新的记录。
      显示Location信息
      [javascript] view plaincopy
       
      1. function showLocationInfo(){  
      2.     var str = "";  
      3.     for(var p in location){  
      4.         str += p + ': ' + location[p] + '/n';  
      5.     }  
      6.     alert(str);  
      7. }  

       

    8. HTML标记通用属性

      对于每个HTML标记，他们一般具有如下属性和方法

      all 该元素包含的所有元素的完整列表,以他们出现的顺序存放,该属性的行为与Document.all[]属性的行为一致,仅IE支持。
      children 一个数组,元素是文档的所有直接子元素,以他们在源代码中的顺序存放，IE支持。
      className 一个可读可写的字符串,声明了元素的class性质的值。
      document 包含该元素的document对象的引用，仅IE支持。
      id 一个可读可写的字符串,声明了id性质的值。
      innerHTML 一个可读可写的字符串,声明了元素含有的HTML文本,不包括元素自身的开始标记和结束标记。
      innerText 一个可读可写的字符串,声明了元素含有的纯文本,不包括元素自身的开始标记和结束标记。
      lang 一个可读可写的字符串,声名了element元素的lang的值。
      offsetHeight 元素和它的内容的高度,仅IE支持。
      offsetLeft 元素element的X坐标,相对于offsetParent指定的包容元素，IE支持。
      offsetParent 定义了声名坐标系统的包容元素，IE支持。
      offsetTop 元素element的Y坐标,相对于offsetParent指定的包容元素，仅IE支持。
      offsetWidth 元素和它的内容的宽度，仅IE支持。
      outerHTML 一个可读可写的字符串,声明了一个元素的HTML文本,其中包括元素自身的开始标记和结束标记, IE支持。
      outerText 一个可读可写的字符串,声明了一个元素的纯文本,其中包括元素自身的开始标记和结束标记, IE支持。
      parentElement 当前元素的直接父元素,该属性是只读的。
      sourceIndex 元素在包容它的Docuement.all[]数组中的下标, IE支持。
      style 元素的内联CSS样式性质。
      tagName 一个只读字符串,声明定义element的HTML标记的名字。
      title 一个可读可写的字符串,声明了定义element的HTML标记的title性质值。
      contains() 判断当前元素是否含有指定的元素。
      getAttribute() 获取一个命名性质的值。
      handleEvent() 把Event对象传递给适当的事件处理程序。
      insertAdjacentHTML() 把HTML文本插入到与当前元素邻接的文档中。
      insertAdjacentText() 把纯文本插入到与当前元素邻接的文档中。
      removeAttribute() 从元素中删除一个属性和它的值。
      scrollIntoView() 滚动文档,使该元素出现在窗口的顶部或底部。
      setAttribute() 设置元素的性质值。
      onclick 当用户点击该元素时调用。
      ondbclick 当用户双击该元素时调用。
      onhelp 当用户请求帮助(F1)时调用,仅在IE中有效)。
      onkeydown 当用户按下一个键时调用。
      onkeypress 当用户按下一个键或放开一个键时调用。
      onkeyup 当用户放开一个键时调用。
      onmousedown 当用户按下一个鼠标按钮时调用。
      onmousemove 当用户移动鼠标时调用。
      onmouseout 当用户把鼠标移开当前元素时调用。
      onmouseover 当用户把鼠标移过一个元素时调用。
      onmouseup 当用户放开一个鼠标按钮时调用。

       

       

    9. Form 对象

       

      action 表单的处理页面。
      elements 一个数组,元素是表单中的输入元素。
      encoding 可读可写的字符串,提交表单时传输数据的编码形式。
      length 表单中的元素个数,等价于elements.length。
      mothod 一个可读可写的字符串,它指定了提交表单数据所采用的方法。
      name 声名表单的名字,该属性可读可写。
      target 一个可读可写的字符串,指定了要显示提交表单的结果的窗口或框架的名字。
      reset() 把表单的所有元素重置为它们的默认值。
      submit() 提交表单。

       

    10. Input 对象

       

      checked 一个可读可写的布尔值,声明了Checkbox元素和Radio元素当前是否被选中。
      defaultChecked 一个只读的布尔值,声明了Checkbox或Radio的初始状态。
      defaultValue 声明了在该表单元素中出现的初始文本,在重置表单时可以使用这个值来恢复元素。
      form 一个只读属性,引用含有该元素的Form对象。
      length 对于Select表单元素,这个属性声明的是options[]数组中存放的选项数。
      name 一个只读的字符串,声明了该元素的名字。
      options 对于Select表单元素来说,这个数组存放的是Option对象。
      selectedIndex 对于Select来说,这个整数声明了当前选中的Select对象的选项。
      type 一个只读字符串,声明了表单元素的类型。
      value 一个字符串属性,声明了在提交表单时提交给服务器的值。
      blur() 一个字符串属性,声明了在提交表单时提交给服务器的值。
      click() 在表单元素上模拟鼠标点击。
      focus() 将键盘焦点赋予该元素。
      select() 对于显示可编辑文本的表单元素来说,选中其中出现的所有文本。
      onblur 将键盘焦点从元素中移开。
      onchange 对于非按钮表单元素来说,当用户输入了一个新值或选择了一个新值时调用。
      onclick 对于那些按钮表单元素来说,当用点击或选择了该按钮时调用。
      onfocus 当用户把键盘焦点给予该元素时调用。

       

       

    11. Option 对象

       

      defaultSelected 一个布尔值,声明在创建包含该属性的Select对象时,该选项是否被选中。
      index 一个只读整数,声明了选项在包含它的Select对象的options[]数组中的位置和下标。
      selected 一个可读可写的布尔值,声明了一个选项当前是否被选中了。
      text 一个字符串,声明了显示给用户的选项文本。
      value 一个可读可写的字符串,声明了如果在提交表单时option处于选中的状态,要传递给服务器的文本。

       

    12. Image 对象

       

      border 一个整数,声明了图像边线的宽度。
      complete 一个只读的布尔值,声明图像是否已经完全装载进来了。
      height 一个整数,声明了图像的高度,以象素计。
      length 表单中的元素个数,等价于elements.length。
      hspace 一个整数,声明了插入到图像左右的水平距离。
      lowsrc 声明了替代图像(一般较小)的URL,当用户的浏览器在低分辨率的显示器上运行时就显示该图像。
      name 声明图片的名称。
      src 声明图片的URL地址。
      vspace 一个整数,声明了插入到图像上下的垂直距离。
      width 一个整数,声明了图像的宽度,以象素计。
      onabort 如果用户放弃装载图像,则调用该事件处理程序。
      onerror 如果在装载图像过程中发生了错误,则调用该事件处理程序。
      onload 在成功的装载了图像时调用该事件处理程序。

       

    13. Link 对象

       

      hash 一个可读可写的字符串,指定了Link对象的锚部分,包括前导散列符(#)。
      host 一个可读可写的字符串,指定了Link的URL的主机名和端口部分。
      hostname 一个可读可写的字符串,指定了Link的URL的主机名部分。
      href 一个可读可写的字符串,指定了Link的完整URL。
      pathname 一个可读可写的字符串,声明了Link的URL的路径部分。
      port 一个可读可写的字符串,声明了Link的URL的端口部分。
      protocol 一个可读可写的字符串,声明了Link的URL的协议部分。
      search 一个可读可写的字符串,声明了Link的URL的查询部分。
      target 一个可读可写的字符串,指定了显示链接文档的Window对象的名称。
      text 声明了出现在链接的标记<a>和</a>之间的文本，仅NS支持。

      借助Link的属性，我们可以用来分析url的内容。
      [javascript] view plaincopy
       
      1. function analyzeURLInfo(){    
      2.     var url = "http://www.google.com:8080/?name=jame&id=13#250";  
      3.     var el = document.createElement('a');  
      4.     el.href = url;  
      5.     var str = "hash: " + el.hash + '/n';      
      6.     str += "host: " + el.host + '/n';  
      7.     str += "pathname: " + el.pathname + '/n';  
      8.     str += "protocol: " + el.protocol + '/n';  
      9.     str += "search: " + el.search + '/n';  
      10.     str += "target: " + el.target + '/n';     
      11.     alert(str);  
      12. }  

       

    14. Anchor对象

       

      name Anchor对象的名字,该属性的值由<a>的name性质设置。
      text 该属性声明了锚标记<a>和</a>之间的纯文本(如果存在)。

       

posted @ 2013-05-31 13:42  赵雪丹  阅读(209)  评论(0)  编辑  收藏  举报