js DOM的学习笔记


Posted in Javascript onDecember 22, 2011

今天学习了DOM,做了以下一些基础练习……
DOM是Document Object Model文档对象模型的缩写;使用JavaScript操作DOM进行DHTML开发。
学习目标:能够使用JavaScript操作Dom实现常见的DHTML效果。
参考书:张孝祥《JavaScript网页开发——体验式学习教程》
一、DOM的入门:
1、DOM就是HTML页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编
程控制。比如通过操作文本框的DOM对象,就可以读取文本框中的值、设置文本框中的值。
2、DOM也像WinForm一样,通过事件、属性、方法进行编程。
3、CSS+JavaScript+DOM=DHTML(即动态 HTML,是HTML语言的扩展。它可以增加文档与对象的演示文稿效果。)
二、事件:
1、事件:<body onmousedown="alert('哈哈')">当点击鼠标的时候执行onmousedown中的代码。有时间事件响应的代码太多,就放到单独的函
数中:

<script type="text/javascript"> 
function bodymousedown() 
{ 
alert("网页被点坏了,赔吧!"); 
alert("逗你玩的!"); 
} 
</script> 
<body onmousedown="bodymousedown()">

请注意:bodymousedown后的括号不能丢,因为表示调用bodymousedown函数,而不是onmousedown事件的响应函数是bodymousedown。
2、动态设置事件:
可以在代码中动态设置事件响应函数,就像.Net中"btn.Click+="一样。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script type="text/javascript"> 
function bodymousedown() { 
alert("网页被点坏了,赔吧!"); 
alert("逗你玩的!"); 
} 
function f1() { 
alert("我是f1"); 
} 
function f2() { 
alert("我是f2"); 
} 
</script> 
</head> 
<body> 
<input type="button" onclick="document.ondblclick=f1" value="关联事件1" /> 
<input type="button" onclick="document.ondblclick=f2" value="关联事件2" /> 
</body> 
</html>

3、window对象代表当前浏览器窗口,使用window对象的属性、方法的时候可以省略window,比如window.alert('a')可以省略成alert('a')
1)alert方法,弹出消息对话框
2)confirm方法,显示“确定”、“取消”对话框,如果按了【确定】按钮,就返回true,否则就false。
if(confirm("是否继续?"))

alert("确定");

else
{ alert("取消");}
3)重新导航到指定的地址:navigate("http://www.microsoft.com/");
4) setInterval每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识。如:setInterval("alert('hello')",5000);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>欢迎光临我的主页</title> 
<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; 
} //目的是将网页的标题滚动起来 
setInterval("scroll()", 500); 
</script> 
</head> 
<body> 
</body> 
</html>

5) clearInterval取消setInterval的定时执行,相当于Timer中的Enabled=False。因为setInterval可以设定多个定时,所以clearInterval要指定清除那个定时器的标识,即setInterval的返回值。var intervalld= setInterval("alert('hello')",5000);
clearInterval(intervalld);
6) setTimeout也是定时执行,但是不像setInterval那样是定时执行,而是设定时间后只执行一次,clearTimeout也是清除定时。
很好区分:Interval是定时;Timeout是超时之意。如:var timeoutld=setTimeout("alert('hello')",2000);
案例:实现标题栏走马灯的效果,也就是浏览器的标题文字每隔500ms向右滚动一下。提示:标题为document.title属性。
4、1)onload:网页加载完毕时触发,浏览器是一边下载文档、一边解析执行,可能会出现JavaScript执行时需要操作某个元素,这个元素还没有加载,如果这样就要把操作的代码放到body的onload事件中,或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发,而body 里的onload才是全部加载完成。
2)onunload:网页关闭(或者离开)后触发。在事件中为 "Window.event.returnValue"赋值(要显示的警告消息),这样窗口离开(比如前进、后退、关闭)就会弹出确认消息。如:<body onbeforeunload="Window.event.returnValue='真的要放弃发贴退出吗?'">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script type="text/javascript"> 
//showModelDialog('HTMLPageWindow.htm');//被拦截 
//btn.value = "OK";//报错,因为btn元素还没有被构建 
</script> 
</head> 
<body onload="btn.value='OK';" onbeforeunload="window.event.returnValue='真的要放弃发贴退出吗?文章会被丢失!';"> 
<input type="button" id="btn" value="模态对话框" onclick="showModelessDialog('HTMLPageWindow.htm')" /> 
<input type="text" /> 
<textarea cols="20" rows="20"></textarea> 
</body> 
</html>

5、其它事件:
除了有特有的属性之外,当然还有通用的HTML元素的事件:onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeyup(按键释放)、onkeypress(点击按键)、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、
onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)等。
三、window对象的属性
1、window.location.href="http://www.sina.com.cn",重新导向新的地址,和navigate方法效果一样。window.location.reload()刷新页面。
2、window.event是非常重要的属性,用来获得发生事件时的信息,事件不局限于window对象的事件,所有元素的事件都可以通过event属性取到相关信息。
1) altKey属性,boot类型,表示发生事件时alt键是否被按下,类似的还有ctrlKey、shiftKey属性,例子<input type="button" value="点击" onclick="if(event.altKey)
{alert('Alt点击')}else{alert('普通点击')}"/>;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
</head> 
<body> 
<input type="button" value="href" onclick="alert(location.href)" /> 
<input type="button" value="重定向" onclick="location.href='HTMLPage1.htm'" /> 
<input type="button" value="点击" onclick="if(window.event.ctrlKey){alert('按下了Ctrl')}else{alert('普通点击')}" /> 
<a href="http://www.baidu.com" onclick="alert('禁止访问!');window.event.returnValue=false;">百毒</a> 
<form action="jing.aspx"> 
<input type="submit" value="提交" onclick="alert('数据有问题!');window.event.returnValue=false;" /> 
</form> 
</body> 
</html>

2) clientX、clientY 发生事件时鼠标在客户区的坐标;screenX、screenY发生事件时鼠标在屏幕上的坐标;offsetX、offsetY发生事件时鼠标相对于事件源(比如点击按钮时触发onclick)的坐标。
3)returnValue属性,如果将returnValue设置为false,就会取消默认事件的处理。
4)srcElement:获得事件源对象
5)KeyCode:发生时间时的按键值
6)button:发生时间时鼠标的按键,1为左键,2为右键,3为左右键同时按。<body onmousedown="if(event.button==2){alert('禁止复制')}">
Javascript 相关文章推荐
js验证表单大全
Nov 25 Javascript
ppk谈JavaScript style属性
Oct 10 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
JS实现评价的星星功能
Aug 20 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
jquery 年会抽奖程序
Dec 22 #Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 #Javascript
jquery随机展示头像代码
Dec 21 #Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 #Javascript
jquery $.getJSON()跨域请求
Dec 21 #Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 #Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 #Javascript
You might like
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
tensorflow多维张量计算实例
2020/02/11 Python
django迁移文件migrations的实现
2020/03/31 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
培训主管岗位职责
2014/02/01 职场文书
读书演讲主持词
2014/03/18 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
求职信范文怎么写
2015/03/19 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android