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 相关文章推荐
JavaScript中window、doucment、body的解释
Aug 14 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
一分钟理解js闭包
May 04 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
实例分析javascript中的异步
Jun 02 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
PHP 采集获取指定网址的内容
2010/01/05 PHP
PHP可变函数学习小结
2015/11/29 PHP
css图片自适应大小
2007/11/28 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
three.js实现圆柱体
2018/12/30 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python打印斐波拉契数列实例
2015/07/07 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
python实现各种插值法(数值分析)
2019/07/30 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
DataList 能否分页,请问如何实现?
2015/05/03 面试题
环境工程求职简历的自我评价范文
2013/10/24 职场文书
行政总监岗位职责
2013/12/05 职场文书
高中打架检讨书
2014/02/13 职场文书
小学生常见病防治方案
2014/06/06 职场文书
教师党员个人整改措施
2014/10/27 职场文书
继承权公证书范本
2015/01/23 职场文书
面试通知单大全
2015/04/20 职场文书
植物园观后感
2015/06/11 职场文书
我是特种兵观后感
2015/06/11 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
mysql事务隔离级别详情
2021/10/24 MySQL