ajax 学习总结

 

AJAX技术总结

什么是ajaxa技术？

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它有机地包含了以下几种技术：

基于web标准（standards-based presentation）XHTML+CSS的表示；

使用 DOM（Document Object Model）进行动态显示及交互；

使用 XML 和 XSLT 进行数据交换及相关操作；

使用 XMLHttpRequest 进行异步数据查询、检索；

使用 JavaScript 将所有的东西绑定在一起。

类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生/合成”式（derivative/composite）的技术正在出现，如“AFLAX”。

AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。

 

基于Ajax的应用程序架构

浏览器端框架被划分成两大类：

•应用程序框架：提供浏览器的功能，但是常以包括窗口小部件抽象和另外的部件而出名，其功能主要围绕桌面GUI框架。

•基本结构框架：提供基本的管道和可移植的浏览器抽象，让开发者去创建内容。

 

Ajax的应用范围

Ajax适用场景

1.表单驱动的交互

传统的表单提交，在文本框输入内容后，点击按钮，后台处理完毕后，页面刷新，再回头检查是否刷新结果正确。使用Ajax，在点击sunmit按钮后，立刻进行异步处理，并在页面上快速显示了更新后的结果，这里没有整个页面刷新的问题。

2.深层次的树的导航

深层次的级联菜单（树）的遍历是一项非常复杂的任务，使用JavaScript来控制显示逻辑，使用Ajax延迟加载更深层次的数据可以有效的减轻服务器的负担。

3.快速的用户与用户间的交流响应

在众多人参与的交流讨论的场景下，最不爽的事情就是让用户一遍又一遍刷新页面以便知道是否有新的讨论出现。新的回复应该以最快的速度显示出来，而把用户从分神的刷新中解脱出来，Ajax是最好的选择。

4.类似投票、yes/no等无关痛痒的场景

对于类似这样的场景中，如果提交过程需要达到40秒，很多的用户就会直接忽略过去而不会参与，但是Ajax可以把时间控制在1秒之内，从而更多的用户会加入进来。

5.对数据进行过滤和操纵相关数据的场景

对数据使用过滤器，按照时间排序，或者按照时间和名称排序，开关过滤器等等。任何要求具备很高交互性数据操纵的场合都应该用JavaScript，而不是用一系列的服务器请求来完成。在每次数据更新后，再对其进行查找和处理需要耗费较多的时间，而Ajax可以加速这个过程。

6.普通的文本输入提示和自动完成的场景

在文本框等输入表单中给予输入提示，或者自动完成，可以有效的改善用户体验，尤其是那些自动完成的数据可能来自于服务器端的场合，Ajax是很好的选择。

 

Ajax不适用场景

1.部分简单的表单

虽然表单提交可以从Ajax获取最大的益处，但一个简单的评论表单极少能从Ajax得到什么明显的改善。而一些较少用到的表单提交，Ajax则帮不上什么忙。

2.搜索

有些使用了Ajax的搜索引擎如Start.com和Live.com不允许使用浏览器的后退按钮来查看前一次搜索的结果，这对已经养成搜索习惯的用户来说是不可原谅的。

3.基本的导航

使用Ajax来做站点内的导航是一个坏主意，为什么不把时间放在让系统程序作的更好上呢？

4.替换大量的文本

使用Ajax可以实现页面的局部刷新，但是如果页面的每个部分都改变了，为什么不重新做一次服务器请求呢？

5.对呈现的操纵

Ajax看起来像是一个纯粹的UI技术，但事实上它不是。它实际上是一个数据同步、操纵和传输的技术。对于可维护的干净的web应用，不使用Ajax来控制页面呈现是一个不错的主意。JavaScript可以很简单的处理XHMTL/HTML/DOM，使用CSS规则就可以很好的表达数据显示。

 

 

参考文章：http://www.javaeye.com/topic/38793

 

 

xml概论

什么是XML?

l         XML是EXtensible Markup Language的缩写

l         XML是一种类似于HTML的标记语言

l         XML是用来描述数据的 (用来存放数据的)

l         XML的标记不是在XML中预定义的，你必须定义自己的标记

l         XML使用文档类型定义（DTD）或者模式（Schema）来描述数据

l         XML使用DTD或者Schema后就是自描述的语言

 

XML语法

l         所有的XML文档必须有一个结束标记。所有元素必须正确的嵌套包含。

l         所有的XML文档必须有一个根元素，XML文档中的第一个元素就是根元素。

l         元素的属性值必须使用引号""。

l         XML标记都是大小写敏感的，这与html不同。

l         使用XML,空白将被保留。

l         使用 XML, 新行总是被标识为 LF（Line Feed，换行）。这与unix中换行一致。

l         在XML中注释的语法基本上和HTML中的一样。<!-- 这是一个注释 -->

 

XML元素指的是从该元素的开始标记到结束标记之间的这部分内容。xml可以创建自己的元素。所有元素嵌套在根元素中。

XML元素有元素内容，混合内容，简单内容或者空内容。每个元素都可以拥有自己的属性。数据可以存储在元素中，也可以存储在元素的属性中。Eg:

<person sex="female">                <!—数据female保存在属性中-->

<firstname>Anna</firstname>  <!—数据Anna保存在元素中-->

 

XML的敏感字符

下面是五个在XML文档中预定义好的实体:

&lt;

< 

小于号

&gt;

> 

大于号

&amp;

&

和

&apos;

'

单引号

&quot;

"

双引号

实体必须以符号"&"开头，以符号";"结尾。

注意: 只有"<" 字符和"&"字符对于XML来说是严格禁止使用的。剩下的都是合法的，为了减少出错，使用实体是一个好习惯。

xpath

Functions Reference

·         Accessor

·         Error and Trace

·         Numeric

·         String

·         AnyURI

·         Boolean

·         Duration/Date/Time

·         QName

The default prefix for the function namespace is fn:, and the URI is:
http://www.w3.org/2005/02/xpath-functions.

 

 

xml内容显示

CSS（叠层样式表）和XSL（可扩展样式语言）都可以定义XML文件的显示.

如果一个XML文件仅仅用于交换信息，就无需考虑它的显示问题。编辑XML文件，我们仅仅需要关注文件的内容、信息的结构，至于它怎么显示，则交给CSS（叠层样式表）和XSL（可扩展样式语言）来完成。此外使用数据岛技术与javascript也能定制xml的内容显示，这就使得用户可以根据需要来定义数据的表现形式。

 

1）用css来显示xml

具体的语法如下：〈?xml-stylesheet href="URL"type="text/css"?〉其中，xml-stylesheet是关键字，表明引用样式表设定；href="URL"用来指定样式表所在的位置.

使用步骤：

a)       建立样式表档案.(*.css)

b)      将css连接到xml文件。（使用上面的语法）

示例：http://www.leftworld.net/online/xml/xml_cn/xml_display.asp.htm

2）用xsl来表示xml

XSL是怎样工作的呢？XML文件在展开后是一种树状结构，称为“原始树”，XSL处理器（现在只有IE5支持XSL，在IE5中的处理器叫：XSLStylesheetProcessor）从这个树状结构读取信息，根据XSL样式的指示对这个“原始树”进行排序、复制、过滤、删除、选择、运算等操作后产生另外一个“结果树”，然后在“结果树”中加入一些新的显示控制信息，如表格、其他文字、图形以及一些有关显示格式的信息。XSL处理器根据XSL样式表的指示读取XML文件中的信息，然后再重新组合后转换产生一个Well-Formed的HTML文件。

XSL由三部分组成: XML文档转换（XML Document Transformation ，又叫XSLT）,模式匹配语法（ a pattern matching syntax ，又叫XPath), 格式话对象（ a formatting object interpretation，XSL FO）。

 

具体的语法如下：〈?xml-stylesheet href="URL"type="text/xsl"?〉其中，xml-stylesheet是关键字，表明引用样式表设定；href="URL"用来指定样式表所在的位置.

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> xmlns:xsl="http://www.w3.org/TR/WD-xsl"这一句主要用来说明该XSL样式表是使用W3C所制定的XSL，设定值就是XSL规范所在的URL地址。

1.       xsl:stylesheet：作为XSL样式表中的根元素，在每个XSL文件中都必须有。

2.       xsl:template：指定XML文件中的特定标记来定义排版样式。

属性：language：指定使用哪种脚本语言。
match：设定从XML文件中哪个标记开始来读取信息，如果值为“/”那么表示从XML文件的根元素开始读取信息。

3.xsl:value-of：从XML文件中的特定标记中将信息读出来。

属性：select：设定读取哪一个标记中的信息。
例：〈xsl:templateselect="title"〉：表示要从〈title〉标记中将信息读出来。

4.xsl:for-each：将排版样式应用到XML文件中相同的标记（类似于循环语句）。

属性：select：设定从哪一个标记中读取数据。
order-by：在读取信息完成之后，设定依据什么标记来进行排序，值为某一特定标记，如在标记名前用“+”号表示是由大到小的排序，反之用“-”号。

5.xsl:comment：在此元素中的内容，XSL将它作为注释信息，并不显示在浏览器中。

6.xsl:apply-templates：指示XSL处理器在该XSL样式表中寻找合适的〈xsl:template〉中设定的样式来用。

7.xsl:copy：从XML文件中拷贝标记中的信息到输出的文件中。无属性。

8.xsl:if：与一般程序中的If...Then类似。

语法：

<xsl:if expr="script-expression" language="language-name" test="pattern">

属性：

expr ── 脚本语言表达式，计算结果为"真"或"假"；如果结果为"真"，且通过test，则在输出中显示其中内容（可省略此项属性）。

language ── expr属性中表达式的脚本语言类型，其取值与HTML标记SCRIPT的LANGUAGE属性的取值相同，缺省为"JScript"。

test ──源数据测试条件。

9.xsl:choose、xsl:when、xsl:otherwise：这三个元素是用来设定较为复杂的条件式，一般共同配合使用。其中xsl:when有script、language、test三种属性，与前面xsl:if中的属性含义是一样的。

10.xsl:attribute和xsl:element：可以在标记中附加一个属性名称或新建一个标记。XSL样式表不但可以引用HTML标记，而且也可以建立新的标记和属性，然后一起结合XML文件中的信息来显示。其中，xsl:attribute是在标记中新增一个属性，xsl:element是新建一个标记。它们有共同的属性。

示例：

使用步骤：

c)       建立xsl样式档案表

d)      将xsl样式表连接到xml文件。（使用上面的语法）

 

3) xml数据岛技术

       xml所谓的数据岛就是在html网页中嵌入XML的一种技术。

使用步骤：

1 将XML文档载入数据岛

<xml src="cd_catalog.xml" id="xmldso" async="false">

</xml>

使用上面示例代码，可以把cd_catalog.xml文件载入一个叫"xmldso"的数据岛中

 

2 把XML数据绑定到HTML的表格元素中

把XML数据绑定到table元素，需要在table属性添加一个资源属性，并且在span元素中添加字段属性: <span>或<div>元素都可以用来显示XML数据。

<table datasrc="#xmldso" width="100%" border="1">

<td><span datafld="YEAR"></span></td>

<span datasrc="#xmldso" datafld="YEAR"></span>

<div datasrc="#xmldso" datafld="YEAR"></div>

此外，ie5以上的浏览器也支持在html文本中加入xml数据格式，然后本地解析。有2种形式：

a)上面那种数据岛的本地数据形式。

Eg:

<xml id='ShareInfo'>

  <!-xml data --!

</xml>

<table datasrc="#ShareInfo" >

  <!-用span, div元素，元素属性datafld 来获取数据--!>

</table>

 

b)用xsl的遍历来获取数据

Eg:

<XML  id=mxhxsl> 

<?xml  version="1.0"?> 

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> 

<xsl:template  match="/"> 

 

<table>

<tr>

       <th onclick="sort('Type')"  style="cursor:hand" align="center">                                 

       <xsl:element name="input">

              <xsl:attribute name="type">button</xsl:attribute>

              <xsl:attribute name="name">nameBut</xsl:attribute>

              <xsl:attribute name="value">按纽中显示的值</xsl:attribute>

              <xsl:attribute name="title">title</xsl:attribute>

       </xsl:element>                    

       </th>

</tr>

       <xsl:for-each  select="子元素的路径"  order-by="子元素">

       <tr>

          <td ><xsl:value-of  select="子元素"/></td> 

       </tr>

       </xsl:for-each>

</table> 

 

备注：html文本中的html中的对象<input type="TYPE" name="NAME" value="VALUE">

在xsl中要表达成这样

<xsl:element name="input">

<xsl:attribute name="type">TYPE</xsl:attribute name>

<xsl:attribute name="name">NAME</xsl:attribute name>

<xsl:attribute name="value">VALUE</xsl:attribute name>

</xsl:element>

此外：xsl中还可自定义元素及属性。

4) 用javascript来显示xml数据

下面的代码可以将一个XML文档或xml字符串载入解析器:

<script type="text/javascript">

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")

xmlDoc.async="false"

xmlDoc.load("note.xml")　//此处装载为一xml文档，使用load

xmlDoc.loadXML(text)   //var text,此外装载为一xml字符串，使用loadXML 

// ....... processing the document goes here

//nodes=xmlDoc.documentElement.childNodes

//to.innerText=    nodes.item(0).text

</script>

http://www.leftworld.net/online/xml/xml_cn/tryit.asp-filename=note.htm

 

xml排序

1 xsl:sort

所使用的名字空间：xmlns:xsl='http://www.w3.org/1999/XSL/Transform'

Syntax

<xsl:sort

select="expression"

lang="language-code"

data-type="text|number|qname"    //数据类型，可支持按数字排序

order="ascending|descending"       //排序升序，降序

case-order="upper-first|lower-first"/>

 

test1.xml

<?xml version="1.0" encoding="GB2312"?>

<?xml-stylesheet type="text/xsl" href="test1.xsl"?>

<source>

<name>John</name>

<name>Josua</name>

<name>Charles</name>

<name>Alice</name>

<name>Martha</name>

<name>George</name>

</source>

 

test1.xsl

<xsl:stylesheet version = '1.0'

     xmlns:xsl='http://www.w3.org/1999/XSL/Transform'>

 

<xsl:template match="/">

     <TABLE>

         <xsl:for-each select="//name">

          <xsl:sort order="ascending" select="."/>

                 <TR> <TH><xsl:value-of select="."/></TH> </TR>

         </xsl:for-each>

     </TABLE>

</xsl:template>

</xsl:stylesheet>

2 for-each的属性ordey-by

所使用的名字空间：xmlns:xsl='http://www.w3.org/1999/XSL/Transform'

Syntax

<xsl:for-each select="expression"> 

<!-- Content:(xsl:sort*,template) -->

</xsl:for-each>

 

<html><head> 

<script> 

var  sig=true 

function  sort(strKey) 

{ 

var  xml1=mxhxml.XMLDocument 

var  xsl1=mxhxsl.XMLDocument 

var  s1=xsl1.selectSingleNode("//xsl:for-each/@order-by") 

if(s1.value==strKey)  s1.value="-"  +  strKey 

else 

s1.value=strKey 

document.all.mxh.innerHTML=xml1.transformNode(xsl1) 

} 

</script> 

</head> 

<body  onload="sort('Name')"> 

<div  id=mxh></div> 

<XML  id=mxhxsl> 

<?xml  version="1.0"?> 

<xsl:stylesheet  xmlns:xsl="http://www.w3.org/TR/WD-xsl"> 

   <xsl:template  match="/"> 

   点击标题排序： 

       <table  border="2"> 

           <tr> 

               <th  onclick="sort('Name')"  style="cursor:hand">名称</th> 

               <th  onclick="sort('Email')"  style="cursor:hand">电子邮件</th> 

           </tr> 

           <xsl:for-each  select="/Custs/Cust"  order-by="Name"> 

               <tr> 

                   <td><xsl:value-of  select="Name"/></td> 

                   <td><xsl:value-of  select="Email"/></td> 

               </tr> 

           </xsl:for-each> 

       </table> 

   </xsl:template> 

</xsl:stylesheet> 

</XML> 

 

<XML  id=mxhxml> 

<?xml  version="1.0"?> 

<Custs> 

 <Cust> 

       <Name>Nancy</Name>  

       <Email>[e-mail]</Email> 

   </Cust> 

   <Cust> 

       <Name>Peter</Name> 

       <Email>[e-mail]</Email> 

   </Cust> 

   <Cust> 

       <Name>Rachel</Name> 

       <Email>[e-mail]</Email> 

   </Cust> 

   <Cust> 

       <Name>Seth</Name> 

       <Email>[e-mail]</Email> 

   </Cust> 

</Custs> 

</XML> 

 

3 按数字进行排序

1)xsl:sort方式： 只需指定datatype="number"

2)ordey-by方式：只需指定ordey-by=number("结点")

3)另外，还需对脚本进行修改：

<script type="text/javascript">

function taxis(x)  

{ 

    //获取到xml,xsl文档，获取到node: selectSingleNode

    if(x == '指定要排序的数字元素')

       sortField.value='number('+x+')';

    else

       sortField.value=x;

    if (this.rel == '+')

    {

       this.rel = '-';

    }

    else

    {

       sortField.value = '-'+sortField.value;

       this.rel = '+';

    }

    //transformNode

}

</script>

xml server

       在服务器端创建存储xml文档。

XMLHTTPRequest

Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。这样就可以向再发桌面应用程序只同服务器进行数据层面的交换,而不用每次都刷新界面也不用每次将数据处理的工作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度、缩短了用户等候时间。对于大多数情况，XMLHttpRequest对象和，MS的XMLHTTP组件很相似,方法和属性也类似,只是有一小部分属性不支持。

XMLHttpRequest的应用：

XMLHttpRequest对象在JS中的应用
var xmlhttp = new XMLHttpRequest();
微软的XMLHTTP组件在JS中的应用
var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);

 

XMLHttpRequest 对象方法

方法

描述

abort()

停止当前请求

getAllResponseHeaders()

作为字符串返问完整的headers

getResponseHeader("headerLabel")

作为字符串返问单个的header标签

open("method","URL"[,asyncFlag[,"userName"[, "password"]]])

设置未决的请求的目标 URL, 方法, 和其他参数

send(content)

发送请求

setRequestHeader("label", "value")

设置header并和请求一起发送

 

XMLHttpRequest 对象属性

属性

描述

onreadystatechange

状态改变的事件触发器

readyState

对象状态(integer):
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成

responseText

服务器进程返回数据的文本版本

responseXML

服务器进程返回数据的兼容DOM的XML文档对象

status

服务器返回的状态码, 如：404 = "文件末找到" 、200 ="成功"

statusText

服务器返回的状态文本信息

 

javascript编程知识

JavaScript 对象

javaScript 所处理的每一个对象都是属于一个类 (class) ，类里边定义了组成对象的数据、属性、方法（即是类里边的一些函数）等，使用类可以增加程序代码的复用性，这在一种程序语言中是很重要的，因为这样可以避免重复开发！

 

对象的属性(Propertie)：

       在 javaScript 中使用英文句号 (.) 来访问对象的属性值。

 

对象的方法(Method)：

       同样的，对象的方法也是通过英文句号 (.) 来执行的，在方法后边紧跟一对圆括号()，而在圆括号里边包含了使用该方法所需要的参数。

 

javaScript 中的对象：

       javaScript 包含很多预定义对象，一些是可以用来表示不同的数据类型 (如数字和字符串对象)，而另一些是在网页中定义的与 HTML 标记密切相关的对象 (如超链接和图片对象)。

在 javaScript 中可供使用的最基本的数据类型被称为核心(core) 对象，这些对象是：

Array - 数组对象；

Boolean - 布尔对象；

Date - 时间对象；

Number - 数值对象，可以是整数和浮点数；

String - 字符串对象，可以是单引号 (') 或双引号 (") 括起来的任何字符串。

JavaScript supports three primitive data types: numbers, booleans, and strings; and two compound data types: object and arrays.

创建一个对象实例时使用 new 运算符：

var text = new String("This is my text.");

var max = new Number(4.02);

var today = new Date(); // Date() 是 javaScript 的内建对象类

 

几种相同效果的代码：

1) location在网页加载到客户端时已创建，虽然它是window的子对象，但可直接用了

var url = window.location.href;

var url = location.href;

2)得到网页中第4个image

因为document的属性images是个数组，故可用数组下标来访问；另外image4的name是menu,在保证图片名不重名的情况下，可以通过图片名直接访问。

var abc = document.images[3];

var abc = document.menu;

var abc = document.images["menu"];

 

注意：document是最最常用的对象，关于它的属性方法有很多，具体的可在网上找一个手册：文档模式中文手册。(此手册里包含document的大量方法使用说明)

DOM对象

【文档中的对象模块】

当页面已经被下载到客户端时，浏览器就会创建几个用来存储页面信息和页面内容的对象。这些对象构成了一个树状结构 (对象的引用也是根据这种树一层一层引用的，引用时使用 “.” 号)，在这棵“树”中，最高层的对象是 window 对象，在这同时，浏览器还会创建另一个高层的对象叫 navigator，这个对象包含了浏览器的类型、版本、安装的插件等等信息。浏览器在创建 window 和 navigator 对象的同时，也会将 window 的属性 location、history 和 document 创建为高层对象。

附：下面为对象表：total object

对象

父对象

对象说明

对象属性

对象方法

示例

window

 

 

frames，screen

alert()，confirm,prompt，setTimeout

 

location

window

页面的地址 (URL) 信息；

 

 

 

history

window

包括了当前打开的这个浏览器访问过的地址 (URL) 列表；

 

 

 

document

window

包含了页面的内容信息

bgColor，fgColor，linkColor，lastModified，images,froms,links. cookie,anchors,applets, title, URL,  documentElement, body,  all[],charset

clear, close,open, write, writeln......

var abc = document.images[3];

//变量 abc 指向的是网页中的第四个imags,因为images,forms,links是数组对象

navigator

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

legacy DOM:

对象

父对象

对象说明

对象属性

对象方法

示例

images[]

document

图片对象

src,name

 

 

links[]

document

链接对象

url,href,target

 

 

forms[]

document

表单对象,它包含了很多元素本质

value,name

onSubmit,

 

applets[]

document

An array of objects that represent the Java applets embedded in a document

 

 

 

anchors[]

document

<a>

 

 

 

cookie

document

 

length,name,expires,path

split

 

text

 

 

data,length

appendData, insertData, splitText...

 

elements[]

form

用来访问访问每一个 input 对象

length,value, type

 

document.forms[0].elements[3]

// 第一个表单 form 中的第三个 input 元素

W3C DOM

Finding elements by ID: getElementById(sID)

Finding elements by tag name: getElementsByTagName(sTagName)

xml对象

nodeType

Represents

1

Element: an HTML tag

2

Text: text in a document

8

Comment: an HTML comment

9

Document: the HTML document

 

事件：

Ondataavailable 事件

 作   用

 此事件会在XML 文件有效时被触发。

 

 

 基本语法

 此一事件有下面三种处理方式
. Inline：<element ondataavailable ＝ handler>；
. Event property：object.ondataavailable ＝ handler；
. Named script：<SCRIPT FOR ＝ object EVENT ＝ ondataavailable>；
　

 

 

说   明

 ondataavailable 事件只要一获得有效的数据就会被触发。这项技术并未说明在这个文件中有多少数据是有效的。

 

 

范   例

xmlDoc.ondataavailable ＝ alert('Data is now available.')；

 

 

 

Onreadystatechange 事件

 作   用

 这个事件会在readyState 属性内容改变时被触发。

 

 

 基本语法

 此一事件有如下三种处理方式：
. Inline：<element onreadystatechange ＝ handler>；
. Event property：object.onreadystatechange ＝ handler；
. Named script：<SCRIPT FOR ＝ object EVENT ＝ onreadystatechange>；
　

 

 

说   明

 onreadystatechange 事件在readyState 属性内容改变时就会被触发，但这个事件并未说明「准备好」的状态是什么。必须使用readyState 属性来取得现在的状态。

 

 

范   例

xmlDoc.onreadystatechange ＝
alert("The readyState property is" + xmlDoc.readyState)；

 

 

 

属性

async 属性

 作   用

 async 属性表示是否允许异步的下载。

 

 

 基本语法

 boolValue ＝ XMLDocument.async;XMLDocument.async ＝ boolValue;

 

 

说   明

 布尔值是可擦写的（read/write），如果准许异步下载，值为True；反之则为False。

 

 

范   例

xmlDoc.async ＝ "false";
alert(xmlDoc.async);

 

 

 

attribute 属性

 作   用

 传回目前节点的属性列表。

 

 

 基本语法

 objAttributeList = xmlNode.attributes;

 

 

说   明

 传回一个物件。如果此节点不能包含属性，则传回空值。

 

 

范   例

objAttList ＝ xmlDoc.documentElement.attributes;
alert(objAttList);

 

 

 

childNodes 属性

 作   用

 传回一个节点清单，包含该节点所有可用的子节点。

 

 

 基本语法

 objNodeList=node.childNodes;

 

 

说   明

 传回一个物件。假如这节点没有子节点，传回null。

 

 

范   例

objNodeList ＝ xmlDoc.childNodes;
alert(objNodeList);

 

 

 

doctype 属性

 作   用

 传回文件型态节点，包含目前文件的DTD。这节点是一般的文件型态宣告，例如，节点，名为EMAIL 的节点物件会被传回。

 

 

 基本语法

 objDocType=xmlDocument.doctype;

 

 

说   明

 传回一个对象，这个属性是只读的。假如这文件不包含DTD，会传回null。

 

 

范   例

objDocType ＝ xmlDoc.doctype;
alert(objDocType.nodeName);

 

 

 

documentElement 属性

 作   用

 确认XML 文件的根（Root）节点。

 

 

 基本语法

 objDoc=xmlDocument.documentElement;

 

 

说   明

 回一个在单一根文件元素中包含数据的对象。此属性可读/写，如果文件中不包含根节点，将传回null。

 

 

范   例

objDocRoot ＝ xmlDoc.documentElement;
alert(objDocRoot);

 

 

 

firstChild 属性

 作   用

 确认在目前节点中的第一个子元素。

 

 

 基本语法

 objFirstChild ＝ xmlDocNode.firstChild ;

 

 

说   明

 此属性只读且会传回一对象，如果节点中没有包含第一个子元素，将传回null。

 

 

范   例

objFirstChild ＝ xmlDoc.documentElement.firstChild;
alert(objFirstChild);

 

 

 

implementation 属性

 作   用

 DOM 应用程序能使用其它实作中的对象。implementation 属性确认目前XML 文件的DOMimplementation 对象。

 

 

 基本语法

 objImplementation ＝ xmlDocument.implementation;

 

 

说   明

 此属性只读且传回一个对象。

 

 

范   例

objImp ＝ xmlDoc.implementation;
alert(objImp);

 

 

 

lastChild 属性

 作   用

 确认目前节点中最后的子元素。

 

 

 基本语法

 objLastChild ＝ xmlDocNode.lastChild;

 

 

说   明

 此属性只读且传回一个对象。如果节点中没有包含最后子元素，将传回null。

 

 

范   例

objLastChild ＝ xmlDoc.documentElement.lastChild;
alert(objLastChild);

 

 

 

nextSibling 属性

 作   用

 在目前文件节点的子节点列表中传回下一个兄弟节点。

 

 

 基本语法

 objNextSibling ＝ xmlDocNode.nextSibling;

 

 

说   明

 此属性是只读且传回一个对象。如果节点中没有包含其它的相关节点，会传回null。

 

 

范   例

objSibling ＝ xmlDoc.documentElement.childNodes.item(1) .nextSibling;
alert(objSibling);

 

 

 

nodeName 属性

 作   用

 传回代表目前节点名称的字符串。

 

 

 基本语法

 strNodeName ＝ xmlDocNode.nodeName ;

 

 

说   明

 传回一个字符串。这个属性是只读的，传回元素名称、属性或实体参照。

 

 

范   例

strNodeName ＝ xmlDoc.documentElement.nodeName;
alert(strNodeName);

 

 

 

nodeType 属性

 作   用

 辨识节点的DOM 型态。

 

 

 基本语法

 numNodeType ＝ xmlDocNode.nodeType ;

 

 

说   明

此属性只读且传回一个数值。

有效的数值符合以下的型别：
1-ELEMENT
2-ATTRIBUTE
3-TEXT
4-CDATA
5-ENTITY REFERENCE
6-ENTITY
7-PI (processing instruction)
8-COMMENT
9-DOCUMENT
10-DOCUMENT TYPE
11-DOCUMENT FRAGMENT
12-NOTATION
　

 

 

范   例

numNodeType ＝ xmlDoc.documentElement.nodeType;
alert(numNodeType);

 

 

 

nodeValue 属性

 作   用

 传回指定节点相关的文字。这并非一个元素中数据的值，而是与一个节点相关且未解析的文字，就像一个属性或者一个处理指令。

 

 

 基本语法

 varNodeValue ＝ xmlDocNode.nodeValue;

 

 

说   明

 传回的文字代表以节点的nodeType 属性为主的型态值。（请参考附录中的nodeType 属性。）因为节点型态可能是几种数据型态中的一种，传回值也因此有差异。传回null 的节点型态有：DOCUMENT、ELEMENT、DOCUMENT TYPE、DOCUMENT FRAGMENT、ENTITY、ENTITY REFERENCE，和NOTATION。此属性可擦写。

 

 

范   例

varNodeValue ＝ xmlDoc.documentElement.nodeValue;
alert(varNodeValue);

 

 

 

ondataavailable 属性

 作   用

 指定一个事件来处理ondataavailable 事件。

 

 

 基本语法

 xmlDocNode.ondataavailable ＝ value;

 

 

说   明

 此属性是唯写，允许文件作者一旦数据为可用，即可尽快的使用数据来运作。

 

 

范   例

xmlDoc.ondataavailable ＝ alert("Data is now available.");

 

 

 

onreadystatechange 属性

 作   用

 指定一个事件来处理onreadystatechange 事件。这个事件能辨识readyState 属性的改变。

 

 

 基本语法

 xmlDocNode.onreadystatechange ＝ value;

 

 

说   明

 此属性是唯写的，允许文件作者指定当readyState 属性改变时呼叫事件。

 

 

范   例

xmlDoc.onreadystatechange ＝
alert("The readyState property has changed.");

 

 

 

ownerDocument 属性

 作   用

 传回文件的根节点，包含目前节点。

 

 

 基本语法

 objOwnerDoc ＝ xmlDocument.ownerDocument;

 

 

说   明

 此属性是只读的，传回一个包含文件根节点的对象，包含特定的节点。

 

 

范   例

objOwnerDoc ＝ xmlDoc.childNodes.item(2).ownerDocument;
alert(objOwnerDoc);

 

 

 

parentNode 属性

 作   用

 传回目前节点的父节点。只能应用在有父节点的节点中。

 

 

 基本语法

 objParentNode ＝ xmlDocumentNode.parentNode;

 

 

说   明

 此属性是只读的，传回包含指定节点的父节点对象。如果此节点不存在于文件树中，将传回null。

 

 

范   例

objParentNode ＝ xmlDoc.childNodes.item(1).parentNode;
alert(objParentNode);

 

 

 

parseError 属性

 作   用

 传回一个DOM 解析错误对象，此对象描述最后解析错误的讯息。

 

 

 基本语法

 objParseErr ＝ xmlDocument.parseError;

 

 

说   明

 此属性是只读的。如果没有错误发生，将传回0。

 

 

范   例

objParseErr ＝ xmlDoc.parseError;
alert(objParseErr);

 

 

 

previousSibling 属性

 作   用

 传回目前节点之前的兄弟节点。

 

 

 基本语法

 objPrevSibling ＝ xmlDocument.previousSibling;

 

 

说   明

 传回一个对象，这个属性是只读的。若该节点没有包含前面的兄弟节点，会传回null。

 

 

范   例

objPrevSibling ＝
xmlDoc.documentElement.childNodes.item(3).previousSibling
alert(objPrevSibling);

 

 

 

readyState 属性

 作   用

 传回XML 文件资料的目前状况。

 

 

 基本语法

 intState ＝ xmlDocument.readyState;

 

 

说   明

 这个属性是只读的，传回值有以下的可能：

0-UNINITIALIZED：XML 对象被产生，但没有任何文件被加载。
1-LOADING：加载程序进行中，但文件尚未开始解析。
2-LOADED：部分的文件已经加载且进行解析，但对象模型尚未生效。
3-INTERACTIVE：仅对已加载的部分文件有效，在此情况下，对象模型是有效但只读的。
4-COMPLETED：文件已完全加载，代表加载成功。
　

 

 

范   例

alert("The readyState property is " + xmlDoc.readyState);

 

 

 

url 属性

 作   用

 传回最近一次加载XML 文件的URL。

 

 

 基本语法

 strDocUrl ＝ xmlDocument.url;

 

 

说   明

 这个属性是只读的，传回最近一次加载成功文件的URL，若文件仅存在主存储器中（表示该文件并非由外部档案加载)，则传回null。

 

 

范   例

alert(xmlDoc.url);

 

 

 

validateOnParse 属性

 作   用

 告诉解析器文件是否有效。

 

 

 基本语法

 boolValidate ＝ xmlDocument.validateOnParse;
 xmlDocument.validateOnParse = boolValidate;

 

 

说   明

 此属性是可擦写的。如果传回值为true，表示文件被解析时被确认是有效的。如果传回false，表示文件是无效的，并被认为只是标准格式的（well-formed）文件。

 

 

范   例

xmlDoc.validateOnParse ＝ true;
alert(xmlDoc.validateOnParse);

 

 

 

xml 属性

 作   用

 传回指定节点的XML 描述和所有的子节点。

 

 

 基本语法

 xmlValue ＝ xmlDocumentNode.xml;

 

 

说   明

 此属性是只读的。

 

 

范   例

xmlValue ＝ xmlDoc.documentElement.xml;
alert(xmlValue);

 

 

 

方法：

abort 方法

 作   用

 abort 方法取消一个进行中的异步下载

 

 

 基本语法

 xmlDocument.abort();

 

 

说   明

 如果这个方法在异步下载时被呼叫，所有的解析动作会停止，而且在内存中的文件会被释放。

 

 

范   例

xmlDocument

 

 

 

AppendChild 方法

 作   用

 加上一个节点当作指定节点最后的子节点。

 

 

 基本语法

 xmlDocumentNode.appendChild(newChild);

 

 

说   明

 newChild 是附加子节点的地址。

 

 

范   例

docObj ＝ xmlDoc.documentElement;
alert(docObj.xml);
objNewNode ＝ docObj.appendChild(xmlDoc.documentElement. firstChild);
alert(docObj.xml);

 

 

 

cloneNode 方法

 作   用

 

 

 

 基本语法

 xmlDocumentNode.cloneNode(deep);

 

 

说   明

 deep 是一个布尔值。如果为true，此节点会复制以指定节点发展出去的所有节点。如果是false，只有指定的节点和它的属性被复制。

 

 

范   例

currNode ＝ xmlDoc.documentElement.childNodes.item(1);
objClonedNode ＝ currNode.cloneNode(1);
alert(objClonedNode.xml);

 

 

 

createAttribute 方法

 作   用

 建立一个指定名称的属性。

 

 

 基本语法

 xmlDocument.createAttribute(name);

 

 

说   明

 name 是被建立属性的名称。

 

 

范   例

objNewAtt ＝ xmlDoc.createAttribute("encryption");
alert(objNewAtt.xml);

 

 

 

createCDATASection 方法

 作   用

 

 

 

 基本语法

 xmlDocument.createCDATASection(data);

 

 

说   明

 date 是一个字符串，且包含了被置放在CDATA 的资料。

 

 

范   例

objNewCDATA ＝ xmlDoc.createCDATASection("This is a CDATA Section");
alert(objNewCDATA.xml);

 

 

 

createComment 方法

 作   用

 

 

 

 基本语法

 xmlDocument.createComment(data);

 

 

说   明

 data 是一个字符串，且包含了被置放在批注的资料。

 

 

范   例

objNewComment ＝ xmlDoc.createComment("This is a comment");
alert(objNewComment.xml);

 

 

 

createDocumentFragment 方法

 作   用

 建立一个空的文件片断对象。

 

 

 基本语法

 xmlDocument.createDocumentFragment();

 

 

说   明

 一个新的文件片断被建立，但没有加到文件树中。要加入片断到文件树中，必须使用插入方法，例如insertBefore、replaceChild 或appendChild。

 

 

范   例

objNewFragment ＝ xmlDoc.createDocumentFragment();
alert(objNewFragment.xml);

 

 

 

createElement 方法

 作   用

 建立一个指定名称的元素。

 

 

 基本语法

 xmlDocument.createElement(tagName);

 

 

说   明

 tagName 是一个区分大小写的字符串来指定新元素名称。

 

 

范   例

objNewElement ＝ xmlDoc.createElement("TO");
alert(objNewElement.xml);

 

 

 

createEntityReference 方法

 作   用

 建立一个参照到指定名称的实体。

 

 

 基本语法

 xmlDocument.createEntityReference(name);

 

 

说   明

 name 是一个区分大小写的字符串，来指定新实体参照的名称。一个新的实体参照被建立，但是并没有被加到文件树中。若要将实体参照加到文件树中，必须使用一种插入方法，例如：insertBefore，replaceChild，或appendChild。

 

 

范   例

objNewER ＝ xmlDoc.createEntityReference("eRef");
alert(objNewER.xml);

 

 

 

createNode 方法

 作   用

 建立一个指定型态、名称，及命名空间的新节点。

 

 

 基本语法

 xmlDocument.createNode(type, name, nameSpaceURI);

 

 

说   明

 type 用来确认要被建立的节点型态，name 是一个字符串来确认新节点的名称，命名空间的前缀则是选择性的。nameSpaceURI 是一个定义命名空间URI 的字符串。如果前缀被包含在名称参数中，此节点会在nameSpaceURI 的内文中以指定的前缀建立。如果不包含前缀，指定的命名空间会被视为预设的命名空间。

 

 

范   例

objNewNode ＝ xmlDoc.createNode(1, "TO", "");
alert(objNewNode.xml);

 

 

 

createProcessingInstruction 方法

 作   用

 建立一个新的处理指令，包含了指定的目标和数据。

 

 

 基本语法

 xmlDocument.createProcessingInstruction(target, data);

 

 

说   明

 target 是表示目标、名称或处理指令的字符串。Data 是表示处理指令的值。一个新的处理指令被建立，但是并没有加到文件树中。要把处理指令加到文件树中，必须使用插入方法，例如：insertBefore、replaceChild，或是appendChild。

 

 

范   例

objNewPI ＝xmlDoc.createProcessingInstruction(‘XML’, ‘version＝"1.0"’);
alert(objNewPI.xml);

 

 

 

createTextNode 方法

 作   用

 建立一个新的text 节点，并包含指定的数据。

 

 

 基本语法

 xmlDocument.createTextNode(data);

 

 

说   明

 data 是一个代表新text 节点的字符串。一个新的text 节点被建立，但是没有加到文件树中。若要将节点加到文件树中，必须使用插入方法，例如：insertBefore，replaceChild或appendChild。

 

 

范   例

objNewTextNode ＝ xmlDoc.createTextNode("This is a text node.");
alert(objNewTextNode.xml);

 

 

 

getElementsByTagName 方法

 作   用

 传回指定名称的元素集合。

 

 

 基本语法

 objNodeList ＝ xmlDocument.getElementsByTagName(tagname);

 

 

说   明

 tagname 是一个字符串，代表找到的元素卷标名称。使用tagname "*"传回文件中所有找到的元素。

 

 

范   例

objNodeList ＝ xmlDoc.getElementsByTagName("*");
alert(objNodeList.item(1).xml);

 

 

 

haschildnodes 方法

 作   用

 如果指定的节点有一个或更多子节点，传回值为true。

 

 

 基本语法

 boolValue ＝ xmlDocumentNode.hasChildNodes() ;

 

 

说   明

 如果此节点有子节点传回值为true，否则传回false 值。

 

 

范   例

boolValue ＝ xmlDoc.documentElement.hasChildNodes();
alert(boolValue);

 

 

 

insertBefore 方法

 作   用

 在指定的节点前插入一个子节点。

 

 

 基本语法

 objDocumentNode ＝ xmlDocumentNode.insertBefore(newChild,refChild);

 

 

说   明

 newChild 是一个包含新子节点地址的对象，refChild 是参照节点的地址。新子节点被插到参照节点之前。如果refChild 参数没有包含在内，新的子节点会被插到子节点列表的末端。

 

 

范   例

objRefNode ＝ xmlDoc.documentElement;
alert(xmlDoc.xml);
objNewNode ＝ xmlDoc.createComment("This is a comment");
xmlDoc.insertBefore(objNewNode, objRefNode);
alert(xmlDoc.xml);

 

 

 

load 方法

 作   用

 表示从指定位置加载的文件。

 

 

 基本语法

 boolValue ＝ xmlDocument.load(url);

 

 

说   明

 url 包含要被加载档案的URL 的字符串。假如文件加载成功，传回值即为true。若加载失败，传回值为false。

 

 

范   例

boolValue ＝ xmlDoc.load("LstA_1.xml");
alert(boolValue);

 

 

 

loadXML 方法

 作   用

 加载一个XML 文件或字符串的片断。

 

 

 基本语法

 boolValue ＝ xmlDocument.loadXML(xmlString);

 

 

说   明

 xmlString 是包含XML 文字码的字符串。

 

 

范   例

xmlString ＝ "<GREETING><MESSAGE>Hello!</MESSAGE></GREETING>";
boolValue ＝ xmlDoc.loadXML(xmlString);
alert(boolValue);

 

 

 

nodeFromID 方法

 作   用

 传回节点ID 符合指定值的节点。

 

 

 

 基本语法

 xmlDocumentNode ＝ xmlDocument.nodeFromID(idString);

 

 

 

说   明

 idString 是一个包含ID 值的字符串。符合的节点必定是ID 型态。若符合，将传回一个对象；若操作失败，则传回null。

 

 

 

范   例

objDocumentNode ＝ xmlDoc.nodeFromID("TO");
alert(objDocumentNode);

 

 

 

 

parsed 方法

 作   用

 会验证该指定的节点(node)及其衍生的子节点(descendants)是否已被解析过。

 

 

 基本语法

 boolValue ＝ xmlDocumentNode.parsed()；

 

 

说   明

 如果全部的节点都已经被解析过了，则传回值为ture；如果有任何一个节点尚未被解析，传回值则为false。

 

 

范   例

currNode ＝ xmlDoc.documentElement.childNodes.item(0)；
boolValue ＝ currNode.parsed()；
alert(boolValue)；

 

 

 

removeChild 方法

 作   用

 会将指定的节点从节点清单中移除。

 

 

 基本语法

 objDocumentNode ＝ xmlDocumentNode.removeChild(oldChild);

 

 

说   明

 oldChild 为一个包含要被移除的节点对象。

 

 

范   例

objRemoveNode ＝ xmlDoc.documentElement.childNodes.item(3)；
alert(xmlDoc.xml);
xmlDoc.documentElement.removeChild(objRemoveNode)；
alert(xmlDoc.xml)；

 

 

 

replaceChild 方法

 作   用

 置换指定的旧子节点为提供的新子节点。

 

 

 基本语法

 objDocumentNode ＝ xmlDocumentNode.replaceChild(newChild,oldChild)；

 

 

说   明

 newChild 为包含新子节点的对象。如果此参数为null，则此旧子节点会被移除而不会被取代。oldChild 为包含旧子节点的对象。

 

 

范   例

objOldNode ＝ xmlDoc.documentElement.childNodes.item(3)；
objNewNode ＝ xmlDoc.createComment("I've replaced the BCC element.")；
alert(xmlDoc.xml)；
xmlDoc.documentElement.replaceChild(objNewNode,objOldNode)；
alert(xmlDoc.xml)；

 

 

 

selectNodes 方法

 作   用

 传回所有符合提供样式(pattern)的节点。

 

 

 基本语法

 objDocumentNodeList ＝ xmlDocumentNode.selectNodes(patternString)；

 

 

说   明

 patternString 为一包含XSL 样式的字符串。此方法会传回节点清单对象，包含符合样式的节点。如果没有符合的节点，则传回空的清单列表。

 

 

范   例

objNodeList＝xmlDoc.selectNodes（"/"）；
alert（objNodeList.item(0).xml）；

 

 

 

selectSingleNode 传回第一个符合样式的节点。

 作   用

 传回第一个符合样式的节点。

 

 

 基本语法

 objDocumentNode ＝ xmlDocumentNode.selectSingleNode(patternString)；

 

 

说   明

 patternString 为一包含XSL 样式的字符串。此方法会传回第一个符合的节点对象，如果没有符合的节点，则传回null。

 

 

范   例

objNode ＝ xmlDoc.selectSingleNode("EMAIL/BCC")；
alert(objNode.xml)；

 

 

 

transformNode 方法

 作   用

 使用提供的样式表来处理该节点及其子节点。

 

 

 基本语法

 strTransformedDocument ＝ xmlDocumentNode.transformNode(stylesheet)；

 

 

说   明

 stylesheet 为一XML 文件或是片断包含负责节点转换工作的XSL 元素。此方法会传回一包含转换结果的字符串。

 

 

范   例

var style ＝ new ActiveXObject("Microsoft.XMLDOM")；
style.load("LstA_49.xsl")；
strTransform ＝ xmlDoc.transformNode(style.documentElement)；
alert(strTransform)；

 

 

 

 

 

DHTML: Scripting CSS Styles

Property

Description/Values

position

How the element is positioned. absolute, relative, fixed, or static (the default).

left, top

The X and Y coordinates of the left and top edges of the element.

width

The width of the element.

height

The height of the element.

zIndex

The stacking order. Values are integers; higher values are drawn on top of lower values.

display

How to display the element. Common values are block, inline, and none for elements that don't get laid out at all.

visibility

Whether the element is visible or hidden. Space is still allocated for non-positioned hidden elements.

overflow

What to do when element content exceeds element size. Values: visible (content overflows); hidden (excess content hidden); scroll (display permanent scrollbar); auto (scrollbars only when needed).

clip

What portion of element content to display. Syntax: rect(top right bottom left).

 

常用的一些Event

Handler

Supported by/Triggered when

onabort

<img>; image load aborted

onblur

<body> and form elements; window or element loses keyboard focus

onchange

Form elements; displayed value changes

onclick

All elements; mouse press and release; return false to cancel

ondblclick

All elements; mouse double-click

onerror

<img>; image loading fails

onfocus

<body> and form elements; window or element gets keyboard focus

onkeydown

<body> and form elements; key pressed; return false to cancel

onkeypress

<body> and form elements; key pressed and released; return false to cancel

onkeyup

<body> and form elements; key released

onload

<body>, <frameset>, <img>, <iframe>, <object>; document, image, or object completely loaded

onmousedown

All elements; mouse button pressed

onmousemove

All elements; mouse pointer moved

onmouseout

All elements; mouse moves off element

onmouseover

All elements; mouse moves over element; return true to prevent link URL display in status bar

onmouseup

All elements; mouse button released

onreset

<form>; form reset requested; return false to prevent reset

onresize

<body>, <frameset>; window size changes

onsubmit

<form>; form submission requested; return false to prevent submission

onunload

<body>, <frameset>; document unloaded

 

<input type="button" value="Press Me"

        onclick="alert('Hello World!');">

<form action="javascript:void validate( )">

 

html id内的文本内容：

<li id="DT" onclick="changeText()">您好吗? </li>

<script language="JavaScript">
function changeText()
{
DT.innerText="我很好!";
}//function

</script>

改变文本使用属性：innerText，outerText，innerHTML，outerHTML

 

JavaScript API Reference:

http://www.leftworld.net/online/JavaScriptP/jscriptpr2-CHP-1-SECT-1.1.html

http://www.leftworld.net/online/JavaScriptP/index.html

html基础知识

HTML文档中，第一个标签是<html>。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是</html>，这个标签告诉浏览器这是HTML文档的终止。

在<head>和</head>标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。
在<title>和</title>标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。
在<body>和</body>标签之间的文本是正文，会被显示在浏览器中。
在<b>和</b>标签之间的文本会以加粗字体显示。

 

HTML文档是由HTML元素组成的文本文件。
HTML元素是预定义的正在使用的HTML标签。Eg:<html>是一个html标签，html是元素名称，标签可拥有属性。

HTML规定了一些基本标签，排版，背景颜色样式，文本格式。

HTML还包括下面内容：链接（href）, 表格（table）,框架（frameset），表单(<form><input type=”” value=””></form>), 图像（img）,列表等。

 

css的一些属性

 

STYLE: 一个样式表可以使用STYLE元素在文档中嵌入. 放在文档的HEAD部分。此外，也可使用STYLE属性内联在html文本中。Eg:

<STYLE TYPE="text/css" MEDIA=screen>

<!--

  BODY  { background: url(foo.gif) red; color: black }

  .note { margin-left: 5em; margin-right: 5em }

-->

</STYLE>

LINK：一个外部的样式表可以通过LINK元素连接到HTML文档中，也是在文档的HEAD部分。

Eg: <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

 

CLASS：class属性用于指定元素属于何种样式的类。例如，样式表可以加入punk和warning类:

.punk     { color: lime; background: #ff80c0 }

P.warning { font-weight: bolder; color: red; background: white }

这些类可以使用CLASS属性在HTML中引用:

 

重要的html元素

ID属性: ID属性用于定义一个元素的独特的样式。一个CSS规则如:

#wdg97 { font-size: larger }

可以通过ID属性应用到HTML中:

<P ID=wdg97>欢迎访问Web Design Group及TV water 168!</P>

此外：ID是用来标识一个元素，一段html正文的有力工具。（非常重要）

 

SPAN元素：SPAN元素被加入到HTML中以允许网页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用，而且它也能接受STYLE、CLASS和ID属性。

DIV元素：DIV元素在功能上与SPAN元素相似，最主要的差别在于DIV ("division"，"部分"的简称)是一个块级元素。

 

 

 

参考资料

javascript精品源码       http://qbit.100steps.net/javascript.php

AJAX学习必备三本书

Ajax基础教程 

Ajax实战（Ajax in action中文版） 

Ajax Hacks (英文影印版) 

http://www.leftworld.net/online/xml/xml_cn/default.asp.htm

http://www.w3schools.com/xml/default.asp

名词术语：

XHTML - 可扩展HTML（Extensible HTML）

XHTML 使用XML重新定义了HTML 4.01的语法。XHTML 1.0是HTML的下一个版本。更多的请参考我们的XHTML 指南。

 

CSS - 层叠样式表单（Cascading Style Sheets）

CSS 样式单可以为XML文档添加显示信息。

 

XSL - 可扩展样式单语言（Extensible Style Sheet Language）

XSL由三部分组成: XML文档转换（XML Document Transformation ，又叫XSLT）,模式匹配语法（ a pattern matching syntax ，又叫XPath), 格式话对象（ a formatting object interpretation，XSL FO）。

 

DOM - 文档对象模型（Document Object Model）

DOM定义了XML文档的接口、属性和方法。 更多请参考 DOM 指南。

它提供了文件的结构表述，让你可以改变其中的內容及可见物。

　    所有WEB开发人员可操作及建立文件的属性、方法及事件都以对象来展现（例如，document 就代表“文件本身“这个对像，table 对象则代表 HTML 的表格对象等等）。这些对象可以由当今大多数的浏览器以 Script 来取用。

一个用HTML或XHTML构建的网页也可以看作是一组结构化的数据，这些数据被封在DOM（Document Object Model）中，DOM提供了网页中各个对象的读写的支持。

 

XPath - XML匹配模式（XML Pattern Matching）

XPath是一种用于标识XML文档各个部分的语言。这是一种为了XSLT 和 XPointer而设计出来的语言。XPath是用于在XML文件上寻找信息的一种语言。XPath用于操纵XML文件上的元素和属性。XPath contains a library of standard functions.

 

Namespaces - 命名空间

XML命名空间提供了一种可以把元素、属性、名字和URL地址引用相互关联的方法。

 

W3C 介绍

互联网组织（The World Wide Web Consortium ，W3C）成立于1994年。主要通过发展各种WWW协议来领导Web。比如HTML, CSS 和 XML都是由W3C制定的。

W3C最重要的工作就是制定网络规范，或者描述一些构造Web的技术。

 

XSL的运算符

表一、运算符与特殊字符

 运算符

 

描述

/

 

选择子元素，返回左侧元素的直接子元素；如果"/"位于最左侧表示选择根结点的直接子元素

//

 

递归下降，不论深度，搜索指定的元素；如果位于最左侧表示从根结点出发递归下降搜索指定元素

.

 

表示当前元素

*

 

通配符，选择任意元素，不考虑名字

@

 

取得属性值，作为属性名的前缀

@*

 

通配符，选择任意属性，不考虑名字

:

 

名字作用范围分隔符，将名字作用范围前缀与元素或属性名分隔开来

!*

 

在相关节点上应用指定方法

()*

 

分组，明确指定优先顺序

[]

 

应用过滤样式

[]*

 

下标运算符，用于在集合中指示元素

　　表二、逻辑运算符

 可选方式

 

描述

and $and$ 或 &&

 

逻辑与

or $or$ 或 ||

 

逻辑或

not() $not$

 

逻辑非

　　表三、关系运算符

 可选方式

 

描述

= 或 $eq$

 

相等

= 或 $ieq$

 

相等（不区分大小写）

!= 或 $ne$

 

不等

$ine$

 

不等（不区分大小写）

< 或 $lt$

 

小于

$ilt$

 

小于（不区分大小写）

<= 或 $le$

 

小于等于

$ile$

 

小于等于（不区分大小写）

> 或 $gt$

 

大于

$igt$

 

大于（不区分大小写）

>= 或 $ge$

 

大于等于

$ige$

 

大于等于（不区分大小写）

$all$

 

集合运算符，如果集合中所有项目均满足条件则返回"真"

$any$

 

集合运算符，如果集合中任意项目满足条件则返回"真"

|

 

集合运算符，返回两个集合的联合

 

html排版

表1 常用的文字相关属性

属性名称

功能描述

设置值

例

color

文字的颜色

颜色的英文名或十六进制的rgb色

color:red color:#f00f01

font-family

文字字型

字型名称

font-family:宋体

font-size

文字大小

pt、in、cm、px、xx-small、x-small、small、medium、large、x-large、xx-large

font-size:x-large font-size:1cm

font-weight

文字粗细

extra-light、light、demi-light、medium、demi-bold、bold、extra-bold

font-weight:light

font-style

字型样式

normal、italic

font-style:italic

text-align

文字位置

center、right、left

text-align:left

text-indent

文字缩排

pt（点）in（英寸）cm（厘米）px（像素）

text-indent:20pt

text-transform

大小写转换

capitalize、uppercase、lowercase

text-transform:uppercase

text-decoration

文字加线设置

underline、ouerline、line-through

text-decora：underline

 

表2 常用的版面排列属性

属性名称

功能描述

设置值与单位

display

组件的显示状态

none、block、inline

width

组件的宽度

pt、in、cm、px

background-color

组件的背景颜色

颜色英文名或十六进制rgb

padding

组件与四边的距离

pt、in、cm、px

padding-left

组件与左边的距离

pt、in、cm、px

padding-right

组件与右边的距离

pt、in、cm、px

padding-top

组件与上边的距离

pt、in、cm、px

padding-bottom

组件与下边的距离

pt、in、cm、px

border

方形边框

 

border-left

方形的左边框

 

border-right

方形的左边框

 

border-top

方形的上边框

 

border-bottom

方形的下边框

 

border-color

方形边框的颜色

颜色的英文名或十六进制rgb

border-wide

方形边框的宽度

thin 、medium、thick、pt、in、cm、px

border-style

方形边框的样式

none、dotted、solid、double