zoukankan      html  css  js  c++  java
  • DOM操作系列-01

    】常见事件:

    //onclick     点击时触发事件。

    //ondblclick    双击时触发事件。

    //onkeydown   按键按下

    //onkeypress   点击按键

    //onkeyuo     按键释放 

    //onmousedown鼠标按下

    //onmousemove鼠标移动

    //onmouseup   鼠标按键释放

    //onmouseout  鼠标离开元素范围

    //onmouseover 鼠标移动到元素范围

    //onmousedown 点击页面时触发调用函数或执行代码。 

    //onload       网页或元素加载完毕时触发。 

    //onunload     网页关闭(或者离开刷新)后触发。

    //onbeforeunload 在网页准备关闭后触发(关闭之前)。

    】事件

    点击超链接执行js代码:

    <a href=”javascript:alett(‘代码’)”>点击</a>

    //调用js执行引擎处理

    <a href=”1.htm”onelick=”alett(‘代码’)”>点击</a>

    //onclick 事件会在对象被点击时发生。

    Function 方法名(){代码;}

    <body Onmousedown=“方法名()”></body>

    //onmousedown 点击页面时触发调用函数或执行代码。 

    】动态添加事件

    Function 方法名1(){代码;}

    Function 方法名2(){代码;}

    <input type=”button” onclick=”document.ondblclick=函数名1”value=“关联事件1”/>

    //注意不要为f1加括号。 document.文档的,ondblclick双击时,=函数名1处理函数为1。

    <input type=”button” onclick=”document.ondblclick=函数名2”value=“关联事件2”/>

    】window对象的方法

    Window对象代表当前浏览器窗口,使用该对象的属性、方法的时候可以省略window。

    例:window.alert(‘a’)可省略为alert(‘a’)

    1)alert方法,弹出消息对话框。

    2)Conflrm方法,显示“确定”“取消”对话框,如按“确定”返回true,否则false。

    3)重新导航到指定的地址:navigate(“http://www.aaa.com”)

    4)Setlnterval每隔一段时间执行指定的代码。

    第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识。

      例:Setlnterval(“alert(‘hello’)”,5000)

    5)clearlnterval取消setlnterval的定时执行,相当于time中的enabled=false。

      因为setlnter可以设定多个定时,所以clearlnterval要指定清除那个定时器的标志,

      即setlnterval的返回值。

      Var intervalld = setlnterval(“alert(“hello”)”,5000);  //j接收返回值 标识

      Clearlnterval(ntervalld );

    6)setTimeout 定时执行,只执行一次。

       clearTimeout清除定时。

       例:setTimeout(“alert(“hello”)”,2000);

    】body、document对象的事件

    //onload       网页或元素加载完毕时触发。 

    //onunload     网页关闭(或者离开刷新)后触发。

    //onbeforeunload 在网页准备关闭后触发(关闭之前)。

    】window对象的属性

    1)重新导向新的地址:window.location.href=’httf://www.dizhi.com’

       刷新当前页面:window.location.reload()

       取当前页面的地址:location.href

    2)window.event 非常重要,用来获得发生事件时的信息,事件不局限于window对象的事件。

      类似于winform中的e(eventary)

    altKey属性,bool类型,alt键是否被按下;

    ctrKey(ctrl键是否按下);

    shiftKey(shift键是否按下);

    clientX、clientY发生事件时鼠标在客户区的坐标;

    screenX、screenY发生事件时鼠标在屏幕上的坐标;

    offsetX、offsetY发生事件时鼠标相对于事件源的坐标; 

    retumValue属性,如将retumValue设置为false,就会取消默认事件的处理。

             在超链接onclick中禁止访问href的页面。在表单效验的时候禁止提交到服务器。   

    srcElement,获得事件源对象。

    keyCode,发生事件时的按键值。

    Button,发生事件时鼠标按键,1为左键,2为右键,3为左右键同时按。

    3)screen对象,屏幕的信息(了解内容)

         Screen.width、screen.height分辨率长宽。

    4)clipboardData对象,对粘贴板的操作。

       clearData(“Text”)清空粘贴板; 在浏览器中只能为text。

       getData(“Text”)读取粘贴板的值,返回值为粘贴板中的内容。

       setData(“Text,val”)设置粘贴板中的值。

    很多元素也有Oncopy、onpaste事件:

    禁止复制内容:oncopy=“alert(‘禁止复制!’);return:false;”

    禁止粘贴内容:onpaste=“alert(‘请勿粘贴!’);return:false;”

    自动在复制的内容后添加版权声明:

    Function modifyClipboard(){

       clipboardData.setData(‘text’,clipboardData.getData(‘text’)+’版权声明’+location.href);

    }

    Oncopy=”setTimeout(‘modifyClipboard()’,100)”

    //用户复制动作后,过0.1秒以后再去改粘贴板中的内容。

    5)history操作历史记录:

       Window.history.back()后退;

       Window.history.forward()前进。

       也可以用window.history.go(-1)后退、window.history.go(1)前进。

    【】Document属性。 它是window对象的一个属性,代表当前页面的html文档。

       Document方法:

    (1)write:向文档中写入内容。    经常在广告代码、整合资源代码中被使用。

         Writeln:同上,最后添加一个回车。

         在onclick等事件中写的代码会冲掉页面中的内容,

         只有在页面加载过程中write才会与原有内容融合在一起。

         嵌入广告(广告联盟)、嵌入能容(百度新闻)等 cnzz数据统计。

    (2)getElementByld方法(非常常用),根据元素的id获得对象,网页中id不能重复。

         也可以直接通过元素的id来引用元素,但有有效范围之类的问题,

         因此不建议直接通过id操作元素,而是通过getElementByld

     Var 名 = documengt.getElementById(“id名”);   //查找文件 

     Alert(名.value)

    (3)getElementByName:根据元素的name获得对象,由于页面中元素的name可以重复,

         比如多个RadioButton的name一样,因此其返回值为对象数组。

         遍历并不像c#中的foreache,并不会遍历每个数组,而是遍历的key。

         故遍历需用普通for循环做。

    (4)getElementByTagName:获得指定标签名称的元素数组

         比如getElementByTagName(“p”)可以获得所有的<p>标签。

  • 相关阅读:
    【SQLite】教程04-SQLite数据类型
    【SQLite】教程03-SQLite语法
    【SQLite】教程02-SQLite命令
    [原创]java WEB学习笔记22:MVC案例完整实践(part 3)---多个请求对应一个Servlet解析
    [原创]java WEB学习笔记21:MVC案例完整实践(part 2)---DAO层设计
    [原创]java WEB学习笔记20:MVC案例完整实践(part 1)---MVC架构分析
    [转]Mysql命令
    [原创]java WEB学习笔记19:初识MVC 设计模式:查询,删除 练习(理解思想),小结 ,问题
    [原创]java WEB学习笔记18:java EE 中的MVC 设计模式(理论)
    [原创]java WEB学习笔记17:关于中文乱码的问题 和 tomcat在eclipse中起动成功,主页却打不开
  • 原文地址:https://www.cnblogs.com/yachao1120/p/7823179.html
Copyright © 2011-2022 走看看