艾恩ASP学习BLOG文章列表 http://dev.mo.cn/mydiary.asp 艾恩ASP学习Blog,免费提供各种ASP学习资源，组件、源代码、学习手册、技术文章... Anlige By dev.mo.cn zh-CN copyright 2008 dev.mo.cn 鲁ICP备08010580 2012-5-19 8:24:16 在外部引用js里面获取当前js的路径 zhanghuiguoanlige@126.com http://dev.mo.cn/article_297.html 2010-12-4 16:24:48 http://dev.mo.cn/article_297.html
    ȫ
document.write("<span id=\"_tmp\" style=\"display:none\"></span>");
var _this = document.getElementById("_tmp").previousSibling;
alert(_this.src);

输出结果正确，获取到了js的路径，经过测试这个方法兼容各浏览器。
  代码也没什么特别之处，就是在当前位置输出了一个span元素，通过span元素的previousSibling属性来定位script的。]]> JavaScript/DOM 网页刷新后保持菜单的原状态 zhanghuiguoanlige@126.com http://dev.mo.cn/article_216.html 2009-5-24 0:09:56 http://dev.mo.cn/article_216.html 其中，jquery仅仅用了他的each方法，以减少代码量，你完全可以把onclick事件要执行的代码分离出来，然后通过其他方式调用，而不是像我这样批量处理
    ȫ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
     <title>艾恩ASP学习Blog-天下没有免费的午餐,这里有免费的Asp大餐</title>
     <script type="text/javascript" src="jquery.js"></script>
         <script type="text/javascript">
         $(document).ready(function(){
    $("#menu > a").each(function(i){
                this.onclick=function(){
                        cookie.SET("Aien_currentID",this.id,365);
                };
    });
    var currentID=cookie.GET("Aien_currentID");
    if(currentID!=null){
                $("#" + currentID).css({"background-color":"#eee","color":"red"});
    }
});
var cookie={
    SET        : function(name, value, days) {var expires = "";if (days) {var d = new Date();d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);expires = "; expires=" + d.toGMTString();}document.cookie = name + "=" + value + expires + "; path=/";},
        GET        : function (name) {var re = new RegExp("(\;|^)[^;]*(" + name + ")\=([^;]*)(;|$)");var res = re.exec(document.cookie);return res != null ? res[3] : null;}
};
         </script>
 </head>

 <body>
 <div id="container"> 
     <div id="menu">
          <a href="index.html" id="m1">首页</a>
          <a href="index.html" id="m2">心情日志</a>
          <a href="index.html" id="m3">程序随笔</a>
          <a href="index.html" id="m4">资源分享</a>

          <a href="index.html" id="m5">艾恩作品</a>
          <a href="index.html" id="m6">留言簿</a>
      </div>
</div>
</body>
</html>

下载源码]]> JavaScript/DOM 如何通过使用XMLHTTP发送二进制流 zhanghuiguoanlige@126.com http://dev.mo.cn/article_205.html 2009-4-10 11:19:23 http://dev.mo.cn/article_205.html 本文章摘自 "Microsoft帮助和支持"中心，由于没有测试环境，未对下面代码进行测试
   有些情况下，您可能需要向服务器发送二进制数据流。要这样做，一种方法是使用IXMLHTTPRequest 对象。本文说明如何从服务器中检索 ADO 记录集，修改它，然后将它作为二进制数据流发送回服务器。 
  本例使用ADODB.Stream 对象来保存将发送回服务器的二进制数据。 如果已经以并列模式安装了更高版本的 MSXML，要使用该特定版本运行示例代码，必须明确使用该版本的 GUID 或 ProgID。例如，MSXML 第 4 版仅在并列模式下安装。请参考以下 Microsoft 知识库文章，了解使用 MSXML 4.0 分析器运行示例代码需要更改哪些代码：Q305019 INFO:MSXML 4.0 Specific GUIDs and ProgIds（MSXML 4.0 特定的 GUID 和 ProgId）。

例如，在以下代码中，您将用 MSXML 4.0 和下面的语句创建对象： 
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.4.0");
xmldoc = new ActiveXObject("Msxml2.DOMDocument.4.0");
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.4.0");
要用 XMLHTTP 向服务器发送二进制数据流，请遵循以下步骤： 
1.将下面的代码粘贴到默认 Web 文件夹中的某个文件中并将该文件命名为 Receiver.asp。
    ȫ
<%
dim Connection
dim rs
Connection = "Provider=SQLOLEDB.1;Data Source=servername;User Id=username;Password=password;Initial Catalog=Northwind;"
sql =  "Select * from Customers"


set rs = server.CreateObject("ADODB.Recordset")

if Request.QueryString("getRecordset") = "YES" then
        rs.ActiveConnection = Connection
        rs.CursorLocation = 3 'Client Side
        rs.CursorType = 3 'Static Recordset
        rs.LockType = 4 'Batch Optimistic
        rs.Open sql
        rs.Save response, 1 'persist adPersistXML
        Response.End
else
        rs.open Request '.BinaryRead(Request.TotalBytes)
        rs.activeconnection = Connection 'Reconnect
        rs.updatebatch 'Update adAffectAll
        rs.close
        Response.Write "Recordset Saved" 'Send back response
        Response.End
end if

%>


2.将下面的代码粘贴到默认 Web 文件夹中的某个文件中并将该文件命名为 Sender.asp

    ȫ
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
<!--

var rs;
var xmldoc; 
var xmlstream;

function SendRS_onclick() {
        xmlstream = new ActiveXObject("ADODB.Stream");
        xmlstream.Mode = 3; //read write
        xmlstream.Open();
        xmlstream.Type = 1; // adTypeBinary
        rs.Save(xmlstream,0); //adpersistadtg
           var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
           xmlhttp.Open("POST","http://localhost/Receiver.asp?getRecordset=NO",false);
        xmlhttp.setRequestHeader("Content-Length",xmlstream.Size); //set the length of the content
           xmlhttp.send(xmlstream.Read(xmlstream.Size)); //Send the stream
           alert(xmlhttp.responseText);
}

function getRS_onclick() {
        rs = new ActiveXObject("ADODB.Recordset");
        xmldoc = new ActiveXObject("Msxml2.DOMDocument");
           var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
           xmlhttp.Open("Get","http://localhost/Receiver.asp?getRecordset=YES",false);
           xmlhttp.send();
           xmldoc.loadXML(xmlhttp.responseText); //load the returned stream into the dom document
           rs.Open(xmldoc); //load the dom document into the recordset
           alert("Recordset Loaded");
}

function Update_onclick() {
        alert("before: " + rs.Fields(2).Value);
        rs.Fields(2).Value = rs.Fields(2).Value + "!";
        rs.Update();
        alert("after: " + rs.Fields(2).Value);
}

//-->
</SCRIPT>
<INPUT type="button" value="Get Recordset" id=getRS name=getRS LANGUAGE=javascript onclick="return getRS_onclick()">
<INPUT type="button" value="Update" id=Update name=Update LANGUAGE=javascript onclick="return Update_onclick()">
<INPUT type="button" value="Send Recordset" id=SendRS name=SendRS LANGUAGE=javascript onclick="return SendRS_onclick()">


3.修改 Receiver.asp 页，使连接变量包含 Microsoft SQL Server 名称和有效的 SQL 用户 ID 和密码。
4.启动 Microsoft Internet Explorer，然后浏览到 http://localhost/sender.asp。
5.单击Get Recordset（获得记录集）。出现一个消息框，告诉您记录集已成功加载。
6.单击Update（更新）。出现一个消息框，显示更新前的值。出现第二个消息框，显示更新后的值。
7.单击Send Recordset（发送记录集）。出现一个消息框，告诉您记录集已更新。

虽然这使您可以使用持久的机制向客户端来回传递数据，但在 SQL Server 2000 中，建议您使用 UpdateGrams 或OpenXML 来传递和发送 XML 格式的记录集数据。
成形记录集 (Shaped Recordset) 中有些限制。编辑过的成形记录集不能以 XML 格式保持。另外，参数化的成形命令根本不可能保持。有关保持和限制的其他相关信息，请参见下面的 Microsoft Developer Network (MSDN) Web 站点：
XML Persistence Format（XML 持久格式）
http://msdn.microsoft.com/library/psdk/dasdk/xmli3vsk.htm]]> JavaScript/DOM XML技术上传文件 zhanghuiguoanlige@126.com http://dev.mo.cn/article_204.html 2009-4-10 11:14:16 http://dev.mo.cn/article_204.html
< FORM NAME="myForm" ACTION="TargetURL.asp" ENCTYPE="multipart/form-data"METHOD="post" >
< INPUT TYPE="file" NAME="myFile" >
< INPUT TYPE="submit" VALUE="Upload File" >
< /FORM >

　　这种方案在客户端和服务器端的使用都有很多限制。首先，我们必须使用POST方法，因为GET方法无法处理这样的表单数据。并且，没有什么方法可以在不使用表单的情况下引发一个POST动作。把数据发送给表单处理程序后，浏览器将会把处理程序作为新页面加载，然后使用者会看到一个不讨人喜欢的页面转换过程。

　　ENCTYPE属性为表单定义了MIME编码方式，上传文件的表单的ENCTYPE属性必须使用“multipart/form-data”。把这个属性设置为“multipart/form-data”就创建了一个与传统结构不同的POST缓冲区（复合结构），ASP的Request对象无法访问这样的表单内容。所以，我们可以使用Request.binaryRead方法来访问这些数据，但是无法使用脚本语言来完成这一切。Request.binaryRead方法返回一个VTarray型数据（只包含无符号一字节字符的Variant型数组）。但是脚本语言只能处理Variant型数据。为了解决这个问题，只能使用专用的ASP上传组件，或者ISAPI扩展程序，比如CPSHOST.DLL。这是设计上的限制。

新的上传方案

需要按照如下步骤操作。
客户端：

使用MSXML 3.0创建一个XML文档
创建一个针对二进制内容的XML节点
使用ADO Stream object将上传的文件数据放入该节点
使用XMLHTTP对象把这个XML文档发送给Web服务器



服务器端：

　　从Request对象中读出XML文档读出二进制节点中的数据并且存储到服务器上的文件中。当然，我们也可以将其存储到数据库的BLOB型字段中。
　　在解释这段代码之前，我们可以对这个方案进行一些思考。

对XML的思考

　　XML格式支持很多数据类型，比如numeric, float, character等等。很多作者将XML定义为ASCII格式，但是我们不能忽视，XML技术还可以使用“bin.base64”数据类型来描述二进制信息。这个特性在MS XML3.0解析器重得到完全的支持，但是目前还需要一些特别设置。该对象提供一些可以对二进制数据进行完全控制的属性：

　　obj_node.dataType - 该可读写的属性定义了特定节点的数据类型。MSXML解析器支持更多的数据类型（参见MSDN：http://msdn.microsoft.com/library/psdk/xmlsdk/xmls3z1v.htm）
对于二进制数据，我们可以使用“bin.base64”类型。

　　obj_node.nodeTypedValue - 该可读写属性包含了按照制定类型表示的指定节点的数据。
我们可以创建一个包含多个bin.base64类型节点的XML文档，节点中包含上传的文件。这点特性可以使用一个POST一次上传多个文件。

　　我们可以使用XMLHttpRequest对象和POST方法发送一个XML文档给Web服务器。该对象为HTTP服务器提供了客户端协议支持，允许在Web服务器上发送和接受MS XMLDOM对象。XMLHttpRequest是Internet Explorer 5内置的COM对象（不需要定制安装），并且发送完毕后无需转换页面。


对ADO Stream对象的思考

　　我们可以在客户端创建一个包含一个或者多个二进制节点的XML文档。我们还必须把文件内容填入节点中。但是很不幸，脚本语言不能访问本地文件系统，并且Scripting.FileSystem对象（是Win32系统的内置对象）到目前为止还不能访问二进制文件。这是设计上的限制。所以我们需要另外找一个可以提供对本地二进制文件的访问的COM对象。

　　ADO Stream对象（MDAC 2.5中的组件）提供了读、写和管理二进制流数据的手段。字节流的内容可以是文本，或者二进制数据，并且没有容量上的限制。在ADO 2.5中，Microsoft对Stream对象的介绍不属于ADO对象结构的任何一层，所以，我们无需捆绑即可使用该对象。

　　本文中使用Stream对象来访问文件内容，再把内容存入XML节点。

客户端

以下示例代码使用Stream和MSXML对象完成文件上传动作。

    ȫ
< HTML >
< HEAD >< TITLE >File Send< /TITLE >< /HEAD >
< BODY >
< INPUT id=btn_send name="btn_send" type=button value="FILE SEND" >
< DIV id=div_message >Ready


< /BODY >
< /HTML >

< SCRIPT LANGUAGE=JavaScript >

// 上传函数
function btn_send.onclick()
{
// 创建 ADO-stream 对象
var ado_stream = new ActiveXObject("ADODB.Stream");

// 创建包含默认头信息和根节点的 XML文档
var xml_dom = new ActiveXObject("MSXML2.DOMDocument");
xml_dom.loadXML(' ');
// 指定数据类型
xml_dom.documentElement.setAttribute("xmlns:dt", "urn:schemas-microsoft-com:datatypes");

// 创建一个新节点，设置其为二进制数据节点
var l_node1 = xml_dom.createElement("file1");
l_node1.dataType = "bin.base64";
// 打开Stream对象，读源文件
ado_stream.Type = 1; // 1=adTypeBinary 
ado_stream.Open(); 
ado_stream.LoadFromFile("c:\\tmp\\myfile.doc");
// 将文件内容存入XML节点
l_node1.nodeTypedValue = ado_stream.Read(-1); // -1=adReadAll
ado_stream.Close();
xml_dom.documentElement.appendChild(l_node1);

// 可以创建多个二进制节点，一次上传多个文件

// 把XML文档发送到Web服务器
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("POST","./file_recieve.asp",false);
xmlhttp.send(xml_dom);
// 显示服务器返回的信息
div_message.innerHTML = xmlhttp.ResponseText;
}
< /SCRIPT >


服务器端

以下代码使用相同的对象提供服务器端的上传处理功能。

    ȫ

< %@ LANGUAGE=VBScript% >
< % Option Explicit
Response.Expires = 0 

' 定义变量和对象。
dim ado_stream
dim xml_dom
dim xml_file1

' 创建 Stream 对象
set ado_stream = Server.CreateObject("ADODB.Stream")
' 从Request对象创建 XMLDOM对象
set xml_dom = Server.CreateObject("MSXML2.DOMDocument")
xml_dom.load(request)
' 读出包含二进制数据的节点
set xml_file1 = xml_dom.selectSingleNode("root/file1")

' 打开Stream对象，把数据存入其中 
ado_stream.Type = 1 ' 1=adTypeBinary 
ado_stream.open 
ado_stream.Write xml_file1.nodeTypedValue
' 文件存盘
ado_stream.SaveToFile "c:\tmp\upload1.doc",2 ' 2=adSaveCreateOverWrite 
ado_stream.close

' 销毁对象 
set ado_stream = Nothing 
set xml_dom = Nothing
' 向浏览器返回信息
Response.Write "Upload successful!"
% >

也可以使用Stream对象把数据放到数据库的BLOB型字段中。

使用该方法的益处

不引起页面转换。
不需要专用组件。
可同时上传多个文件。

　　这段程序是纯脚本写成的，可以很容易的插入到其他代码中，而不需要任何HTML对象的配合。还可以把这个逻辑在任何支持COM标准的语言中实现。

系统安全考虑

　　该方法只能使用于内部网络，因为它需要IE5的安全级别设置为“低”。必须：

　　允许脚本和ActiveX对象。该设置允许浏览器执行类似 "myobj = new activexobject(...)"的 JScript语句；

　　必须允许穿越域访问数据源。这个设置允许在客户端使用Stream对象。还必须在服务器和客户端都安装MS XML DOM 3.0 和MDAC 2.5 。
]]> JavaScript/DOM 鼠标拖动层(可任意绑定DIV标签)（二） zhanghuiguoanlige@126.com http://dev.mo.cn/article_187.html 2009-1-28 14:32:52 http://dev.mo.cn/article_187.html 调用方法
Endrag.bind('MoveDiv').bind('Div1').offSet({x:0,y:0});
通过多次调用bind方法可以绑定任意多个Div标签;
offSet设置偏移，默认x偏移和y偏移都为0,供调整使用
本方法不能通过子元素绑定操作父元素

    ȫ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> 鼠标拖动层(可任意绑定DIV标签)（二） </title> 
<script language="javascript" type="text/javascript">
/*
鼠标拖动层(可任意绑定DIV标签)（二）
作者:Anlige
联系方式:1034555083/zhanghuiguoanlige@126.com

调用方法:Endrag.bind('MoveDiv').bind('Div1').offSet({x:0,y:0});
参数说明:bind的参数为Div标签的ID属性或者Div对象本身；offSet的参数为偏移量，默认(不调用本方法)x,y偏移都为0
说明:通过多次调用bind方法绑定多个对象的拖动
*/ 
  Endrag={
    x0:0,y0:0,x1:0,y1:0,moveable:false,index:100,NS:(navigator.appName=='Netscape'),offSets:{x:0,y:0},
    //开始拖动;  
    startDrag:function (e){
        e = e ? e : (window.event ? window.event : null);
        Endrag.getFocus(this); 
        if(e.button==(Endrag.NS)?0 :1)  { 
            if(!Endrag.NS){this.setCapture()}
            Endrag.x0 = e.clientX ;  
            Endrag.y0 = e.clientY ;  
            Endrag.x1 = parseInt(Endrag.abs(this).x);  
            Endrag.y1 = parseInt(Endrag.abs(this).y);    
            Endrag.moveable = true;  
        }  
    },  
    //拖动;  
    drag:function (e){
        e = e ? e : (window.event ? window.event : null);  
        if(Endrag.moveable){  
            this.style.left = (Endrag.x1 + e.clientX - Endrag.x0 - Endrag.offSets.x) + "px";  
            this.style.top  = (Endrag.y1 + e.clientY - Endrag.y0 - Endrag.offSets.y) + "px";  
        }  
    },  
    //停止拖动;  
    stopDrag:function (e){  
        if(Endrag.moveable)  {    
            if(!Endrag.NS){this.releaseCapture();}
            Endrag.moveable = false;  
        }  
    },
    //获得焦点;  
    getFocus:function (obj){  
        if(obj.style.zIndex!=this.index){  
            this.index += 2;  
            var idx = this.index;  
            obj.style.zIndex=idx;  
        }  
    },
    abs:function (element) {
        var result = { x: element.offsetLeft, y: element.offsetTop};
        element = element.offsetParent;
        while (element) {
            result.x += element.offsetLeft;
            result.y += element.offsetTop;
            element = element.offsetParent;
        }
        return result;
    }, 
    offSet:function(setting){
        this.offSets=setting;
    },
    bind:function(obj){
        obj=typeof(obj)=="object" ? obj:document.getElementById(obj);
        obj.onmousedown=Endrag.startDrag;
        obj.onmouseup=Endrag.stopDrag;
        obj.onmousemove=Endrag.drag;
        return this;
    }
};
</script> 
</head> 
<body onload="Endrag.bind('MoveDiv').bind('Div1').offSet({x:0,y:0});"> 
<div id="MoveDiv" style="background:#ffffff;position:absolute;left:200px;top:50px;width:500px;height:200px;border:1px #dddddd solid;"> 
<div id="hand" style="line-height:25px;text-align:center;background:#f00"> 
拖动层
</div> 
调用方法<br />
Endrag.bind('MoveDiv').bind('Div1').offSet({x:0,y:0});<br />
可以绑定任意多个Div标签;<br />offSet设置偏移，默认x偏移和y偏移都为0,供调整使用<br />
本方法不能通过子元素绑定操作父元素
</div> 
<div id="Div1" style="background:#ffffff;position:absolute;left:400px;top:300px;width:300px;height:200px;border:1px #dddddd solid;"> 
<div id="Div2" style="line-height:25px;text-align:center;background:#f00"> 
拖动层 
</div> 

</div> 
</body> 
</html> 
]]> JavaScript/DOM 鼠标拖动层(可任意绑定DIV标签)（一） zhanghuiguoanlige@126.com http://dev.mo.cn/article_186.html 2009-1-28 14:23:26 http://dev.mo.cn/article_186.html
    ȫ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> 鼠标拖动层(可任意绑定DIV标签)（一） </title> 
<script language="javascript" type="text/javascript"> 
/*
鼠标拖动层(可任意绑定DIV标签)（一）
作者:Anlige
联系方式:1034555083/zhanghuiguoanlige@126.com

调用方法:var myDrag=new Endrag(source,target,offSetX, offSetY);
参数说明:source--鼠标动作绑定对象;target--操作目标对象(要移动的对象);offSetX--横坐标偏移;offSetY--纵坐标偏移
说明:通过多次调用本方法绑定多个对象的拖动
*/
 funs={
    index:100,  
    getFocus:function (target){  
        if(target.style.zIndex!=this.index){  
            this.index += 2;  
            var idx = this.index;  
            target.style.zIndex=idx;  
        }  
    },
    abs:function (element) {
        var result = { x: element.offsetLeft, y: element.offsetTop};
        element = element.offsetParent;
        while (element) {
            result.x += element.offsetLeft;
            result.y += element.offsetTop;
            element = element.offsetParent;
        }
        return result;
    }
 };
 
 function Endrag(source,target,offSetX, offSetY){
    source=typeof(source)=="object" ? source:document.getElementById(source);
    target=typeof(target)=="object" ? target:document.getElementById(target);
    var x0=0,y0=0,x1=0,y1=0,moveable=false,index=100,NS=(navigator.appName=='Netscape');
    offSetX=typeof offSetX== "undefined" ? 0:offSetX;
    offSetY=typeof offSetY== "undefined" ? 0:offSetY;
    source.onmousedown=function(e){
        e = e ? e : (window.event ? window.event : null);
        funs.getFocus(target); 
        if(e.button==(NS)?0 :1)  { 
            if(!NS){this.setCapture()}
            x0 = e.clientX ;  
            y0 = e.clientY ;  
            x1 = parseInt(funs.abs(target).x);  
            y1 = parseInt(funs.abs(target).y);    
            moveable = true;  
        }  
    };  
    //拖动;  
    source.onmousemove=function(e){
        e = e ? e : (window.event ? window.event : null);  
        if(moveable){  
            target.style.left = (x1 + e.clientX - x0 - offSetX) + "px";  
            target.style.top  = (y1 + e.clientY - y0 - offSetY) + "px";  
        }  
    }; 
    //停止拖动;  
    source.onmouseup=function (e){ 
        if(moveable)  {   
            if(!NS){this.releaseCapture();}
            moveable = false;  
        }  
    };
}
</script> 
</head> 
<body onload="var i=new Endrag('hand','MoveDiv',0,0);var j=new Endrag('Div1','Div1',0,0);"> 
<div id="MoveDiv" style="position:absolute;left:200px;top:50px;width:400px;height:200px;border:1px #dddddd solid;"> 
<div id="hand" style="line-height:25px;text-align:center;background:#f00"> 
这个用子标签操作父标签 
</div> 
调用方法<br />var i=new Endrag('hand','MoveDiv',0,0);<br />
第一个参数为源标签对象或对象id属性；第二个参数为要移动的目标对象或对象id属性；第3、4个参数为偏移值，供最后调整用;<br />
鼠标指针在红色区域才有效
</div> 
<div id="Div1" style="background:#ffffff;position:absolute;left:400px;top:300px;width:300px;height:200px;border:1px #dddddd solid;"> 
<div id="Div2" style="line-height:25px;text-align:center;background:#f00"> 
这个用自标签操作自己 
</div> 
调用方法<br />var j=new Endrag('Div1','Div1',0,0);<br />
第一个参数为源标签对象或对象id属性；第二个参数为要移动的目标对象或对象id属性；第3、4个参数为偏移值，供最后调整用；<br />
鼠标指针在Div1标签内就有效
</div> 
</body> 
</html> 
]]> JavaScript/DOM jQuery入门指南 zhanghuiguoanlige@126.com http://dev.mo.cn/article_177.html 2009-1-4 9:34:36 http://dev.mo.cn/article_177.html
这个指南包括了很多代码，你可以copy它们，并试着修改它们，看看产生的效果。

一.安装
一开始,我们需求一个jQuery的库,最新的下载可以到这里找到。
这个指南提供一个基本包含实例的包供下载.

下载: jquery-starterkit

(译者Keel注:一定要下载这个包，光看文章不实践肯定是不行的。)

下载后解压缩，然后用你最喜欢的文本编辑器打开starterkit.html和custom.js这两个文件。
(译者Keel注:这两个就是例子文件,所有的例子都用这两个例子作出,custom.js写jQuery代码,starterkit.html观察效果.建议用editPlus打开)


现在,我们就已经做好了一切准备来进行这个著名的"Hello world"例子.

二.Hello jQuery在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:
$(document).ready(function() {
// do stuff when DOM is ready//当文档载入后从此处开始执行代码
}); 
下面我们放一个简单的alert事件在一个function中,因为这个alert不需求等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});

这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。
(译者Keel注:请照此代码修改custom.js并保存,然后用浏览器打开starterkit.html观察效果。)

让我们看一下这些修改是什么含义。$("a") 是一个jQuery选择器(selector),在这里，它选择所有的a标签（译者Keel注：即<a></a>），$号是 jQuery “类”(jQuery "class")的一个别称，因此$()构造了一个新的jQuery 对象(jQuery object)。函数 click() 是这个jQuery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.
这里有一个拟行相似功能的代码:
<a href="#" onclick="alert('Hello world')">Link</a>

不同之处很明显,用jQuery不需要在每个a标签上写onclick事件,所以我们拥有了一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像我们使用CSS追求的一样.

下面我们会更多地了解到选择器与事件.


三.Find me:使用选择器和事件
jQuery提供两种方式来选择html的elements，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div > ul a")）；第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。

为了测试一下这些选择器，我们来试着在我们starterkit.html中选择并修改第一个ordered list.

一开始，我们需要选择这个list本身，这个list有一个ID叫“orderedlist”，通常的javascript写法是document.getElementById("orderedlist").在jQuery中，我们这样做：
$(document).ready(function() {
$("#orderedlist").addClass("red");
});

这里将starterkit中的一个CSS样式red附加到了orderedlist上(译者Keel注：参考测试包中的css目录下的core.css，其中定义了red样式)。因此，在你刷新了starterkit.html后，你将会看到第一个有序列表(ordered list )背景色变成了红色，而第二个有序列表没有变化.

现在，让我们添加一些新的样式到list的子节点.
$(document).ready(function() {
$("#orderedlist >
li").addClass("blue");
});

这样，所有orderedlist中的li都附加了样式blue。

现在我们再做个复杂一点的，当把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一个element上生效。
$(document).ready(function() {
$("#orderedlist
li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});

还有大量的类似的CSS和XPath例子，更多的例子和列表可以在这里找到。
（译者Keel注：入门看此文，修行在个人，要想在入门之后懂更多，所以这段话的几个链接迟早是要必看的！不会又要翻译吧...^_^!）

每一个onXXX事件都有效，如onclick,onchange,onsubmit等，都有jQuery等价表示方法（译者Keel注：jQuery不喜欢onXXX，所以都改成了XXX，去掉了on）。其他的一些事件，如ready和hover,也提供了相应的方法。

你可以在Visual jQuery找到全部的事件列表，在Events栏目下。

用这些选择器和事件你已经可以做很多的事情了，但这里有一个更强的好东东！
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html(
$(this).html() + " BAM! " + i );
});
}); 


find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li"). each()一样迭代了所有的li，并可以在此基础上作更多的处理。 大部分的方法,如addClass(), 都可以用它们自己的 each() 。在这个例子中, html()用来获取每个li的html文本, 追加一些文字，并将之设置为li的html文本。（译者Keel注：从这个例子可以看到.html()方法是获取对象的html代码，而.html('xxx')是设置'xxx'为对象的html代码） 

另一个经常碰到的任务是在没有被jQuery覆盖的DOM元素上call一些方法，想像一个在你用AJAX方式成功提交后的reset：
$(document).ready(function() {
// use this to reset a
single form
$("#reset").click(function() {
$("#form")[0].reset();
});
});

（译者Keel注：这里作者将form的id也写成了form，源文件有<form id="form">，这是非常不好的写法，你可以将这个ID改成form1或者testForm，然后用$("#form1")或者$("#testForm")来表示它，再进行测试。）

这个代码选择了所有ID为"form"的元素，并在其第一个上call了一个reset()。如果你有一个以上的form，你可以这样做：
$(document).ready(function() {
// use this to reset
several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});

（译者Keel注：请注意一定要亲自将这些代码写在custom.js中并在starterkit.html上测试效果才能有所体会！必要时要观察starterkit.html的html代码）

这样你在点击Reset链接后，就选择了文档中所有的form元素，并对它们都执行了一次reset()。

还有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了filter() 和not() 方法来解决这个问题。 filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项. 考虑一个无序的list，你想要选择所有的没有ul子元素的li元素。
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
}); 

这个代码选择了所有的li元素，然后去除了没有ul子元素的li元素。刷新浏览器后，所有的li元素都有了一个边框，只有ul子元素的那个li元素例外。

（译者Keel注：请注意体会方便之极的css()方法，并再次提醒请务必实际测试观察效果，比方说换个CSS样式呢？再加一个CSS样式呢？像这样：$("li").not("[ul]").css("border", "1px solid black").css("color","red");）

上面代码中的[expression] 语法是从XPath而来，可以在子元素和属性(elements and attributes)上用作过滤器，比如你可能想选择所有的带有name属性的链接：
$(document).ready(function() {
$("a[@name]").background("#eee");
}); 


这个代码给所有带有name属性的链接加了一个背景色。（译者Keel注：这个颜色太不明显了，建议写成$("a[@name]").background("red");）

更常见的情况是以name来选择链接，你可能需要选择一个有特点href属性的链接，这在不同的浏览器下对href的理解可能会不一致，所以我们的部分匹配("*=")的方式来代替完全匹配("=")：
$(document).ready(function() {
$("a[@href*=/content/gallery]").click(function() {
// do something with
all links that point somewhere to /content/gallery
});
});


到现在为止，选择器都用来选择子元素或者是过滤元素。另外还有一种情况是选择上一个或者下一个元素，比如一个FAQ的页面，答案首先会隐藏，当问题点击时，答案显示出来，jQuery代码如下：

$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
var
answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});

这里我们用了一些链式表达法来减少代码量，而且看上去更直观更容易理解。像'#faq' 只选择了一次，利用end()方法，第一次find()方法会结束(undone)，所以我们可以接着在后面继续find('dt')，而不需要再写$('#faq').find('dt')。

在点击事件中的，我们用 $(this).next() 来找到dt下面紧接的一个dd元素，这让我们可以快速地选择在被点击问题下面的答案。
（译者Keel注：这个例子真是太酷了，FAQ中的答案可以收缩！从利用next()的思路到实现这些效果都有很多地方需要我们消化，注意 if (answer.is(':visible'))用法，注意answer.slideUp();不懂的地方赶紧查我在最开始提到的两个必看API文档）

除了选择同级别的元素外，你也可以选择父级的元素。可能你想在用户鼠标移到文章某段的某个链接时，它的父级元素--也就是文章的这一段突出显示，试试这个：

$(document).ready(function() {
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});
});


测试效果可以看到，移到文章某段的链接时，它所在的段全用上highlight样式，移走之后又恢复原样。
（译者Keel注：highlight是core.css中定义的样式，你也可以改变它，注意这里有第二个function()这是hover方法的特点，请在API文档中查阅hover，上面也有例子说明）

在我们继续之前我们先来看看这一步： jQuery会让代码变得更短从而更容易理解和维护，下面是$(document).ready(callback)的缩写法：
$(function() {
// code to execute when the DOM is ready
}); 


应用到我们的Hello world例子中，可以这样：
$(function() {
$("a").click(function() {
alert("Hello world!");
});
}); 

现在，我们手上有了这些基础的知识，我们可以更进一步的探索其它方面的东西，就从AJAX开始！
四.Rate me:使用AJAX
在这一部分我们写了一个小小的AJAX应用，它能够rate一些东西（译者Keel注：就是对某些东西投票），就像在youtube.com上面看到的一样。
首先我们需要一些服务器端代码，这个例子中用到了一个PHP文件，读取rating参数然后返回rating总数和平均数。看一下rate.php代码。

虽然这些例子也可以不使用AJAX来实现，但显然我们不会那么做，我们用jQuery生成一个DIV容器，ID是"rating"。

$(document).ready(function() {
// generate markup
var ratingMarkup = ["Please rate: "];
for(var i=1; i <= 5; i++) { ratingMarkup[ratingMarkup.length] = "" +
i + " ";
}
// add markup to container and
applier click handlers to anchors
$("#rating").append( ratingMarkup.join('')
).find("a").click(function(e) {
e.preventDefault();
// send requests
$.post("rate.php", {rating: $(this).html()}, function(xml) {
// format
result
var result = [
"Thanks for rating, current average: ",
$("average", xml).text(),
", number of votes: ",
$("count",
xml).text()
];
// output result
$("#rating").html(result.join(''));
} );
});
}); 


这段代码生成了5个链接，并将它们追加到id为"rating"容器中，当其中一个链接被点击时，该链接标明的分数就会以rating参数形式发送到rate.php，然后，结果将以XML形式会从服务器端传回来，添加到容器中，替代这些链接。
如果你没有一个安装过PHP的webserver，你可以看看这个在线的例子。
这是一个比较粗糙的例子，更完美的例子可以访问 softonic.de 点击 "Kurz bewerten!"。
更多的AJAX方法可以从这里找到，或者看看API文档下面的AJAX。

（译者Keel注：这个在线实例从国内访问还是比较慢的，点击后要等一会儿才能看到结果，可以考虑对它进行修改，比如加上loading，投票后加上再投票的返回链接等。此外，这个例子中还是有很多需要进一步消化的地方，看不懂的地方请参考API文档。）

一个在载入AJAX时经常发生的问题是：当载入一个事件句柄到一个需要载入内容的HTML文档时，你只能在内容载入后再加载这些句柄，为了防止代码重复执行，你可能用到如下一个function:

// lets use the shortcut
$(function() {
var
addClickHandlers = function() {
$("a.clickMeToLoadContent").click(function()
{
$("#target").load(this.href, addClickHandlers);
});
};
addClickHandlers();
}); 

现在，addClickHandlers只在DOM载入完成后执行一次，并且是在用户点击具有clickMeToLoadContent 这个样式的链接后。

请注意addClickHandlers函数是作为一个本地变量定义的，而不是全局变量(如：function addClickHandlers() {...})，这样做是为了防止与其他的全局变量或者函数相冲突。

另一个常见的问题是关于回传(callback)的参数。你可以通过一个额外的参数指定回叫的方法，简单的办法是将这个回叫方法包含在一个其它的function中：

// get some data
var foobar = ...;
// specify
handler, it needs data as a paramter
var handler = function(data) {
...
};
// add click handler and pass foobar!
$('a').click(
function(event) { handler(foobar); } );

// if you need the context of
the original handler, use apply:
$('a').click( function(event) {
handler.apply(this, [foobar]); } ); 

用到简单的AJAX后，我们可以认为已经非常之“web2.0”了，但是到现在为止，我们还缺少一些酷炫的效果。下一节将如谈到这些效果。


五：Animate me(让我生动起来):使用FX 
一些生动的效果可以使用 show() 和 hide()来表现:

$(document).ready(function() { $("a").toggle(function() {  $(".stuff").hide('slow'); }, function() {  $(".stuff").show('fast'); });});你可以与 animate()联合起来创建一些效果,如一个带渐显的滑动效果:

$(document).ready(function() { $("a").toggle(function() {  $(".stuff").animate({   height: 'hide',   opacity: 'hide'  }, 'slow'); }, function() {  $(".stuff").animate({   height: 'show',   opacity: 'show'  }, 'slow'); });});很多不错的效果可以访问interface plugin collection. 这个站点提供了很多demos和文档

这些效果插件是位于jQuery插件列表的前面的，当然也有很多其他的插件，比如我们下一章讲到的表格排序插件。

六、Sort me(将我有序化):使用tablesorter插件(表格排序) 
这个表格排序插件能让我们在客户端按某一列进行排序，引入jQuery和这个插件的js文件，然后告诉插件你想要哪个表格拥有排序功能。

要测试这个例子，先在starterkit.html中加上像下面这一行的代码：

<script src="lib/jquery.tablesorter.js" type="text/javascript"></script>
然后可以这样调用不着:

$(document).ready(function() { $("#large").tableSorter();});
现在点击表格的第一行head区域，你可以看到排序的效果，再次点击会按倒过来的顺序进行排列。

这个表格还可以加一些突出显示的效果，我们可以做这样一个隔行背景色效果:

$(document).ready(function() { $("#large").tableSorter({// Class names for striping supplyed as a array.  stripingRowClass: ['odd','even'],   stripRowsOnStartUp: true  // Strip rows on tableSorter init. });});
关于这个插件的更多例子和文档可以在 tablesorter首页找到.

几乎所有的特件都是这样用的:先include插件的js文件,然后在某些元素上使用插件定义的方法,当然也有一些参数选项是可以配置的

经常更新的插件列表可以从jQuery官方站 on the jQuery site找到.

当你更经常地使用jQury时,你会发现将你自己的代码打包成插件是很有用处的,它能方便地让你的公司或者其他人进行重用.下一章我们将谈到如何构建一个自己的插件.

七、Plug me:制作自己的插件 
写一个自己的jQuery插件是非常容易的,如果你按照下面的原则来做,可以让其他人也容易地结合使用你的插件.

为你的插件取一个名字,在这个例子里面我们叫它"foobar". 
创建一个像这样的文件:jquery.[yourpluginname].js,比如我们创建一个jquery.foobar.js 
创建一个或更多的插件方法,使用继承jQuery对象的方式,如: 
jQuery.fn.foobar = function() { // do something};可选的:创建一个用于帮助说明的函数,如: 
jQuery.fooBar = { height: 5, calculateBar = function() { ... }, checkDependencies = function() { ... }};你现在可以在你的插件中使用这些帮助函数了:

jQuery.fn.foobar = function() { // do something jQuery.foobar.checkDependencies(value); // do something else};可选的l:创建一个默认的初始参数配置,这些配置也可以由用户自行设定,如: 
jQuery.fn.foobar = function(options) { var settings = {  value: 5,  name: "pete",  bar: 655 }; if(options) {  jQuery.extend(settings, options); }};现在可以无需做任何配置地使用插件了,默认的参数在此时生效:

$("...").foobar();Or with some options:

$("...").foobar({ value: 123, bar: 9});如果你release你的插件, 你还应该提供一些例子和文档,大部分的插件都具备这些良好的参考文档.

现在你应该有了写一个插件的基础,让我们试着用这些知识写一个自己的插件.

很多人试着控制所有的radio或者checkbox是否被选中,比如:

$("input[@type='checkbox']").each(function() { this.checked = true; // or, to uncheck this.checked = false; // or, to toggle this.checked = !this.checked;});你可能想要把这个重写为一个插件,很直接地:

$.fn.check = function() { return this.each(function() {  this.checked = true; });};这个插件现在可以这样用:

$("input[@type='checkbox']").check();现在你应该还可以写出uncheck()和toggleCheck()了.但是先停一下,让我们的插件接收一些参数.




$.fn.check = function(mode) { 
    var mode = mode || 'on'; // if mode is undefined, use 'on' as default return 
    this.each(function() {  
    switch(mode) {  
       case 'on':   this.checked = true;   break;  
       case 'off':   this.checked = false;   break;  
       case 'toggle':   this.checked = !this.checked;   break;  
    } 
    });
};

这里我们设置了默认的参数,所以将"on"参数省略也是可以的,当然也可以加上"on","off", 或 "toggle",如:


$("input[@type='checkbox']").check();
$("input[@type='checkbox']").check('on');
$("input[@type='checkbox']").check('off');
$("input[@type='checkbox']").check('toggle');

如果有多于一个的参数设置会稍稍有点复杂,在使用时如果只想设置第二个参数,则要在第一个参数位置写入null.

从上一章的tablesorter插件用法我们可以看到,既可以省略所有参数来使用或者通过一个 key/value 对来重新设置每个参数.

作为一个练习,你可以试着将 第四部分 的功能重写为一个插件.这个插件的骨架应该是像这样的:


$.fn.rateMe = function(options) { 
 // instead of selecting a static container with $("#rating"),  //we now use the jQuery context 
var container = this;  
var settings = {  url: "rate.php"  // put more defaults here  // remember to put a comma (",") after each pair,   // but not after the last one! 
}; 
if(options) {  // check if options are present before extending the settings  
$.extend(settings, options); 
} 
 // ... // rest of the code // ...  
return this; // if possible, return "this" to not break the chain
});


如果你想做更好的javascript开发,建议你使用一个叫 FireBug的firefox插件. 它提供了断点调试(比alert强多了)、观察DOM变化等很多漂亮的功能

如果你还有未解决的问题，或者新的想法与建议，你可以使用jQuery的邮件列表 jQuery mailing list.

关于这个指南的任何事情，你可以写mail给作者或者发表评论在他的日志：blog.
]]> JavaScript/DOM escape、encodeURI和encodeURIComponent的区别 zhanghuiguoanlige@126.com http://dev.mo.cn/article_175.html 2009-1-3 9:35:00 http://dev.mo.cn/article_175.html
escape() 方法

MSDN JScript Reference中如是说：

The escape method returns a string value (in Unicode format) that contains the contents of [the argument]. All spaces, punctuation, accented characters, and any other non-ASCII characters are replaced with %xx encoding, where xx is equivalent to the hexadecimal number representing the character. For example, a space is returned as "%20."

鄙人译：escape方法以Unicode格式返回一个包含传入参数内容的string类型的值。 Escape方法会将传入参数中所有的空格、标点符号、重音字符以及其它任何非ASCII字符替换为%xx的编码形式，其中xx与其所表示的字符的16进制数表示形式相同。如空格字符的16进制表示形式为0x20，则此时xx应为20，即escape(‘ ’) 返回“%20”。

Mozilla Developer Core Javascript Guide中如是说：

The escape and unescape functions let you encode and decode strings. The escape function returns the hexadecimal encoding of an argument in the ISO Latin character set. The unescape function returns the ASCII string for the specified hexadecimal encoding value.

鄙人译：escape和unescape方法能够帮助你编码和解码字符串。escape方法对于ISO Latin字符集中的字符组成的参数，返回其16进制编码。相对应的，unescape方法则能将16进制编码形式的参数转化成为其ASCII码形式。



encodeURI()方法

MSDN JScript Reference中如是说：

The encodeURI method returns an encoded URI. If you pass the result to decodeURI, the original string is returned. The encodeURI method does not encode the following characters: ":", "/", ";", and "?". Use encodeURIComponent to encode these characters.

鄙人译：encodeURI方法返回一个经过编码的URI。如果将encodeURI方法的编码结果传递给decodeURI方法作参数，则能得到原始的未编码的字符串。需要注意到是encodeURI方法不编码如下字符":", "/", ";", and "?"。如果想要编码这些字符，请使用encodeURIComponent方法。

Mozilla Developer Core Javascript Guide中如是说：

Encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, or three escape sequences representing the UTF-8 encoding of the character.

鄙人译：通过将每个属于特定的字符集合的字符替换为一个、两个或者三个（为什么是“一个、两个或者三个”本人也没有搞懂，望高人赐教）使用UTF-8编码来表示这个字符的escape序列来编码一个URI。如 ~!@#$%^&*(){}[]=:/,;?+\'"\\ 将被替换为 ~!@#$%25%5E&*()%7B%7D%5B%5D=:/,;?+'%22%5C



encodeURIComponent()方法

MSDN JScript Reference中如是说：

The encodeURIComponent method returns an encoded URI. If you pass the result to decodeURIComponent, the original string is returned. Because the encodeURIComponent method encodes all characters, be careful if the string represents a path such as /folder1/folder2/default.html. The slash characters will be encoded and will not be valid if sent as a request to a web server. Use the encodeURI method if the string contains more than a single URI component.

鄙人译：encodeURIComponent方法返回一个编码过的URI。如果将encodeURIComponent方法的编码结果传递给encodeURIComponent方法作参数，则能得到原始的未编码的字符串。因为encodeURIComponent方法会编码所有的字符，所以如果待编码的字符串是用来表示一个路径（如/dir1/dir2/index.htm）时，就一定要小心使用了。‘/’符号会被其编码之后，将不再是一个有效的路径标识符，所以不能被web服务器正确地识别。当字符串包含一个单独的URI component(指?后面的请求参数)的时候，请使用此方法。

Mozilla Developer Core Javascript Guide中如是说：

Encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, or three escape sequences representing the UTF-8 encoding of the character.

鄙人译：通过将每个属于特定的字符集合的字符替换为一个、两个或者三个（为什么是“一个、两个或者三个”本人也没有搞懂，望高人赐教）使用UTF-8编码来表示这个字符的escape序列来编码一个URIComponent。



有什么区别？何时使用？

通过上面的介绍可以看出，MS的文档明显要比Mozilla详细、易懂一些，但是它们表达的都是一个意思。但是escape(), encodeURI()和 encodeURIComponent()有什么异同，它们分别适用于那种特定的情况呢？

escape方法并不编码字符+。而我们知道，在用户提交的表单字段中，如果有空格，则会被转化为+字符，而服务器解析的时候则会认为+号代表空格。由于这个缺陷，escape方法并不能正确地处理所有的非ASCII字符，你应当尽量避免使用escape方法，取而代之，你最好选择encodeURIComponent()方法。

escape()不编码的字符：@*/+

相对于使用escape方法，使用encodeURI方法会显得更专业一些。当你需要编码一整个URI的时候，你可以使用此方法，因为URI中的合法字符都不会被编码转换。需要注意到是字符’也是URI中的合法字符，所以也不会被编码转换。

encodeURI() 不编码的字符： ~!@#@{content}*()=:/,;?+'

encodeURIComponent方法在编码单个URIComponent（指请求参数）应当是最常用的。需要注意到是字符’也是URI中的合法字符，所以也不会被编码转换。

encodeURIComponent()不编码的字符： ~!*()'
 
]]> JavaScript/DOM 一个简单的JavaScript对象编程示例 zhanghuiguoanlige@126.com http://dev.mo.cn/article_166.html 2008-12-30 21:15:56 http://dev.mo.cn/article_166.html
    ȫ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>一个简单的JavaScript对象编程示例</title>
</head>
<body>
<script type ="text/javascript" >

function pig(Speed){           
        this.runSpeed=Speed;        
        this.Run=function(runTime){  
            return  runTime * this.runSpeed;
        };
}

var aPig=new pig("10");
document.write("我是一头小猪,我的速度是" + aPig.runSpeed + "公里/小时;我要开始跑步了....");
var runOver=aPig.Run(5);
document.write("跑了5小时,终于跑完了;我跑了" + runOver  + "公里!");
</script>

</body>
</html>


    ȫ
<script type="text/javascript">
var student={
    name:"anlige",
    course:{
        count:2,
        list:{
            english:80,
            chinese:90
        }
    },
    grade:function(){
        alert(student.course.list.english + student.course.list.chinese);
    }
};
student.grade();
</script>
]]> JavaScript/DOM 利用JQuery实现简单AJAX zhanghuiguoanlige@126.com http://dev.mo.cn/article_151.html 2008-10-29 17:00:46 http://dev.mo.cn/article_151.html jquery-1.2.6.pack.js
解压后,里面的jquery1.26.rar就有本文件，是压缩版

下面是具体代码

example.html文件内容
    ȫ
<html>
<head>
<title>实例</title>
</head>
<script language="javascript" src="jquery-1.2.6.pack.js"></script>
<script language="javascript" src="code.js"></script>
<body>
<div id="msg">
msg
</div>
</body>
</html>



code.js的内容

    ȫ
$(document).ready(function(){
        $("#msg").css({
                             "width":"800px",
                        "border":"1px #dddddd solid"
                             });
        $("#msg").ajaxStart(function(){$(this).html("请求中...")});
        $("#msg").hide().fadeIn("slow");
        $.ajax({
         type: "get",
         url: "http://dev.mo.cn",
         data:   "name=John&location=Boston",
         success: function(msg){$("#msg").html(msg).hide().fadeIn("slow");} 
                }); 
});
]]> JavaScript/DOM 滑动门效果(利用Table边框) zhanghuiguoanlige@126.com http://dev.mo.cn/article_148.html 2008-10-15 17:12:17 http://dev.mo.cn/article_148.html
    ȫ
<html>
<head>
<title>滑动门效果(利用Table边框)</title>
<style type="text/css">
.eTable {font-size:12px;color:#222222;width:300px;border:1px solid #333333;border-collapse: collapse;margin-bottom:5px;}
TD {padding:3px;border:1px #333333 solid;}
.eHead {font-weight:bold;}
.eCount {width:100px;}
.hiddenw {display:none;}
</style>
<script type="text/javascript">
function change(x,tid){
var obj;
var tTd;
        var i=0;
        for(i=1+(x-1)*3;i<=x*3;i++){
                obj=document.getElementById("div"+i);
                tTd=document.getElementById("t"+i);
                if(parseInt(tid)+(x-1)*3==i){
                        tTd.style.border="0";
                        obj.style.display="block";
                }else{       
                        tTd.style.border="1px #333333 solid";
                        obj.style.display="none";               
                }
        }
}
</script>
</head>
<body>
        <table class="eTable">
                <tr>
                        <td id="t1" class="eCount" onmouseover="change(1,1);">1</td>
                        <td id="t2" class="eCount" onmouseover="change(1,2);">2</td>
                        <td id="t3" class="eCount" onmouseover="change(1,3);">3</td>
                </tr>
                <tr>
                        <td colspan="3" style="border:0;">
                        <div id="div1" class="hiddenw">项目一</div>
                        <div id="div2" class="hiddenw">项目二</div>
                        <div id="div3" class="hiddenw">项目三</div>
                         </td>
                   </tr>
                </table>
        <table class="eTable">
                <tr>
                        <td id="t4" class="eCount" onmouseover="change(2,1);">1</td>
                        <td id="t5" class="eCount" onmouseover="change(2,2);">2</td>
                        <td id="t6" class="eCount" onmouseover="change(2,3);">3</td>
                </tr>
                <tr>
                        <td colspan="3" style="border:0;">
                        <div id="div4" class="hiddenw">项目4</div>
                        <div id="div5" class="hiddenw">项目5</div>
                        <div id="div6" class="hiddenw">项目6</div>
                         </td>
                   </tr>
                </table>
</body>
</html>
]]> JavaScript/DOM 类似MSN提示的页面效果 zhanghuiguoanlige@126.com http://dev.mo.cn/article_147.html 2008-10-14 20:37:57 http://dev.mo.cn/article_147.html
    ȫ
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Keywords" content="51windows.Net">
<META NAME="Author" CONTENT="haiwa">
<title>类似MSN提示的页面效果</title>
</head>

<body scroll=no>
看到右下角的提示了吗？如果没有看到，<button onclick=location.reload();>刷新</button>一下
<script language="JavaScript">
window.onload = getMsg;
window.onresize = resizeDiv;
window.onerror = function(){}
//短信提示使用(asilas添加)
var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0;
function getMsg()
{
  try{
  divTop = parseInt(document.getElementById("eMeng").style.top,10)
  divLeft = parseInt(document.getElementById("eMeng").style.left,10)
  divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
  divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
  docWidth = document.body.clientWidth;
  docHeight = document.body.clientHeight;
  document.getElementById("eMeng").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;// divHeight
  document.getElementById("eMeng").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth
  document.getElementById("eMeng").style.visibility="visible"
  objTimer = window.setInterval("moveDiv()",10)
  }
  catch(e){}
}

function resizeDiv()
{
  i+=1
  if(i>500) closeDiv()
  try{
  divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
  divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
  docWidth = document.body.clientWidth;
  docHeight = document.body.clientHeight;
  document.getElementById("eMeng").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10)
  document.getElementById("eMeng").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10)
  }
  catch(e){}
}

function moveDiv()
{
  try
  {
  if(parseInt(document.getElementById("eMeng").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
  {
  window.clearInterval(objTimer)
  objTimer = window.setInterval("resizeDiv()",1)
  }
  divTop = parseInt(document.getElementById("eMeng").style.top,10)
  document.getElementById("eMeng").style.top = divTop - 1
  }
  catch(e){}
}
function closeDiv()
{
  document.getElementById('eMeng').style.visibility='hidden';
  if(objTimer) window.clearInterval(objTimer)
}
</script>
<DIV id=eMeng style="BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX:99999; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 180px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 116px; BACKGROUND-COLOR: #c9d3f3">
  <TABLE style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" cellSpacing=0 cellPadding=0 width="100%" bgColor=#cfdef4 border=0>
  <TBODY>
    <TR>
      <TD style="FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #0f2c8c" width=30 height=24></TD>
      <TD style="FONT-WEIGHT: normal; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #1f336b; PADDING-TOP: 4px;PADDING-left: 4px" vAlign=center width="100%"> 短消息提示：</TD>
      <TD style="BACKGROUND-IMAGE: url(msgTopBg.gif); PADDING-TOP: 2px;PADDING-right:2px" vAlign=center align=right width=19><span title=关闭 style="CURSOR: hand;color:red;font-size:12px;font-weight:bold;margin-right:4px;" onclick=closeDiv() >×</span><!-- <IMG title=关闭 style="CURSOR: hand" onclick=closeDiv() hspace=3 src="msgClose.jpg"> --></TD>
    </TR>
    <TR>
      <TD style="PADDING-RIGHT: 1px; BACKGROUND-IMAGE: url(1msgBottomBg.jpg); PADDING-BOTTOM: 1px" colSpan=3 height=90>
        <DIV style="BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 12px; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%">您有<font color=#FF0000>1</font>封新短消息<BR><BR>
        <DIV align=center style="word-break:break-all"><a href="javascript:alert('你好')"><font color=#FF0000>点击查看短信</font></a></DIV

        </DIV>
      </TD>
    </TR>
  </TBODY>
  </TABLE>
</DIV>
</body>
</html>
]]> JavaScript/DOM Javascript拖动层 zhanghuiguoanlige@126.com http://dev.mo.cn/article_127.html 2008-9-10 9:13:45 http://dev.mo.cn/article_127.html
    ȫ
<html> 
<head> 
<style type='text/css'> 
<!-- 
body{font-size:12px;} 
a:visited{text-decoration:none;color:slategray;} 
a:hover{text-decoration:underline;color:slategray;} 
a:link{text-decoration:none;color:slategray;} 
--> 
</style> 
<script language=JScript> 
<!-- 
//可以打包为js文件; 
var x0=0,y0=0,x1=0,y1=0; 
var offx=6,offy=6; 
var moveable=false; 
var hover='orange',normal='#336699';//color; 
var index=10000;//z-index; 
//开始拖动; 
function startDrag(obj) 
{ 
if(event.button==1) 
{ 
//锁定标题栏; 
obj.setCapture(); 
//定义对象; 
var win = obj.parentNode; 
var sha = win.nextSibling; 
//记录鼠标和层位置; 
x0 = event.clientX; 
y0 = event.clientY; 
x1 = parseInt(win.style.left); 
y1 = parseInt(win.style.top); 
//记录颜色; 
normal = obj.style.backgroundColor; 
//改变风格; 
obj.style.backgroundColor = hover; 
win.style.borderColor = hover; 
obj.nextSibling.style.color = hover; 
sha.style.left = x1 + offx; 
sha.style.top  = y1 + offy; 
moveable = true; 
} 
} 
//拖动; 
function drag(obj) 
{ 
if(moveable) 
{ 
var win = obj.parentNode; 
var sha = win.nextSibling; 
win.style.left = x1 + event.clientX - x0; 
win.style.top  = y1 + event.clientY - y0; 
sha.style.left = parseInt(win.style.left) + offx; 
sha.style.top  = parseInt(win.style.top) + offy; 
} 
} 
//停止拖动; 
function stopDrag(obj) 
{ 
if(moveable) 
{ 
var win = obj.parentNode; 
var sha = win.nextSibling; 
var msg = obj.nextSibling; 
win.style.borderColor    = normal; 
obj.style.backgroundColor = normal; 
msg.style.color          = normal; 
sha.style.left = obj.parentNode.style.left; 
sha.style.top  = obj.parentNode.style.top; 
obj.releaseCapture(); 
moveable = false; 
alert('我的顶部位置：'+obj.parentNode.style.top+' 我的左边位置：'+obj.parentNode.style.left); 
} 
} 
//获得焦点; 
function getFocus(obj) 
{ 
if(obj.style.zIndex!=index) 
{ 
index = index + 2; 
var idx = index; 
obj.style.zIndex=idx; 
obj.nextSibling.style.zIndex=idx-1; 
} 
} 
//最小化; 
function min(obj) 
{ 
var win = obj.parentNode.parentNode; 
var sha = win.nextSibling; 
var tit = obj.parentNode; 
var msg = tit.nextSibling; 
var flg = msg.style.display=="none"; 
if(flg) 
{ 
win.style.height  = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2; 
sha.style.height  = win.style.height; 
msg.style.display = "block"; 
obj.innerHTML = "0"; 
} 
else 
{ 
win.style.height  = parseInt(tit.style.height) + 2*2; 
sha.style.height  = win.style.height; 
obj.innerHTML = "2"; 
msg.style.display = "none"; 
} 
} 
//创建一个对象; 
function xWin(id,w,h,l,t,tit,msg) 
{ 
index = index+2; 
this.id      = id; 
this.width  = w; 
this.height  = h; 
this.left    = l; 
this.top    = t; 
this.zIndex  = index; 
this.title  = tit; 
this.message = msg; 
this.obj    = null; 
this.bulid  = bulid; 
this.bulid(); 
} 
//初始化; 
function bulid() 
{ 
var str = "" 
+ " <div id=xMsg" + this.id + " " 
+ "style='" 
+ "z-index:" + this.zIndex + ";" 
+ "width:" + this.width + ";" 
+ "height:" + this.height + ";" 
+ "left:" + this.left + ";" 
+ "top:" + this.top + ";" 
+ "background-color:" + normal + ";" 
+ "color:" + normal + ";" 
+ "font-size:8pt;" 
+ "font-family:Tahoma;" 
+ "position:absolute;" 
+ "cursor:default;" 
+ "border:2px solid " + normal + ";" 
+ "' " 
+ "onmousedown='getFocus(this)'>" 
+ " <div " 
+ "style='" 
+ "background-color:" + normal + ";" 
+ "width:" + (this.width-2*2) + ";" 
+ "height:20;" 
+ "color:white;" 
+ "' " 
+ "onmousedown='startDrag(this)' " 
+ "onmouseup='stopDrag(this)' " 
+ "onmousemove='drag(this)' " 
+ "ondblclick='min(this.childNodes[1])'" 
+ ">" 
+ " <span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + " </span>" 
+ " <span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0 </span>" 
+ " <span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='ShowHide(\""+this.id+"\",null)'>r </span>" 
+ " </div>" 
+ " <div style='" 
+ "width:100%;" 
+ "height:" + (this.height-20-4) + ";" 
+ "background-color:white;" 
+ "line-height:14px;" 
+ "word-break:break-all;" 
+ "padding:3px;" 
+ "'>" + this.message + " </div>" 
+ " </div>" 
+ " <div id=xMsg" + this.id + "bg style='" 
+ "width:" + this.width + ";" 
+ "height:" + this.height + ";" 
+ "top:" + this.top + ";" 
+ "left:" + this.left + ";" 
+ "z-index:" + (this.zIndex-1) + ";" 
+ "position:absolute;" 
+ "background-color:black;" 
+ "filter:alpha(opacity=40);" 
+ "'> </div>"; 
document.body.insertAdjacentHTML("beforeEnd",str); 
} 
//显示隐藏窗口 
function ShowHide(id,dis){ 
var bdisplay = (dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):dis 
document.getElementById("xMsg"+id).style.display = bdisplay; 
document.getElementById("xMsg"+id+"bg").style.display = bdisplay; 
} 
//--> 
</script> 

<script language='JScript'> 
<!-- 
function initialize() 
{ 
var a = new xWin("1",160,200,200,200,"窗口1","xWin <br> A Cool Pop Div Window <br>Version:1.0 <br>2002-8-13"); 
var b = new xWin("2",240,200,100,100,"窗口2","Welcome to visited my personal website: <br> <a href=http://www14.brinkster.com/wildcity target=_blank>http://wildcity.126.com </a> <br>and u can also sign my guestbook at: <br> <a href=http://www14.brinkster.com/wildcity/gbook target=_blank>http://wildcity.126.com/gbook </a> <br> <br>thx!!! =)..."); 
var c = new xWin("3",200,160,250,50,"窗口3","Copyright by <a href='mailto:wildwind_zz@21cn.com'>Wildwind </a>!"); 
ShowHide("1","none");//隐藏窗口1 
} 
window.onload = initialize; 
//--> 
</script> 
</head> 
<base target="_blank"> 
<body onselectstart='return false' oncontextmenu='return false' > 
<a onclick="ShowHide('1',null);return false;" href="">窗口1 </a> 
<a onclick="ShowHide('2',null);return false;" href="">窗口2 </a> 
<a onclick="ShowHide('3',null);return false;" href="">窗口3 </a> 
</body> 
</html> 
]]> JavaScript/DOM XMLDOM对象方法详解 zhanghuiguoanlige@126.com http://dev.mo.cn/article_107.html 2008-8-11 4:59:32 http://dev.mo.cn/article_107.html  作   用
  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);
  -------------------------------------------------------------------------------------

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）；
  -------------------------------------------------------------------------------------
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);
 
 -------------------------------------------------------------------------------------
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)；
 




]]> JavaScript/DOM XMLDOM对象属性详解 zhanghuiguoanlige@126.com http://dev.mo.cn/article_106.html 2008-8-11 2:53:41 http://dev.mo.cn/article_106.html
作 用 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); 


]]> JavaScript/DOM 操作Xml数据的Cls_Person类说明 zhanghuiguoanlige@126.com http://dev.mo.cn/article_104.html 2008-8-10 3:06:50 http://dev.mo.cn/article_104.html Cls_Person类用来完成与联系人信息相关的各种操作,包括添加,修改和删除等等,它使用VBScript编写.Cls_Person包括Id,Name,Nick,Mobile,Tel,Email,QQ和Company属性,对应于XML文件中的Person节点.Cls_Person包括GetInfoFromXml,AddToXml,EditToXml和DeleteFormXml四个主要方法,分别完成获取信息,添加信息,修改信息和删除信息四个功能. 

Cls_Person的具体实现如下,
    ȫ
 
'*************************************************** 
' 说明：Person类 
' 作者：gwd 2002-11-06 
' 引用：pub/constpub.asp 
'*************************************************** 
Class Cls_Person 
Private m_intId ' Id,对应Person节点在Persons集合中的位置 
Private m_strName ' 姓名 
Private m_strNick ' 英文名 
Private m_strMobile ' 手机 
Private m_strTel ' 电话 
Private m_strEmail ' 电子邮件 
Private m_strQQ ' QQ号 
Private m_strCompany ' 所在公司 
Private m_strError ' 出错信息 
' 类初始化 
Private Sub Class_Initialize() 
　m_strError = "" 
　m_intId = -1 
End Sub 
' 类释放 
Private Sub Class_Terminate() 
　m_strError = "" 
End Sub 
'-----读写各个属性--------------------------- 
Public Property Get Id 
　Id = m_intId 
End Property 
Public Property Let Id(intId) 
　m_intId = intId 
End Property 
Public Property Get Name 
Name = m_strName 
End Property 
Public Property Let Name(strName) 
　m_strName = strName 
End Property 
Public Property Get Nick 
　Nick = m_strNick 
End Property 
Public Property Let Nick(strNick) 
　m_strNick = strNick 
End Property 
Public Property Get Mobile 
　Mobile = m_strMobile 
End Property 
Public Property Let Mobile(strMobile) 
　m_strMobile = strMobile 
End Property 
Public Property Get Tel 
　Tel = m_strTel 
End Property 
Public Property Let Tel(strTel) 
　m_strTel = strTel 
End Property 
Public Property Get Email 
　Email = m_strEmail 
End Property 
Public Property Let Email(strEmail) 
　m_strEmail = strEmail 
End Property 
Public Property Get QQ 
　QQ = m_strQQ 
End Property 
Public Property Let QQ(strQQ) 
　m_strQQ = strQQ 
End Property 
Public Property Get Company 
　Company = m_strCompany 
End Property 
Public Property Let Company(strCompany) 
　m_strCompany = strCompany 
End Property 
'----------------------------------------------- 
' 获取错误信息 
Public Function GetLastError() 
　GetLastError = m_strError 
End Function 
' 私有方法,添加错误信息 
Private Sub AddErr(strEcho) 
　m_strError = m_strError + "＜Div CLASS=""alert""＞" & strEcho & "＜/Div＞" 
End Sub 
' 清除错误信息 
Public Function ClearError() 
　m_strError = "" 
End Function 
' 从Xml中读取指定节点的数据,并填充各个属性 
' 需要首先设置Id 
Public Function GetInfoFromXml(objXmlDoc) 
　Dim objNodeList 
　Dim I 
　ClearError 
　If objXmlDoc Is Nothing Then 
　　GetInfoFromXml = False 
　　AddErr "Dom对象为空值" 
　　Exit Function 
　End If 
　If CStr(m_intId) = "-1" Then 
　　GetInfoFromXml = False 
　　AddErr "未正确设置联系人对象的ID属性" 
　　Exit Function 
　Else 
　　I = m_intId - 1 ' 要读取得节点位置 
　End If 
　' 选择并读取节点信息,赋予各个属性 
　Set objNodeList = objXmlDoc.getElementsByTagName("Person") 
　If objNodeList.length - m_intId ＞= 0 Then 
　　On Error Resume Next 
　　m_strName = objNodeList(I).selectSingleNode("Name").Text 
　　m_strNick = objNodeList(I).selectSingleNode("Nick").Text 
　　m_strMobile = objNodeList(I).selectSingleNode("Mobile").Text 
　　m_strTel = objNodeList(I).selectSingleNode("Tel").Text 
　　m_strEmail = objNodeList(I).selectSingleNode("Email").Text 
　　m_strQQ = objNodeList(I).selectSingleNode("QQ").Text 
　　m_strCompany = objNodeList(I).selectSingleNode("Company").Text 
　　GetInfoFromXml = True 
　Else 
　　GetInfoFromXml = False 
　　AddErr "获取联系信息发生错误" 
　　Set objNodeList = Nothing 
　　Exit Function 
　End If 
　Set objNodeList = Nothing 
End Function 
' 添加信息到XML文件中 
' 需要首先设置好要填充的属性 
Public Function AddToXml(objXmlDoc) 
　Dim objPerson, objNode 
　ClearError 
　If objXmlDoc Is Nothing Then 
　　AddToXml = False 
　　AddErr "Dom对象为空值" 
　　Exit Function 
　End If 
　' 创建Person节点 
　Set objPerson = objXmlDoc.createElement("Person") 
　objXmlDoc.documentElement.appendChild objPerson 
　' 创建各个子节点 
　'----------------------------------------------------- 
　Set objNode = objXmlDoc.createElement("Name") 
　objNode.Text = m_strName 
　objPerson.appendChild objNode 
　Set objNode = objXmlDoc.createElement("Nick") 
　objNode.Text = m_strNick 
　objPerson.appendChild objNode 
　Set objNode = objXmlDoc.createElement("Mobile") 
　objNode.Text = m_strMobile 
　objPerson.appendChild objNode 
　Set objNode = objXmlDoc.createElement("Tel") 
　objNode.Text = m_strTel 
　objPerson.appendChild objNode 
　Set objNode = objXmlDoc.createElement("Email") 
　objNode.Text = m_strEmail 
　objPerson.appendChild objNode 
　Set objNode = objXmlDoc.createElement("QQ") 
　objNode.Text = m_strQQ 
　objPerson.appendChild objNode 
　Set objNode = objXmlDoc.createElement("Company") 
　objNode.Text = m_strCompany 
　objPerson.appendChild objNode 
　'----------------------------------------------------- 
　Set objNode = Nothing 
　Set objPerson = Nothing 
　 On Error Resume Next 
　objXmlDoc.save Server.MapPath(C_XMLFILE) '保存XML文件 
　If Err.Number = 0 Then 
　　AddToXml = True 
　Else 
　　AddToXml = False 
　　AddErr Err.Description 
　End If 
End Function 
' 从XML文件中删除数据 
' 需要首先设置Id 
Public Function DeleteFromXml(objXmlDoc) 
　Dim objNodeList, objNode 
　ClearError 
　If objXmlDoc Is Nothing Then 
　　DeleteFromXml = False 
　　AddErr "Dom对象为空值" 
　　Exit Function 
　End If 
　If CStr(m_intId) = "-1" Then 
　　DeleteFromXml = False 
　　AddErr "未正确设置联系人对象的ID属性" 
　　Exit Function 
　End If 
　Set objNodeList = objXmlDoc.getElementsByTagName("Person") 
　If objNodeList.length - m_intId ＜ 0 Then 
　　DeleteFromXml = False 
　　AddErr "未找到相应的联系人" 
　　Set objNodeList = Nothing 
　　Exit Function 
　End If 
　On Error Resume Next 
　Set objNode = objXmlDoc.documentElement.removeChild(objNodeList(intId-1)) 
　If objNode Is Nothing Then 
　　DeleteFromXml = False 
　　AddErr "删除联系人失败" 
　　Set objNodeList = Nothing 
　　Exit Function 
　Else 
　　objXmlDoc.save Server.MapPath(C_XMLFILE) 
　End If 
　Set objNode = Nothing 
　Set objNodeList = Nothing 
　If Err.Number = 0 Then 
　　DeleteFromXml = True 
　Else 
　　DeleteFromXml = False 
　　AddErr Err.Description 
　End If 
End Function 
' 修改XML文件中的数据 
' 需要首先设置好Id 
Public Function EditToXml(objXmlDoc) 
　Dim objPersonList, objOldPerson, objNewPerson, objNode 
　ClearError 
　If objXmlDoc Is Nothing Then 
　　EditToXml = False 
　　AddErr "Dom对象为空值" 
　　Exit Function 
　End If 
　If CStr(m_intId) = "-1" Then 
　　EditToXml = False 
　　AddErr "未正确设置联系人对象的ID属性" 
　　Exit Function 
　End If 
　Set objPersonList = objXmlDoc.getElementsByTagName("Person") 
　If objPersonList.length - m_intId ＜ 0 Then 
　　DeleteFromXml = False 
　　AddErr "未找到相应的联系人" 
　　Set objPersonList = Nothing 
　　Exit Function 
　End If 
　Set objOldPerson = objPersonList(m_intId-1) ' 要修改的旧节点 
　Set objNewPerson = objXmlDoc.createElement("Person") ' 用来替换旧节点的新节点 
　Set objNode = objXmlDoc.createElement("Name") 
　objNode.Text = m_strName 
　objNewPerson.appendChild objNode 
　Set objNode = objXmlDoc.createElement("Nick") 
　objNode.Text = m_strNick 
　objNewPerson.appendChild objNode 
　Set objNode = objXmlDoc.createElement("Mobile") 
　objNode.Text = m_strMobile 
　objNewPerson.appendChild objNode 
　Set objNode = objXmlDoc.createElement("Tel") 
　objNode.Text = m_strTel 
　objNewPerson.appendChild objNode 
　Set objNode = objXmlDoc.createElement("Email") 
　objNode.Text = m_strEmail 
　objNewPerson.appendChild objNode 
　Set objNode = objXmlDoc.createElement("QQ") 
　objNode.Text = m_strQQ 
　objNewPerson.appendChild objNode 
　Set objNode = objXmlDoc.createElement("Company") 
　objNode.Text = m_strCompany 
　objNewPerson.appendChild objNode 
　On Error Resume Next 
　' 进行替换 
　Set objNode = objXmlDoc.documentElement.replaceChild(objNewPerson, objOldPerson) 
　If objNode Is Nothing Then 
　EditToXml = False 
　AddErr "修改联系人失败" 
　Set objOldPerosn = Nothing 
　Set objNewPerson = Nothing 
　Set objPersonList = Nothing 
　Exit Function 
Else 
　objXmlDoc.save Server.MapPath(C_XMLFILE) 
End If 
Set objOldPerson = Nothing 
Set objNewPerson = Nothing 
Set objPersonList = Nothing 
If Err.Number = 0 Then 
　EditToXml = True 
Else 
　EditToXml = False 
　AddErr Err.Description 
End If 
End Function 
End Class 



]]> JavaScript/DOM IE/Firefox兼容性汇总(JavaScript) zhanghuiguoanlige@126.com http://dev.mo.cn/article_82.html 2008-7-8 4:03:51 http://dev.mo.cn/article_82.html
1. document.form.item 问题
     (1)现有问题：
         现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行
     (2)解决方法：
         改用 document.formName.elements["elementName"]
     (3)其它
         参见 2

2. 集合类对象问题
     (1)现有问题：
         现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。
     (2)解决方法：
         改用 [] 作为下标运算。如：document.forms("formName") 改为 document.forms["formName"]。
         又如：document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
     (3)其它

3. window.event
     (1)现有问题：
         使用 window.event 无法在 MF 上运行
     (2)解决方法：
         MF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：
         原代码(可在IE中运行)：
             <input type="button" name="someButton" value="提交" onclick=""/>
             ...
             <script language="javascript">
                 function gotoSubmit() {
                     ...
                     alert(window.event);     // use window.event
                     ...
                 }
             </script>

         新代码(可在IE和MF中运行)：
             <input type="button" name="someButton" value="提交" onclick=""/>
             ...
             <script language="javascript">
                 function gotoSubmit(evt) {
                     evt = evt ? evt : (window.event ? window.event : null);
                     ...
                     alert(evt);              // use evt
                     ...
                 }
             </script>
         此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。

4. HTML 对象的 id 作为对象名的问题
     (1)现有问题
         在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
     (2)解决方法
         用 getElementById("idName") 代替 idName 作为对象变量使用。

5. 用idName字符串取得对象的问题
     (1)现有问题
         在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。
     (2)解决方法
         用 getElementById(idName) 代替 eval(idName)。

6. 变量名与某 HTML 对象 id 相同的问题
     (1)现有问题
         在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
     (2)解决方法
         在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
         此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。
     (3)其它
         参见 问题4

7. event.x 与 event.y 问题
     (1)现有问题
         在IE 中，event 对象有 x, y 属性，MF中没有。
     (2)解决方法
         在MF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。
         故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
         event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。

         如果要完全一样，可以稍麻烦些：
         mX = event.x ? event.x : event.pageX;
         然后用 mX 代替 event.x
     (3)其它
         event.layerX 在 IE 与 MF 中都有，具体意义有无差别尚未试验。


8. 关于frame
    (1)现有问题
          在 IE中 可以用window.testFrame取得该frame，mf中不行
    (2)解决方法
          在frame的使用方面mf和ie的最主要的区别是：
如果在frame标签中书写了以下属性：
<frame src="xx.htm" id="frameId" name="frameName" />
那么ie可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
ie： window.top.frameId或者window.top.frameName来访问这个window对象
mf： 只能这样window.top.frameName来访问这个window对象

另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容
关于frame和window的描述可以参见bbs的‘window与frame’文章
以及/test/js/test_frame/目录下面的测试
----adun 2004.12.09修改

9. 在mf中，自己定义的属性必须getAttribute()取得
10.在mf中没有   parentElement parement.children   而用
                parentNode parentNode.childNodes
    childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。
   一般可以通过node.getElementsByTagName()来回避这个问题。
    当html中节点缺失时，IE和MF对parentNode的解释不同，例如
    <form>
    <table>
         <input/>
    </table>
    </form>
    MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点

   MF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)

11.const 问题
   (1)现有问题:
      在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
   (2)解决方法:
      不使用 const ，以 var 代替。

12. body 对象
    MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在

13. url encoding
在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&
一般MF无法识别js中的&


14. nodeName 和 tagName 问题
   (1)现有问题：
      在MF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象
      有问题（具体情况没有测试，但我的IE已经死了好几次）。
   (2)解决方法：
      使用 tagName，但应检测其是否为空。

15. 元素属性
    IE下 input.type属性为只读，但是MF下可以修改


16. document.getElementsByName() 和 document.all[name] 的问题
   (1)现有问题：
      在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。


1,document.getElementById替代document.all（ie适用）
2,集合[]替代()（ie适用）
3,target替代srcElement;parentNode替代parentElement（parentNode ie适用）
4,node.parentNode.removeChild(node)替代removeNode(this)（ie适用）
5,有空白文本节点
6,无outerHTML属性
7,事件局部变量e替代事件全局变量event
8,e.button键值有别于event.button,只有3个键值而无组合键值
9,无ondrag事件
10,DOMMouseScroll替代onmousewheel;-e.detail替代event.wheelDelta
11,addEventListener替代attachEvent;removeEventListener替代detachEvent
12,e.preventDefault()替代event.returnValue=false;e.stopPropagation()替代event.cancelBubble=true
13,style.top、style.left等严格检查"px"单位（加"px" ie适用）
14,style="-moz-opacity:0.9"替代style="filter:alpha(opacity=90)";无其它filter
15,style.cursor="pointer"替代style.cursor="hand"（ie适用）
16,title替代alt（ie适用）
17,状态栏默认不可修改,需调整ff设置
18,内置绘图功能以canvas或者SVG替代vml
19,代码出错时经常不报错（想来也是ff的无奈之举吧,如果每个ie独有的表达方式换在它里面都报错的话,怕是报都报不过来吧）
20,对缓存的清理非常不好
注:标明“ie适用”者为通用性建议写法,未标明者在ie里不适用。 




以下所有IE指IE6.0

验证是否是IE浏览器(来之于google js) 

var agt=navigator.userAgent.toLowerCase();
var is_ie=(agt.indexOf("msie")!=-1 && document.all);
正式开始

事件委托方法

IE

document.body.onload = inject; //Function inject()在这之前已被实现

firefox

document.body.onload = inject();

有人说标准是：

document.body.onload=new Function('inject()');

在firefox无法取得event.srcElement

通过其他方式传递对象

if(isIE)
thistable.attachEvent("onmousedown",OnClickChangeTdBackColor);
//thistable.onmousedown=OnClickChangeTdBackColor;
else//deal firefox
{


for(var i=0;i<thistable.rows.length;i++)
{
var rowObj = thistable.rows[i];
for( var j=0;j<rowObj.cells.length;j++)
{
var cellObj = rowObj.cells[j];
cellObj.setAttribute("onmousedown","OnClickChangeTdBackColor(this)");
}
//alert(rowObj.cells[0].tagName);
}
}
这是来之 http://blog.joycode.com/lostinet/archive/2005/02/27/44999.aspx

在FireFox下编写事件处理函数是很麻烦的事.
因为FireFox并没有 window.event . 如果要得到 event 对象,就必须要声明时间处理函数的第一个参数为event.

所以为了兼容IE与FireFox,一般的事件处理方法为:
btn.onclick=handle_btn_click;
function handle_btn_click(evt)
{
if(evt==null)evt=window.event;//IE
//处理事件.
}
对于简单的程序,这不算麻烦.

但对于一些复杂的程序,某写函数根本就不是直接与事件挂钩的.如果要把event传进该参数,那么所有的方法都要把event传来传去..这简直就是噩梦.

下面介绍一个解决这个麻烦事的方法,与原理.

JScript中，函数的调用是有一个 func.caller 这个属性的.
例如 
function A()
{
B();
}
function B()
{
alert(B.caller);
}
如果B被A调用,那么B.caller就是A

另外,函数有一个arguments属性. 这个属性可以遍历函数当前执行的参数:
function myalert()
{
var arr=[];
for(var i=0;i
arr[i]=myalert.arguments[i];
alert(arr.join("-"));
}
alert("hello","world",1,2,3)
就能显示 hello-world-1-2-3
(arguments的个数与调用方有关,而与函数的参数定义没有任何关系)

根据这两个属性,我们可以得到第一个函数的event对象:
btn.onclick=handle_click;
function handle_click()
{
showcontent();
}
function showcontent()
{
var evt=SearchEvent();
if(evt&&evt.shiftKey)//如果是基于事件的调用,并且shift被按下
window.open(global_helpurl);
else
location.href=global_helpurl;
}
function SearchEvent()
{
func=SearchEvent.caller;
while(func!=null)
{
var arg0=func.arguments[0];
if(arg0)
{
if(arg0.constructor==Event) // 如果就是event 对象
return arg0;
}
func=func.caller;
}
return null;
}
这个例子使用了SearchEvent来搜索event对象. 其中 'Event' 是 FireFox 的 event.constructor .
在该例子运行时,
SearchEvent.caller就是showcontent,但是showcontent.arguments[0]是空.所以 func=func.caller 时,func变为handle_click .
handle_click 被 FireFox 调用, 虽然没有定义参数,但是被调用时,第一个参数就是event,所以handle_click.arguments[0]就是event !

针对上面的知识,我们可以结合 prototype.__defineGetter__ 来实现 window.event 在 FireFox 下的实现:

下面给出一个简单的代码.. 有兴趣的可以补充

if(window.addEventListener)
{
FixPrototypeForGecko();
}
function FixPrototypeForGecko()
{
HTMLElement.prototype.__defineGetter__("runtimeStyle",element_prototype_get_runtimeStyle);
window.constructor.prototype.__defineGetter__("event",window_prototype_get_event);
Event.prototype.__defineGetter__("srcElement",event_prototype_get_srcElement);
}
function element_prototype_get_runtimeStyle()
{
//return style instead...
return this.style;
}
function window_prototype_get_event()
{
return SearchEvent();
}
function event_prototype_get_srcElement()
{
return this.target;
}

function SearchEvent()
{
//IE
if(document.all)
return window.event;

func=SearchEvent.caller;
while(func!=null)
{
var arg0=func.arguments[0];
if(arg0)
{
if(arg0.constructor==Event)
return arg0;
}
func=func.caller;
}
return null;
}
</body></html>



firefox与IE(parentElement)的父元素的区别

因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.

IE
obj.parentElement
firefox
obj.parentNode


asp.net中UniqueID和clientID的区别

要使用document.getElementById 方法，则使用控件的时候要这样来作

"javascript:OnSelectSubCatalog(\""+subCatalog_drp.ClientID+"\","+catalogIDX+","+catID.ToString()+")";


调用Select元素的区别

移出一个选择项


--------------------------------------------------------------------------------


IE ：sel.options.remove(sel.selectedIndex); 
firefox ：

增加选择项：


--------------------------------------------------------------------------------

IE: subCatalog.add(new Option(text,value));

firefox: 
var opnObj = document.createElement("OPTION"); 
//opnObj.id = optionID;
opnObj.value = value; 
opnObj.text = text; 
subCatalog.appendChild(opnObj);
 




]]> JavaScript/DOM 一个简单的JavaScript对象编程示例 zhanghuiguoanlige@126.com http://dev.mo.cn/article_9.html 2008-3-28 6:49:34 http://dev.mo.cn/article_9.html
    ȫ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>一个简单的JavaScript对象编程示例</title>
</head>
<body>
<script type ="text/javascript" >

function pig(Speed){           
        this.runSpeed=Speed;        
        this.Run=function(runTime){  
            return  runTime * this.runSpeed;
        };
}

var aPig=new pig("10");
document.write("我是一头小猪,我的速度是" + aPig.runSpeed +"公里/小时;我要开始跑步了....");
var runOver=aPig.Run(5);
document.write("跑了5小时,终于跑完了;我跑了" + runOver + "公里!");
</script>

</body>
</html>
]]> JavaScript/DOM