Dom 学习笔记1

wsql

浏览: 11791150 次
性别:
来自: 深圳

最近访客更多访客>>

GDGZWQZ

IT_way

qq_33632159

mhx1535

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (14573)

社区版块

存档分类

2013-03 ( 19)
2013-02 ( 15)
2013-01 ( 268)
更多存档...

一、课前说明
内容:使用JavaScript操作Dom进行 DHTML开发
目标:能够使用JavaScript操作Dom实现常见的DHTML效果
二、DOM入门
DOM就是HTML页面的模型，将每个标签都作为一个对象，JavaScript通过调用
DOM中的属性方法就可以对网页中的文本框、层等元素进行编程
JavaScript->Dom就是C#->.Net Framwork
DOM 也像WinForm一样，通过事件、属性、方法进行编程
CSS+Javascript+Dom=DHTML
三、事件（点击body时触发onmousedown事件,调用bodymousedown()方法）
<html>
<script type="text/javascript">
function bodymousedown(){
alert('bie dianwo');
alert('jiu dian ni ');
}
</script>
<body onmousedown="bodymousedown()">

</body>
</html>

四、动态设置事件
<html>
<script type="text/javascript">
function bodymousedown(){
alert('bie dianwo');
alert('jiu dian ni ');
}
function f1(){
alert('我是f1');
}
function f2(){
alert('我是f2');
}
</script>
<body onmousedown="bodymousedown1()">
<input type="button" onclick="document.ondblclick=f1" value="关联事件1"/>
<input type="button" onclick="document.ondblclick=f2" value="关联事件2"/>
</body>
</html>

五、Windows对象
windows对象代表当前浏览器窗口,使用window对象的属性或方法
可以省略window,例如window.alert('a')
1、alert('弹出对话框');
2、confirm方法,显示确定、取消对话框
3、重新导航到制定的网址 navigate("")
4、setInterval 每隔一段时间执行一次
第一个参数为代码字符串
第二个参数为间隔时间毫秒
5、clearInterval(id)
6、setTimeout("alert('5秒执行我')",5000);多长时间后执行什么事件
7、clearTimeout
8、案例标题栏走马灯效果--考虑向左向右
--走马灯效果
<script type="text/javascript">
function scroll(){
var title=document.title;
var firstch=title.charAt(0);
var leftstr=title.substring(1,title.length);
document.title=leftstr+firstch;
}
scroll();
setInterval("scroll()",1000);

</script>
9、定时器越跑越快是因为没有停止以前的就触发了个新的
10、将setInterval的返回值存到全局变量然后赋值给clearInterval

--定时器实例
<html>
<head>
<script type="text/javascript">
var intervalId;
function startInterval(){
intervalId=setInterval("alert('11')",2000);
}
</script>
</head>
<body>
<input type="button" value="开启" onclick="startInterval()"/>
<input type="button" value="停止" onclick="clearInterval(intervalId)"/>
</body>
</html>

八、body document对象的事件
1、body的 onload事件是网页加载完毕的时候触发
2、元素的 onload事件是元素加载完毕的时候触发
3、onunload: 网页关闭(后者离开)后触发
4、onbeforeunload:在网页准备关闭时候触发
5、window.event.returnValue (要显示警告的消息窗口)
6、ondblclick 双击
7、onkeydown 按键按下事件等

十、window对象属性
1、location.href 设置或者获取设置相当于navigate方法
2、window.location.reload() 刷新
3、window.event 是非常重要的属性。用来获得事件时的信息，事件不局限于
window对象的事件，所有元素的事件都可以通过event属性取到相关信息。
类似于winfrom中的e(eventArg)
altKey属性表示发生事件时Alt键是否按下
ctrlKey shiftKey
clientX clientY 客户坐标
screenX screenY 屏幕坐标
offsetX offsetY 发生事件时鼠标相对于事件源(比如点击按钮时出发onclick)的坐标

returnValue属性如果将returnValue设置为false,就会取消默认事件处理
(例如:在超链接的onclick事件、禁止提交等)
srcElement 获得事件的源对象
keyCode 发生时间时的案件值
十三、window对象属性2
1、screen对象屏幕信息 screen.width 和 screen.height
2、clipboardData对象
clearData("Text")清空粘贴板
getData("Text") 获取粘贴板内容
setData("Text") 设置粘贴板
--实例用button调用
function msg()
{
var url='网址:'+location.href;
clipboardData.setData('Text',url);
alert('已经将地址放到粘贴板中,赶紧粘贴告诉好友吧');
}