黑马程序员_学习日记17_Dom(1)
2012-05-01 17:19
225 查看
JavaScript和Dom的关系好比C#和.NETFramework的关系。
内容:使用JavaScript操作Dom进行DHTML开发。
Alert都不是JavaScript中定义的东西,它是Dom方法;好比WinForm中的MessageBox
Dom
就是HTML页面的模型,将每个标签都作为一个对象。 Dom也想WinForm一样,通过事件、属性、方法进行编程
CSS+JavaScript+Dom=DHTML
事件:
<head>
<title>无标题页</title>
<script
type="text/jscript">
functionbodymousedown(){
alert('别点我!');
alert('哈哈');
}
functionf1(){
alert("我是f1");
}
functionf2(){
alert("我是f2");
}
</script>
</head>
<body>
<input
type="button"
onclick="document.ondblclick=f1"
value="关联事件1"
/>
<input
type="button"
onclick="document.ondblclick=f2"
value="关联事件2"
/>
</body>
window对象
代表当前浏览器窗口,使用window对象的属性、方法的时候可以省略window,比如window.alert(‘a’)可以省略成alert.(‘a’)
(1) alert方法,弹出消息对话框
(2)
confirm方法,显示确定、取消对话框
(3)
重新导航到指定的地址:navigate(“http://www.rupeng.com”);
(4)
setInterval每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识
setInterval(“alert(‘hello’)”,5000);
(5) clearInterval取消setInterval的定时执行,相当于Timer中的Enabled=False。因为setInterval可以设定多个定时,所以clearInterval要指定清除那个定时的标识,即setInterval的返回值。
var intervalld =setInterval(“alert(‘hello’)”,5000);
clearInterval(intervalld);
(6) setTimeout也是定时执行,但是不像setInterval那样是重复的定时执行,只执行一次,clearTimeout也是清除定时。(翻译:Interval 间隔;Timeout
超时)
var timeoutId = setTimeout(“alert(‘hello’)”,2000);
body、document对象的事件
(1) onload:网页加载完毕时触发。浏览器是一边下载文档、一遍解析执行,可能会出现JavaScript执行时需要操作某个元素,这个元素还没有加载,如果这样就要把操作的代码放到onload事件中,或者可以把JavaScript放到元素之后。元素也有onload,表示该元素加载完成
(2)
onunload:网页关闭(或离开)后触发。
(3)
onbeforeunload:在网页准备关闭(或离开)时触发
在事件中为”window.event.returnValue”赋值(要显示的警告消息),这样离开窗口(比如前进、后退、关闭)就会弹出确认消息
<body onbeforeunload=”window.event.returnValue=’真的要放弃发帖退出吗?’”>
window对象的属性
l window.location.href=”http://www.itcast.cn”。重新导向新的地址,和navigate方法效果一样。window.location.reload()刷新页面
l window.event
是非常重要的属性,用来获得发生事件时的信息,事件不局限于window对象的事件,所有元素的事件都可以通过event属性取到相关信息。类似于WinForm中的e(EventArg)
altKey属性,bool类型,表示发生事件时alt键是否被按下,类似的还有ctrlKey、shiftKey属性,例:
<input
type="button"
value="点击"
onclick="if(window.event.ctrlKey){alert('按下了ctrl')};else{alert('普通点击')};"
/>
clientX、clientY发生事件时鼠标在客户区的坐标;screenX、screenY发生事件时鼠标在屏幕上的坐标;offsetX、offsetY发生事件时鼠标相对于事件源的坐标。
returnValue属性,如果将returnValue设置为false,就会取消默认事件的处理。在超链接的onclick里面禁止访问href的页面,在表单校验的时候禁止提交表单到服务器。
srcElement,获得事件源对象
keyCode,发生事件时的按键值
button,发生事件时鼠标按键,1为左键,2为右键,3为左右键同时按
l clipboardData对象,对剪贴板的操作。clearData(“Text”)清空剪贴板;getData(“Text”)读取剪贴板的值,返回值为剪贴板中的内容;setData(“Text”,val),设置剪贴板中的值。
当复制的时候body的oncopy方法被触发,直接return false就是禁止复制。
<body oncopy=”alert(‘禁止复制!’);returnfalse;”>
很多元素也有oncopy、onpaste事件
在网站中复制文章的时候,为了防止那些拷贝党不添加文章来源,自动在复制的内容后添加版权申明。
function modifyClipboard(){
clipboardData.setData(‘Text’,clipboardData.getData(‘Text’)+’本文来自传智播客技术专区,转载请注明来源。’+location.herf);
}
oncopy=”setTimeout(‘modifyClipboard()’,100)”
用户复制动作发生0.1秒后再去改粘贴板中的内容。
不能直接在oncopy中执行对粘贴板的操作,因此设定定时器,0.1秒后执行,这样就不在oncopy的执行调用栈上了。
l history操作历史记录
window.history.back()
后退;window.history.forward()前进
也可以用window.history.go(-1)
window.history.go(1)
l document
document的方法:
(1) write:向文档中写入内容。writeln,和write差不多,只不过最后添加一个回车。
<input type=”button”
value=”点击” onclick=”document.write(‘<fontcolor=red>你好</font>’)”/>
在onclick等事件中写的代码会冲掉页面中的内容,只有在页面加载过程中write才会与原有内容融合在一起
(2)getElementsById:(常用),根据元素的Id获取对象,网页中Id不能重复。也可以通过元素的Id来引用元素,但是有有效范围之类的问题,因此不建议直接通过Id操作元素,而是通过getElementsById
内容:使用JavaScript操作Dom进行DHTML开发。
Alert都不是JavaScript中定义的东西,它是Dom方法;好比WinForm中的MessageBox
Dom
就是HTML页面的模型,将每个标签都作为一个对象。 Dom也想WinForm一样,通过事件、属性、方法进行编程
CSS+JavaScript+Dom=DHTML
事件:
<head>
<title>无标题页</title>
<script
type="text/jscript">
functionbodymousedown(){
alert('别点我!');
alert('哈哈');
}
functionf1(){
alert("我是f1");
}
functionf2(){
alert("我是f2");
}
</script>
</head>
<body>
<input
type="button"
onclick="document.ondblclick=f1"
value="关联事件1"
/>
<input
type="button"
onclick="document.ondblclick=f2"
value="关联事件2"
/>
</body>
window对象
代表当前浏览器窗口,使用window对象的属性、方法的时候可以省略window,比如window.alert(‘a’)可以省略成alert.(‘a’)
(1) alert方法,弹出消息对话框
(2)
confirm方法,显示确定、取消对话框
(3)
重新导航到指定的地址:navigate(“http://www.rupeng.com”);
(4)
setInterval每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识
setInterval(“alert(‘hello’)”,5000);
(5) clearInterval取消setInterval的定时执行,相当于Timer中的Enabled=False。因为setInterval可以设定多个定时,所以clearInterval要指定清除那个定时的标识,即setInterval的返回值。
var intervalld =setInterval(“alert(‘hello’)”,5000);
clearInterval(intervalld);
(6) setTimeout也是定时执行,但是不像setInterval那样是重复的定时执行,只执行一次,clearTimeout也是清除定时。(翻译:Interval 间隔;Timeout
超时)
var timeoutId = setTimeout(“alert(‘hello’)”,2000);
body、document对象的事件
(1) onload:网页加载完毕时触发。浏览器是一边下载文档、一遍解析执行,可能会出现JavaScript执行时需要操作某个元素,这个元素还没有加载,如果这样就要把操作的代码放到onload事件中,或者可以把JavaScript放到元素之后。元素也有onload,表示该元素加载完成
(2)
onunload:网页关闭(或离开)后触发。
(3)
onbeforeunload:在网页准备关闭(或离开)时触发
在事件中为”window.event.returnValue”赋值(要显示的警告消息),这样离开窗口(比如前进、后退、关闭)就会弹出确认消息
<body onbeforeunload=”window.event.returnValue=’真的要放弃发帖退出吗?’”>
window对象的属性
l window.location.href=”http://www.itcast.cn”。重新导向新的地址,和navigate方法效果一样。window.location.reload()刷新页面
l window.event
是非常重要的属性,用来获得发生事件时的信息,事件不局限于window对象的事件,所有元素的事件都可以通过event属性取到相关信息。类似于WinForm中的e(EventArg)
altKey属性,bool类型,表示发生事件时alt键是否被按下,类似的还有ctrlKey、shiftKey属性,例:
<input
type="button"
value="点击"
onclick="if(window.event.ctrlKey){alert('按下了ctrl')};else{alert('普通点击')};"
/>
clientX、clientY发生事件时鼠标在客户区的坐标;screenX、screenY发生事件时鼠标在屏幕上的坐标;offsetX、offsetY发生事件时鼠标相对于事件源的坐标。
returnValue属性,如果将returnValue设置为false,就会取消默认事件的处理。在超链接的onclick里面禁止访问href的页面,在表单校验的时候禁止提交表单到服务器。
srcElement,获得事件源对象
keyCode,发生事件时的按键值
button,发生事件时鼠标按键,1为左键,2为右键,3为左右键同时按
l clipboardData对象,对剪贴板的操作。clearData(“Text”)清空剪贴板;getData(“Text”)读取剪贴板的值,返回值为剪贴板中的内容;setData(“Text”,val),设置剪贴板中的值。
当复制的时候body的oncopy方法被触发,直接return false就是禁止复制。
<body oncopy=”alert(‘禁止复制!’);returnfalse;”>
很多元素也有oncopy、onpaste事件
在网站中复制文章的时候,为了防止那些拷贝党不添加文章来源,自动在复制的内容后添加版权申明。
function modifyClipboard(){
clipboardData.setData(‘Text’,clipboardData.getData(‘Text’)+’本文来自传智播客技术专区,转载请注明来源。’+location.herf);
}
oncopy=”setTimeout(‘modifyClipboard()’,100)”
用户复制动作发生0.1秒后再去改粘贴板中的内容。
不能直接在oncopy中执行对粘贴板的操作,因此设定定时器,0.1秒后执行,这样就不在oncopy的执行调用栈上了。
l history操作历史记录
window.history.back()
后退;window.history.forward()前进
也可以用window.history.go(-1)
window.history.go(1)
l document
document的方法:
(1) write:向文档中写入内容。writeln,和write差不多,只不过最后添加一个回车。
<input type=”button”
value=”点击” onclick=”document.write(‘<fontcolor=red>你好</font>’)”/>
在onclick等事件中写的代码会冲掉页面中的内容,只有在页面加载过程中write才会与原有内容融合在一起
(2)getElementsById:(常用),根据元素的Id获取对象,网页中Id不能重复。也可以通过元素的Id来引用元素,但是有有效范围之类的问题,因此不建议直接通过Id操作元素,而是通过getElementsById
相关文章推荐
- 黑马程序员_Java学习日记17_IO流5
- 黑马程序员_学习日记60_706Dom2(事件冒泡、this、动态创建Dom、innerHTML、动态设置样式)
- 黑马程序员_学习日记18_Dom(2)
- 黑马程序员————学习日记【17】 【基础加强1】
- 黑马程序员Java基础加强17-24学习日记
- 黑马程序员_学习日记63_710jQuery2(属性选择器、表单选择器、操作Dom节点、事件、动画)
- 黑马程序员java基础学习日记——做题遇到GBK查资料发现了个有趣的文章——ASCII、Unicode、GBK和UTF-8字符编码的区别联系
- 黑马程序员_学习日记一_异常
- 黑马程序员_Java学习日记第三天-多态、内部类、异常处理
- 黑马程序员-iOS学习日记(十)Foundation
- 黑马程序员-[C语言]学习日记(二)
- 黑马程序员--【学习日记七】——集合框架(二)
- 黑马程序员张毓庆的学习日记第三篇
- 黑马程序员 日记五:反射机制学习总结
- 黑马程序员_学习日记52_622三层项目(MD5、NPOI)
- 黑马程序员java学习日记2
- 黑马程序员_学习日记七_集合二
- 黑马程序员----基础学习,反射,享元模式17
- 黑马程序员_Java学习日记16_IO流4
- “黑马程序员”视频学习笔记之dom操作基础