引言：
大家都知道Ajax的之所以能如此丰富地实现，客户端脚本功不可没。而像Asp.Net Ajax这般庞大的工程，没有脚本类库的支撑是很难想象的。《Microsoft AJAX Library》就是Asp.Net Ajax的脚本类库。其实网上流行的脚本类库是很多的，也有一些是十分成功的，例如：prototype.js脚本类库。这些脚本类库封装了很多常用的功能，通过使用这些脚本类库我们能极大的提高工作效率。
这篇文章依赖于www.AspNetResources.com网站2007-01-24发布的《Microsoft AJAX Library》PDF版本。DflyingChen对此有完整而准确的翻译。
（文章地址：http://www.cnblogs.com/dflying/archive/2007/02/09/639638.aspx）
此篇文章面向的对象是那些可能连“prototype.js”都没有听说过，对“脚本类库”一词还很陌生的朋友。文章也只是举一些简单而便于理解的示例帮助他们更好的理解，所以可以说没有任何技术含量，与DflyingChen对英文原版的发现和翻译之功德相比，难及其十一。在此向DflyingChen献上敬意。
我个人对DOM的操作这块最感兴趣，所以我先从DomElement类讲起，如果给你带来不便，请谅解。
相关链接：
实例讲解《Microsoft AJAX Library》(1)：DomElement类
实例讲解《Microsoft AJAX Library》(2)：DomEvent类
正文：
准备工作：
1：安装 Asp.Net Ajax（引入AjaxControlToolkit名域）。
2：页面上拖个ToolkitScriptManager
说明：
标注有
图标的为静态方法，无须实例化对象即可使用。
1：getElementById(id,element)
这个太熟了吧。比以前的getElementById有所扩充，可以指定某个元素容器范围内。看《DomElement 示例页面》例子中的yzy_getElementById函数（为了防止同名误解，我的自建函数均有“yzy_”前缀）。第一次alert是只有id参数的时候，第二alert是txtSameFather容器内的txtSameID的value值。
2：$get(id,element)
其实就是Sys.UI.DomElement.getElementById(id,element)的简写形式。没有区别。这让我想到了prototype.js脚本库中的”$”函数，个人感觉那个也很强。如果页面上有多个相同的id会返回object数组。
具体使用请参看《DomElement 示例页面》中的yzy_$get函数。
3：addCssClass(element,className)
网页外观设置终于不用那么麻烦了。呵呵。作用和prototype.js中的addClassName类似。
不过说，看《DomElement 示例页面》中的yzy_ addCssClass函数。
4：containsCssClass(element,className)
判断element元素是否使用了className样式class。
具体使用请参看《DomElement 示例页面》中的yzy_containsCssClass函数。
5：removeCssClass()(element,className)
从element元素中移除className样式class。如果没有此样式则什么也不做。
具体使用请参看《DomElement 示例页面》中的yzy_ removeCssClass函数。
6：toggleCssClass(element,className)
Toggle是个好东西，不用你再if……else……的判断了，本身就是个奇偶开关。是真就让它假，是假就让它真。
toggleCssClass的作用是，判断element元素是否应用了className样式class。如果用了，就去掉，如果没有用就给它加上。
具体使用请参看《DomElement 示例页面》中的yzy_ toggleCssClass函数。
7：getLocation(element)
取得element元素相对与浏览器左上角的绝对位置。
样式表中position是个比较绕人的概念。如果你对这个概念还不是特别清楚，我建议你先看篇文章将这个概念搞清楚——《彻底弄懂CSS盒子模式四(绝对定位和相对定位)》
具体使用请参看《DomElement 示例页面》中的yzy_ getLocation函数。
8：setLocation(element,x,y)
设置元素的位置，这个位置是指相对它最近的，且设置了postion样式的祖先元素。这句话的确比较饶人。所以你要使用这个东西，必须先搞懂position这个概念，不然会出现你意料之外现象。
具体使用请参看《DomElement 示例页面》中的yzy_ setLocation函数。
9：getBounds(element)
返回元素的绝对位置以及它“盒装模型”模型的长和宽。返回值对象保护下面的属性：
x,y：取得element元素相对与浏览器左上角的绝对位置。作用和getLocation一样。
width：元素“盒装模型”的宽度。包含border和padding等部分
height：元素“盒装模型”的长度。包含border和padding等部分
如果你对“盒装模型”不是很理解的话，请阅读一下这篇文章：《彻底弄懂CSS盒子模式一(DIV布局快速入门)》
具体使用请参看《DomElement 示例页面》中的yzy_ getBounds函数。
《DomElement 示例页面》源代码：
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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 runat="server">
<title>DomElement 示例页面</title>
<style type="text/css">
#divSameFather{
width:200px;
height:300px;
border:1px solid red;
margin:10px 0 200px 0;
positio:relative;
}
.cssRedFont{
color:red;
}
.cssGreenFont{
color:green;
}
</style>
<script type="text/javascript" language="javascript">
function yzy_getElementById(){
var library;
library=Sys.UI.DomElement;
var divFather=library.getElementById("divSameFather");
var txtTest=library.getElementById("txtSameID");
alert(txtTest.value);
txtTest=library.getElementById("txtSameID",divFather); //指定了容器范围
alert(txtTest.value);
}
function yzy_$get(){
var divFather=$get("divSameFather");
var txtTest=$get("txtSameID");
alert(txtTest.value);
txtTest=$get("txtSameID",divFather); //指定了容器范围
alert(txtTest.value);
}
function yzy_addCssClass(){
var library;
library=Sys.UI.DomElement;
var txtTest=$get("txtSameID");
library.addCssClass(txtTest,"cssRedFont");
}
function yzy_containsCssClass(){
var library;
library=Sys.UI.DomElement;
var txtTest=$get("txtSameID");
var iscontainsCssClass = library.containsCssClass(txtTest,"cssRedFont");
alert(iscontainsCssClass);
}
function yzy_removeCssClass(){
var library;
library=Sys.UI.DomElement;
var txtTest=$get("txtSameID");
library.removeCssClass(txtTest,"cssRedFont");
}
function yzy_toggleCssClass(){
var library;
library=Sys.UI.DomElement;
var txtTest=$get("txtSameID");
library.toggleCssClass(txtTest,"cssRedFont");
}
function yzy_getLocation(){
var library;
library=Sys.UI.DomElement;
var txtTest=$get("txtSameID");
var position=library.getLocation(txtTest);
alert("X:" + position.x + " Y:" + position.y);
}
function yzy_setLocation(){
var library;
library=Sys.UI.DomElement;
var divFather=library.getElementById("divSameFather");
txtTest_inside=library.getElementById("txtSameID",divFather); //指定了容器范围
library.setLocation(txtTest_inside,50,100);
}
function yzy_getBounds(){
var library;
library=Sys.UI.DomElement;
var txtTest=$get("txtSameID");
txtTest=library.getElementById("txtSameID"); //指定了容器范围
boundsText=library.getBounds(txtTest);
alert("X:" + boundsText.x + " Y:" + boundsText.y +"\n" + "width：" + boundsText.width + " height：" + boundsText.height);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<input id="txtSameID" type="text" value="outSideInput" />
<div id="divSameFather">
<input id="txtSameID" type="text" value="inSideInput"/>
</div>
<input id="Button1" type="button" value="getElementById" onclick="yzy_getElementById();" />
<input id="Button2" type="button" value="$get" onclick="yzy_$get();" />
<input id="Button3" type="button" value="addCssClass" onclick="yzy_addCssClass();" />
<input id="Button4" type="button" value="containsCssClass" onclick="yzy_containsCssClass();" />
<input id="Button5" type="button" value="removeCssClass" onclick="yzy_removeCssClass();" />
<input id="Button6" type="button" value="toggleCssClass" onclick="yzy_toggleCssClass();" />
<hr/>
<input id="Button7" type="button" value="getLocation" onclick="yzy_getLocation();" />
<input id="Button8" type="button" value="setLocation" onclick="yzy_setLocation();" />
<input id="Button9" type="button" value="getBounds" onclick="yzy_getBounds();" />
</form>
</body>
</html>
keyword:Microsoft AJAX Library,DomElement,ajax DomElement类,脚本类库,javascript类库