Ajax学习笔记(2)DOM操作
2009-06-18 11:39 key_sky 阅读(359) 评论(0) 收藏 举报一．DomElement
1.addCssClass:为元素添加相应的css样式.
Sys.UI.DomElement.addCssClass(element,className);
2.containsCssClass:判断元素是否包含相应的css样式，返回true,false
var b=Sys.UI.DomElement.containsCssClass(element,className);
3.getBounds:获取元素的边界信息，返回json对象，包括x(x轴坐标),y(y轴坐标),Height(高度)，Width(宽度)
var b=Sys.UI.DomElement.getBounds(element);
var x=b.x;
var y=b.y;
var w=b.Width;
var h=b.Height;
4.getElementByID:从元素的子节点中寻找Dom元素。若不指定元素则从Document开始搜索
var b=Sys.UI.DomElement.getElementByID(id,element);
缩写为$get(id,element);
5.getLocation:获取元素的位置信息，返回json对象，包括x(x轴坐标),y(y轴坐标)
var b=Sys.UI.DomElement.getLocation(element);
var x=b.x;
var y=b.y;
6.removeCssClass:从元素中移除相应的css样式
Sys.UI.DomElement.removeCssClass(element.className);
7.setLocation:为元素设置x,y轴坐标
Sys.UI.DomElement.setLocation(element,x,y);
8.toggleCssClass:如果元素不包含相应的css样式，则添加，如果有则移除。
Sys.UI.DomElement.toggleCssClass(element,className);
二．DomEvent
一.Methods
1.DomEvent:获取Dom事件
var d=new Sys.UI.DomEvent(domObject);
2.addHandler:为Dom元素添加指定事件的指定函数
Sys.UI.DomEvent.addHandler(element,eventName,handler);可简写为
$addHandler(element,eventName,handle);
3.addHandlers：为Dom元素添加一系列事件的指定函数
Sys.UI.DomEvent.addHandlers(elment,events,handlerowner);可简写为
$addHandlers(element,events,handlerowner);
4.clearHandlers:移除Dom元素中所有通过addHandler和addHandlers方法添加的函数
Sys.UI.DomEvent.clearHandlers(element);可简写为$clearHandlers(element);
5.preventDefault:阻止执行Dom元素的默认事件处理函数
6.removeHandler:为Dom元素移除指定的事件处理函数
Sys.UI.DomEvent.removeHandler(element,eventName,handler);可简写为
$removeHandler(element,eventName,handler)
7.stopPropagation:阻止Dom元素的事件冒泡传递给父级元素
二.Properties
1.altKey:事件执行时键盘是否按下了”Alt”键
2.button:事件执行时鼠标按下的是哪个键，返回枚举类型
3.clientX:事件执行时鼠标指针的横坐标
4.clientY:事件执行时鼠标指针的纵坐标
5.ctrlKey:事件执行时剪片是否按下了“Ctrl”键
6.offsetX:事件执行时鼠标指针相对操作的Dom元素的横坐标
7.offsetY:事件执行时鼠标指针相对操作的Dom元素的纵坐标
8.screenX:事件执行时鼠标指针相对用户的屏幕的横坐标
9.screenY:事件执行时鼠标指针相对用户的屏幕的纵坐标
10.shiftKey:事件执行时键盘是否按下了“Shift”键
11.target:执行事件的对象
12.type:事件的类型
DomElement.aspx:
Code<%@ Page Language="C#" %>
<!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">
.redbgclass
{
background-color:Red;
}
.bluebgclass
{
background-color:Blue;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<div id="divDomelement">DomElement元素</div>
<div id="divLable"></div>
<input id="btnaddcss" type="button" onclick="return onaddcss_click()" value="AddCss" />
<input id="togglecss" type="button" onclick="return ontogglecss_click()" value="toggleCss" />
<input id="containcss" type="button" onclick="return oncontaincss_click()" value="containcss" />
<input id="getlocation" type="button" onclick="return ongetlocation_click()" value="getlocation" />
<input id="setlocation" type="button" onclick="return onsetlocation_click()" value="setlocation" />
<script type="text/javascript">
var divDom = $get("divDomelement");
//从元素的子节点中寻找Dom元素。若不指定元素则从Document开始搜索
var divLable=$get("divLable");
function onaddcss_click() {
//为元素添加相应的css样式
Sys.UI.DomElement.addCssClass(divDom,"redbgclass");
}
function ontogglecss_click() {
//如果元素不包含相应的css样式，则添加，如果有则移除。
Sys.UI.DomElement.toggleCssClass(divDom,"redbgclass");
}
function oncontaincss_click() {
//判断元素是否包含相应的css样式，返回true,false。
var b=Sys.UI.DomElement.containsCssClass(divDom,"redbgclass");
divLable.innerHTML=b;
}
function ongetlocation_click() {
//获取元素的边界信息，返回json对象，包括x(x轴坐标),y(y轴坐标),Height(高度)，Width(宽度)
var location=Sys.UI.DomElement.getBounds(divDom);
var x=location.x;
var y=location.y;
var width=location.width;
var height=location.height;
divLable.innerHTML=String.format("Location x:{0},y:{1},height:{2},width:{3}",x,y,height,width);
}
function onsetlocation_click() {
//为元素设置x,y轴坐标
Sys.UI.DomElement.setLocation(divDom, 200, 200);
}
</script>
</form>
</body>
</html>
Code<%@ Page Language="C#" %>
<!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>DomEvent</title>
<style type="text/css">
#selectDomEvent div
{
border:1px solid black;
padding:3px;
cursor:pointer;
width:80px;
float:left;
margin:1px 4px;
}
.hover
{
background-color:Green;
}
.click
{
background-color:Red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<input id="button1" type="button" value="Click Me" />
<span id="divDomEvent"></span>
<div id="selectDomEvent">
<div>option1</div>
<div>option2</div>
<div>option3</div>
<div>option4</div>
</div>
<div id="divvalue"></div>
<script type="text/javascript">
var selectoptions=new Array();
Sys.UI.DomEvent.addHandler($get("button1"),"click",getDomEventValue)
//为Dom元素添加指定事件的指定函数
function getDomEventValue(eventElement){
$get("divDomEvent").innerHTML="altKey = "+eventElement.altKey+"</br>";
$get("divDomEvent").innerHTML+="button = "+eventElement.button+"</br>";
$get("divDomEvent").innerHTML+="clientX = "+eventElement.clientX+"</br>";
$get("divDomEvent").innerHTML+="clientY = "+eventElement.clientY+"</br>";
$get("divDomEvent").innerHTML+="ctrlKey = "+eventElement.ctrlKey+"</br>";
$get("divDomEvent").innerHTML+="offsetX = "+eventElement.offsetX+"</br>";
$get("divDomEvent").innerHTML+="offsetY = "+eventElement.offsetY+"</br>";
$get("divDomEvent").innerHTML+="screenX = "+eventElement.screenX+"</br>";
$get("divDomEvent").innerHTML+="screenY = "+eventElement.screenY+"</br>";
$get("divDomEvent").innerHTML+="shiftKey = "+eventElement.shiftKey+"</br>";
$get("divDomEvent").innerHTML+="target = "+eventElement.target.id+"</br>";
$get("divDomEvent").innerHTML+="type = "+eventElement.type+"</br>";
//altKey:事件执行时键盘是否按下了”Alt”键
//button:事件执行时鼠标按下的是哪个键，返回枚举类型
//clientX:事件执行时鼠标指针的横坐标
//clientY:事件执行时鼠标指针的纵坐标
//ctrlKey:事件执行时剪片是否按下了“Ctrl”键
//offsetX:事件执行时鼠标指针相对操作的Dom元素的横坐标
//offsetY:事件执行时鼠标指针相对操作的Dom元素的纵坐标
//screenX:事件执行时鼠标指针相对用户的屏幕的横坐标
//screenY:事件执行时鼠标指针相对用户的屏幕的纵坐标
//shiftKey:事件执行时键盘是否按下了“Shift”键
//target:执行事件的对象
//type:事件的类型
}
function pageLoad(){
var childnodes=$get("selectDomEvent").childNodes;
for(var index=0;index<childnodes.length;++index)
{
var node=childnodes[index];
Sys.UI.DomEvent.clearHandlers(node);
//移除Dom元素中所有通过addHandler和addHandlers方法添加的函数
Sys.UI.DomEvent.addHandlers(node,
{
mouseover:mouseoverstyle,
mouseout:mouseoutstyle,
click:clickstyle
}
);
//为Dom元素添加一系列事件的指定函数
}
}
function mouseoverstyle(){
if(!Sys.UI.DomElement.containsCssClass(this,"click")){
Sys.UI.DomElement.addCssClass(this,"hover");
}
}
function clickstyle(){
Sys.UI.DomElement.toggleCssClass(this,"click");
if(Sys.UI.DomElement.containsCssClass(this,"click")){
if(!Array.contains(selectoptions,this.innerHTML)){
Array.add(selectoptions,this.innerHTML);
}
}
else{
Array.remove(selectoptions,this.innerHTML);
}
var builder=new Sys.StringBuilder();
for(var index=0;index<selectoptions.length;++index)
{
builder.append(selectoptions[index]+",");
}
$get("divvalue").innerHTML=builder.toString();
}
function mouseoutstyle(){
if(!Sys.UI.DomElement.containsCssClass(this,"click")){
Sys.UI.DomElement.removeCssClass(this,"hover");
}
}
</script>
</form>
</body>
</html>
点击click me按钮：
鼠标移动选择option:
浙公网安备 33010602011771号