码迷,mamicode.com
首页 > 其他好文 > 详细

DOM操作系列-01

时间:2017-11-12 22:18:02      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:hello   ext   指定   嵌入广告   pre   粘贴   也有   方法   alt   

】常见事件:

//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>标签。

DOM操作系列-01

标签:hello   ext   指定   嵌入广告   pre   粘贴   也有   方法   alt   

原文地址:http://www.cnblogs.com/yachao1120/p/7823179.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!