Ajax学习笔记(2)DOM操作

最新推荐文章于 2022-10-24 09:08:40 发布
最新推荐文章于 2022-10-24 09:08:40 发布
阅读量461 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wendykeysky/article/details/22397379
版权

一．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 >

点击AddCss按钮：

点击toggleCss按钮：元素背景如果已经是红色则变成白色，否则变为红色

点击ContainCss按钮：

点击getlocation按钮：

点击setlocation按钮：

DomEvent.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>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:

wendy_soft
关注
【AJAX进阶】--AJAX与DOM网页程序构建高手
航帆远洋
03-08 3752
上篇文章对AJAX的运行机制进行了解读，它是一种异步的JavaScript在执行请求时程序仍能够操作页面上的其他元素，相对于传统的网页（要等待上一次操作完成后才能进行下面的操作）增加了用户的体验度。另外AJAX的在如今常应用到构建网页应用程序中，如我们常见的网页Ps，GoogleMap等。
ajax与DOM的使用,利用Ajax操作DOM
weixin_29828857的博客
08-05 745
当然，这里已经假设你了解什么是DOM了。DOM代码中最常用的任务就是在页面的 DOM 树中导航。比方说，可以通过其“id” 属性定位一个 form，然后开始处理那个 form中内嵌的元素和文本。其中可能包含文字说明、输入字段的标签、真正的input 元素，以及其他 HTML 元素(如 img)和链接(a 元素)。DOM 节点的属性主要有：nodeName提供节点的名称nodeValue提供节点的 ...
掌握 Ajax 之操纵 DOM
吾欲乘风
05-17 2006
上一篇中 Brett 介绍了文档对象模型(DOM)，它的元素在幕后定义了 Web 页面。这一期文章中他将进一步探讨 DOM。了解如何创建、删除和修改 DOM 树的各个部分，了解如何实现网页的即时更新!（注意，下面的讨论以上一篇文章 “利用 DOM 进行 Web 响应” 为基础，如果没有阅读过那一期，请在继续阅读之前首先阅读上一篇文章。）　　如果阅读过本系列的上一篇文章，那么您就非常清楚当 We
Ajax与DOM操作
zgqtxwd的专栏
05-01 583
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
AJAX入门---DOM操作HTML
持之以恒方能成功....
08-05 1171
文件对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。
javascript学习基础笔记之DOM对象操作
01-19
DOM操作在JavaScript中扮演着至关重要的角色，无论是动态更新页面内容、执行复杂的用户交互，还是实现Ajax异步通信，都离不开对DOM的理解和熟练运用。因此，深入学习DOM对象和操作是每个前端开发者必备的技能之一。
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
01-21
摘要：本节补充ajax学习笔记1中 第二种方式：使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象 在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍，本节主要介绍需要修改的...
jQuery学习笔记[1] jQuery中的DOM操作
12-11
这篇学习笔记主要探讨了DOM的三个方面：DOM Core、HTML-DOM和CSS-DOM，并且介绍了jQuery如何简化这些操作。 1. DOM Core是DOM的基础部分，它定义了一种标准接口，使得任何支持DOM的语言（如JavaScript）都能处理...
JavaScript学习笔记之DOM基础 2.4
01-19
因此，在网页前端开发中，DOM的存在，无疑是为表现层、行为层甚至内容层面的连接提供了一个绝佳的API，成为热门的Ajax应用中不可或缺的组成部分。 一、平稳退化 1、概念 早期，在未使用JavaScript之前，网页中的内容...
jquery中ajax学习笔记3
10-28
### jQuery中AJAX的学习笔记3 本部分的知识点主要集中在使用jQuery封装的AJAX方法来接收服务器端以XML格式返回的数据。在这一阶段的学习中，我们假设XML数据的接收是在已有的Web应用环境下进行，其中包括服务器端和...
【Ajax】DOM基础及DOM操作HTML
lyn
09-23 688
DOM的概念     DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。就是HTML页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。  DOM对象
ajax——dom基础
YQAG
06-29 2309
javascript中dom实现可以使我们在ajax中通过javascript代码对html和xml数据进行dom方式操作，从而做到页面的动态修改更新和数据的提取处理。
掌握 Ajax，第 5 部分: 操纵 DOM
天天成长的博客
06-16 106
原文：[url]http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/[/url] 掌握 Ajax，第 5 部分: 操纵 DOM 使用 JavaScript 即时更新 Web 页面 developerWorks 文档选项 将此页作为电子邮件发送 将此页作为电子邮件发送 级别: 初级 Bre...
jquery、js的dom操作方法区别以及ajax使用方法
测试
12-12 226
选择元素//jq$('.el');//js document.querySelector("div");div.querySelectorAll('.el');附：//mui mui(".el")[0];父、兄弟元素//jq$('.el').parent();$('.el').prev();$('.el').next();$('.el').last();$('.el...
ajax 中的this，与操作dom元素中的this
weixin_43069201的博客
01-20 290
最初使用ajax删除订单项，然后前台一直用 $(this).parents(".cart-con-info").remove() 试图前台js删除订单项效果，各种试都不好使，原来我在ajax中的$（this）已经不是我操作dom元素的那个this了，所以肯定一直不好使 解决办法：把操作dom元素的this赋给一个遍历dom 然后在ajax中使用dom.parents(".cart-con-info...
【前端指南】Dom操作、Ajax请求以及跨域解决方案
最新发布
秃头仔仔-安凯雯的博客
10-24 2050
具体DOM操作 - 更新：更新该DOM结点的内容，相当于更新了该DOM结点表示的HTML内容 - 遍历：遍历该DOM节点下的子节点，以便进行进一步操作 - 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点 - 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及他包含的所有子节点
拿下AJAX（三）——DOM基础及DOM操纵HTML
蒋倩兰——蕙质兰心
07-26 4752
DOM的概念 DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点  DOM很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM
ajax与DOM的使用,JS DOM中Ajax的使用
weixin_36125467的博客
08-05 281
一、概念全称：Asynchronors Javascript XML 异步JS数据交换格式。【Asynchronous】：异步的，即在执? AJAX 请求时不会阻塞后?代码的运?。【JavaScript】：使? JavaScript 实现浏览器与服务器之间的数据交互。【XML】：?种数据结构，AJAX 创建之初在与服务器进?数据交换时，使?的数据结构就是 XML。但是现在已经慢慢被 JSON 数...
Ajax学习笔记：从入门到精通
“Ajax学习经典笔记，适合初学者或者巩固知识用” Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这篇经典笔记详细...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值