摘要:2、?(1、*setInterval每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识。如:?

脚本宝典收集整理的这篇文章主要介绍了

javascript代码实例教程-Dom 学习总结及其实例

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

2、

?(1、*setInterval每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识。如:?

????????????? setInterval("alert('hello')",5000);

*clearInterval取消setInterval的定时执行,相当于Timer中的Enabled=False。因为setInterval可以设定多个定时,所以clearInterval要指定清除那个定时器的标识,即setInterval的返回值。

var intervalld= setInterval("alert('hello')",5000);
clearInterval(intervalld);

(2、setTimeout也是定时执行,但是不像setInterval那样是定时执行,而是设定时间后只执行一次,clearTimeout也是清除定时。
?????? 很好区分:Interval是定时;Timeout是超时之意。

??????????? var timeoutld=setTimeout("alert('hello')",2000);
(3、案例:实现标题栏走马灯的效果,也就是hga008.com|首页器的标题文字每隔500ms向右滚动一下

跑马灯效果
?1 HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
?2
?3????
?4???????? 欢迎来到daomul的博客,欢迎再来,谢谢
?5????????
14????
15????
16????
17????
18 3、

?? (1、onload:网页加载完毕时触发,hga008.com|首页器是一边下载文档、一边解析执行,可能会出现JavaScript执行时需要操作某个元素,这个元素还没有加载,如果这样就要把操作的代码放到body的onload事件中,或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发,而body 里的onload才是全部加载完成。
?? (2、onunload:网页关闭(或者离开)后触发。onbeforeunload:窗口离开(比如前进、后退、关闭之前)就会弹出确认消息。如:????????????????????????????????????????????????????

4、

???? 除了有特有的属性之外,当然还有通用的HTML元素的事件:onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeyup(按键释放)、onkeypress(点击按键)、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、
onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)等。

5、window对象的属性

(1、window.location.href="http://www.sina.com.cn",重新导向新的地址,和navigate方法效果一样。window.location.reload()刷新页面。
(2、window.event是非常重要的属性,用来获得发生事件时的信息,事件不局限于window对象的事件,所有元素的事件都可以通过event属性取到相关信息。
???????? a、altKey属性,boot类型,表示发生事件时alt键是否被按下,类似的还有ctrlKey、shiftKey属性

windows事件样例
?1
?2
?3
?4????
?5
?6
?7????
?8????
?9???? <>
10???????? href="http://www.baidu.com" onclick="alert('禁止访问!');window.event.returnValue=false;">
11????


12????
13????

14
15

b、 clientX、clientY 发生事件时鼠标在客户区(hga008.com|首页器界页面内)的坐标;screenX、screenY发生事件时鼠标在屏幕上的坐标;offsetX、offsetY发生事件时鼠标相对于事件源(按钮button内)的坐标。
c、returnValue属性,如果将returnValue设置为false,就会取消默认事件的处理。
d、srcElement:获得事件源对象
e、KeyCode:发生时间时的按键值
f、button:发生时间时鼠标的按键,1为左键,2为右键,3为左右键同时按。

????????

6、clipboardData对象,对粘贴板的操作。clearData("Text")清空粘贴板;getData("Text")读取粘贴板的值,返回值为粘贴板中的内容;setData("Text",val),设置粘贴板中的值。

(1、当复制的时候body的oncopy方法被触发,直接return false就是禁止复制。
(2、很多元素也有oncopy、onpaste事件。

?例子1:禁止复制
???????????????????
?例子2:给粘贴板赋值:复制地址给好友

?例子3:禁止粘贴到文本框

请输入您的手机号码:
请您再次输入手机号码::

?例子4:复制时附带内容

在网站中复制文章的时候,为了防止那些拷贝党不添加文章来源,自动在复制的内容后添加版权声明。

function modifyClipboard(){

?? clipboardData.setData('Text',clipboardData.getData('Text')+'本文来自博客园技术专区,转载请注明来源。'+location.href);
}
oncopy="setTimeout('modifyClipboard()',100)"。

用户复制动作发生0.1秒以后再去修改粘贴板中的内容。100ms只是一个经常取值,写1000、10、50、20……都行。不能直接在oncopy中执行对粘贴板的操作,因此设定定时器,0.1秒以后执行,这样就不再oncopy的执行调用栈上了。

7、页面前进、后退:history操作历史记录

window.history.back()后退;
window.history.forward()前进。也可以用window.history.go(-1)表前进;window.history.go(1)表后退。

实例1:

这里是第2页后退

8、document属性(最复杂的属性)document是window对象的一个属性,因为使用window对象成员的时候可以省略window,所以一般直接写document。

(1、write:向文档中写入内容。writeln和write差不多,只不过最后添加一个回车
(2、
(3、在onclick等事件中写的代码会冲掉页面中的内容,只有在页面加载过程中write才会与原有内容融合在一起
(4、

案例1:

getElementById
?1
?2
?3
?4???? getElementById
?5????
18
19
20????
21????
22????


23????
24????
25????

26
27 案例2:

getElementByName
?1
?2
?3
?4???? getElementByName的例子
?5????
25
26
27????
28????
29???? 保密
30????
31????

32????

33????

34????

35????

36????

37????
38
39 案例3:

getElementByTagName
?1
?2
?3
?4???? getElementByTagName
?5????
27
28
29????
30????
31????
32????
33????
34
35 案例4:

阅读协议等待计时器
?1
?2
?3????
?4???????? 欢迎来到daomul的博客,欢迎再来,谢谢
?5????????
26????
27????
28????????
29????????
30????
31 案例5:

美女时钟
?1
?2
?3
?4???? 欢迎来到daomul的博客,欢迎再来,谢谢
?5????
26
27
28????
29
30 案例6:

五角星评分
?1
?2
?3????
?4???????? 欢迎来到daomul的博客,欢迎再来,谢谢
?5????????
38????
39????
40????????
41????????????
42????????????????
43????????????
44????????

45????
46

9、Dom的动态创建

???? (1、document.write只能在页面加载过程中才能动态创建。
???? (2、可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用某个元素的appendChild方法将新创建元素添加到相应的元素下

动态创建按钮
?1
?2
?3
?4???? 欢迎来到daomul的博客,欢迎再来,谢谢
?5????
14
15
16


17
18
19 10、innerText与innerHTML

???? (1、几乎所有DOM元素都有innerText与innerHTML属性(注意大小写),分别是元素标签内内容的文本表示形式和HTML源代码,这两个属性是可读可写的。

???????????????? 客园
?????????????????

???? (2、用innerHTML也可以替代createElement,属于简单、粗放型、后果自负的创建。

function createInput() {
??????????? var pMain = document.getElementById('pMain');
?????????? pMain.innerHTML="daomul的博客";
}

?11、hga008.com|首页器兼容性问题:

?????? (1、IE6、IE7对table.appendChlid("tr")的支持和IE8不一样,用insertRow、 insertCell来代替或者为表格添加tbody,然后向tbody中添加tr。个人比较喜欢?????????

????????????? 下面的Insert方式,它不是不兼容火狐hga008.com|首页器,它也是基本兼容的了,只是 (FF)不支持innerText,但是支持innerHtml。

?? 实例:动态增加双行网站列表

???

采用InsertRow和insertCell
?1
?2
?3
?4???? 动态创建表格的兼容性
?5????
21
22
23????
24????????
25????????
26????
27????
28????

29????
30
31 采用appendChild方法
?1
?2
?3
?4???? 动态创建表格的兼容性
?5????
30
31
32????
33????????
34????????
35????
36????
37????

38????
39
40 12、事件冒泡

?????? 如过元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B也会,顺序是由内而外。

?13、事件中的this

????? 除了可以使用event.srcElement在事件响应函数中,this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件,在事件响应函数调用的函数? 中不能使用,如果要使用则要将this传递给函数或者使用event.srcElement.
? 案例:

this事件
?1
?2
?3
?4???? 欢迎来到daomul的博客,欢迎再来,谢谢
?5????
17
18
19????
20????
21????
22????
23????
24
25 14、Dom修改样式

???? (1、Dom中修改css样式,必须是通过className而不是class(可能是因为作为关键字)

??????????? 例如:onclick="document.getElementById('htmlpID').className='cssID'; "

??????????? 例如:获得body的css样式id:document.body.className

??? (2、单独修改样式的属性使用“style.属性名”,不过要注意存在“-”的属性,因为javascript中横线代表减号

?案例1:ontextBlur()是myload的响应函数,而不是被响应函数调用的函数,所以可以用this来获得

修改Dom样式-鼠标移离
?1
?2
?3????
?4???????? 欢迎来到daomul的博客,欢迎再来,谢谢
?5????????
26????
27????
28????????
29????
30 案例2:评分

评分
?1
?2
?3????
?4???????? 欢迎来到daomul的博客,欢迎再来,谢谢
?5????????
38????
39????
40????????
41????????????
42????????????????
43????????????
44????????

45????
46 15、编程控制层

(1、元素的position样式值:static(无定位,显示在默认位置)、absolute(绝对位置)、fixed(相对于窗口的固定定位,位置不会随着hga008.com|首页器的滚动而变化,IE6不支持)、relative(相对元素默认位置的定位)。如果要通过代码修改元素的坐标则一般使用absolute,然后修改元素的top(上边缘距离)、left(左边缘距离)两个样式值。

?(2、createElement的两种用法,注意innerHTML的问题,

?????? var input=document.createElement("文本")文本部分不会被识别

(3、设定一些DOm元素属性名的特殊属性:例如

?????? label.setAttribute("for","username");? label.setAttribute("aaa","111");

案例1:高级选项的显示隐藏

高级选项的显示隐藏
?1
?2
?3????
?4???????? 欢迎来到daomul的博客,欢迎再来,谢谢
?5????????
16????
17????
18????????
19????????


22????
23 案例2:鼠标移动(1)

鼠标移动图片
?1
?2
?3????
?4???????? 欢迎来到daomul的博客,欢迎再来,谢谢
?5????????
16????
17????
18????????

?
19???????????? Alternate Text
20????????????
美女与你同在
21????????


22????
23 案例3:鼠标移动显示信息(2)

鼠标移动显示信息
?1
?2
?3????
?4???????? 欢迎来到daomul的博客,欢迎再来,谢谢
?5????????
14????????
46????
47????
48???????? daomul
49???????? ddddd
50???????? aaaaa
51???????? bbbbb
52????
53 案例4:小图片显示大图片

小图片显示大图片
?1
?2
?3????
?4???????? 欢迎来到daomul的博客,欢迎再来,谢谢(小图片显示大图片1)
?5????????
42????
43????
44????????


47????????????


48????????


49????