Microsoft Asp.Net Ajax框架入门(3) 操作DOM元素
来源:互联网 发布:iscroll.js官网 编辑:程序博客网 时间:2024/06/15 21:30
VS2008、C# 3.0
Asp.Net Ajax Core Library提供了丰富的客户端Javascript扩展,本篇主要提到的是它对操作页面DOM元素的若干功能扩展。这些扩展,可以让我们可以更方便的访问页面element,定制event handler,并且有效的隔离了不同浏览器的差异。
完成此功能的是,在Sys.UI名称控件下的两个类:Sys.UI.DomElement、Sys.UI.DomEvent
1. Sys.UI.DomElement
Sys.UI.DomElement.getElementById(String id, element)
获取页面元素对象,等价于$get()
element参数表示限定在该element的子节点中查找,如果没有找到则返回null
Sys.UI.DomElement.getLocation(element)
获得页面元素相对于窗体或frame的位置 x,y
Sys.UI.DomElement.setLocation(element, number x, number y)
设置element的位置,此位置跟parent node有关,如果parent node的position设置为absolute或relative,则此位置为相对于parent node的位置,否则为相对于窗体或frame的位置
Sys.UI.DomElement.getBounds(element)
获得element的边界信息
Sys.UI.DomElement.addCssClass(element, String className)
给element添加css class
Sys.UI.DomElement.removeCssClass(element, String className)
移除element的css class
Sys.UI.DomElement.toggleCssClass(element, String className)
如果element已有该css class则移除,否则添加
Sys.UI.DomElement.containsCssClass(element, string className)
判断element是否有该css class
2. Sys.UI.DomEvent
Sys.UI.DomElement.addHandler(element, String eventName, Function handler)
等价于 $addHandler
订阅事件处理函数,传递一个Sys.UI.DomEvent实例参数evt,通过这个evt参数,可以获得触发该事件的若干信息
Sys.UI.DomElement.removeHandler(element, string eventName, Function handler)
等价于 $removeHandler
移除事件处理函数
Sys.UI.DomElement.addHandlers(element, object events, handlerOwner)
应该怎么说?批量订阅事件处理方法
Sys.UI.DomElement.clearHandlers(element)
就是批量移除所有事件订阅
注:图片取自Asp.Net Ajax In Action
Asp.Net Ajax Core Library提供了丰富的客户端Javascript扩展,本篇主要提到的是它对操作页面DOM元素的若干功能扩展。这些扩展,可以让我们可以更方便的访问页面element,定制event handler,并且有效的隔离了不同浏览器的差异。
完成此功能的是,在Sys.UI名称控件下的两个类:Sys.UI.DomElement、Sys.UI.DomEvent
1. Sys.UI.DomElement
Sys.UI.DomElement.getElementById(String id, element)
获取页面元素对象,等价于$get()
element参数表示限定在该element的子节点中查找,如果没有找到则返回null
var o = Sys.UI.DomElement.getElementById("txtUserName");
o.value = "guozhijian";
o.value = "guozhijian";
Sys.UI.DomElement.getLocation(element)
获得页面元素相对于窗体或frame的位置 x,y
var location = Sys.UI.DomElement.getLocation($get("txtUserName"));
var l = location.x;
var t = location.y;
var l = location.x;
var t = location.y;
Sys.UI.DomElement.setLocation(element, number x, number y)
设置element的位置,此位置跟parent node有关,如果parent node的position设置为absolute或relative,则此位置为相对于parent node的位置,否则为相对于窗体或frame的位置
Sys.UI.DomElement.setLocation($get("txtUserName"), 0, 0);
Sys.UI.DomElement.getBounds(element)
获得element的边界信息
var b = Sys.UI.DomElement.getBounds($get("txtUserName"));
var height = b.height;
var width = b.width;
var x = b.x;
var y = b.y;
var height = b.height;
var width = b.width;
var x = b.x;
var y = b.y;
Sys.UI.DomElement.addCssClass(element, String className)
给element添加css class
<style type="text/css">
.flatBorder { border:solid 1px #FF0000; }
</style>
.flatBorder { border:solid 1px #FF0000; }
</style>
Sys.UI.DomElement.addCssClass($get("txtUserName"), "flatBorder");
Sys.UI.DomElement.removeCssClass(element, String className)
移除element的css class
Sys.UI.DomElement.toggleCssClass(element, String className)
如果element已有该css class则移除,否则添加
Sys.UI.DomElement.containsCssClass(element, string className)
判断element是否有该css class
2. Sys.UI.DomEvent
Sys.UI.DomElement.addHandler(element, String eventName, Function handler)
等价于 $addHandler
订阅事件处理函数,传递一个Sys.UI.DomEvent实例参数evt,通过这个evt参数,可以获得触发该事件的若干信息
Sys.UI.DomEvent.addHandler($get("btnCommit"),"mousedown",btnCommitMouseDown);
function btnCommitMouseDown(evt) {
}
function btnCommitMouseDown(evt) {
}
Sys.UI.DomElement.removeHandler(element, string eventName, Function handler)
等价于 $removeHandler
移除事件处理函数
Sys.UI.DomEvent.removeHandler($get("btnCommit"),"mousedown",btnCommitMouseDown);
Sys.UI.DomElement.addHandlers(element, object events, handlerOwner)
应该怎么说?批量订阅事件处理方法
Sys.UI.DomEvent.addHandlers($get("btnCommit"), {"click":btnCommitClick, "keypress":btnCommitKeyPress});
function btnCommitClick(evt) {
alert(evt.type);
}
function btnCommitKeyPress(evt) {
alert(evt.type);
}
function btnCommitClick(evt) {
alert(evt.type);
}
function btnCommitKeyPress(evt) {
alert(evt.type);
}
Sys.UI.DomElement.clearHandlers(element)
就是批量移除所有事件订阅
注:图片取自Asp.Net Ajax In Action
- Microsoft Asp.Net Ajax框架入门(3) 操作DOM元素
- Microsoft Asp.Net Ajax框架入门(1) 初览
- Microsoft Asp.Net Ajax框架入门(8) 枚举
- Microsoft Asp.Net Ajax框架入门(9) 事件
- Microsoft Asp.Net Ajax框架入门(10) ScriptManager, UpdatePanel, Timer
- Microsoft Asp.Net Ajax框架入门(13) PageRequestManager
- Microsoft Asp.net Ajax 框架介绍
- Microsoft Asp.Net Ajax框架入门(2) 页面的客户端生命周期
- Microsoft Asp.Net Ajax框架入门(4) 订阅事件处理函数并传递参数
- Microsoft Asp.Net Ajax框架入门(5) Object类型、String类型、Array类型
- Microsoft Asp.Net Ajax框架入门(6) Debugging and Typed Errors
- Microsoft Asp.Net Ajax框架入门(7) 名称空间、类、继承、接口
- Microsoft Asp.Net Ajax框架入门(11) 调用内部Web Services
- Microsoft Asp.Net Ajax框架入门(12) 了解异步通信层
- AJAX入门---DOM操作HTML
- AJAX入门---DOM操作HTML
- asp.net Ajax框架
- ASP.NET AJAX入门
- 行集不支持反向提取
- 小心题为:好久不见啦! 的邮件传播Trojan-PSW.Win32.Magania
- javascript cookies 存、取、删除实例
- Microsoft Asp.Net Ajax框架入门(2) 页面的客户端生命周期
- Windows API 函数大全
- Microsoft Asp.Net Ajax框架入门(3) 操作DOM元素
- jBPM-JPDL v3.2环境部署——发布到Tomcat + MySQL
- Microsoft Asp.Net Ajax框架入门(4) 订阅事件处理函数并传递参数
- Microsoft Asp.Net Ajax框架入门(5) Object类型、String类型、Array类型
- .NET 2.0 中TextBox只读时在客户端赋值后的取值问题(转)
- .NET 2.0 中TextBox只读时在客户端赋值后的取值问题(转)
- 不可不知的计算机领域的国际组织
- Error - cannot open input file /postproc/nlscfg.inf 错误解决
- 爱E聚合桌面