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 获取select下拉列表值的代码
Sep 07 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 Javascript
实现一个简单得数据响应系统
Nov 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
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
PHP模块化安装教程
2016/06/01 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
nodejs的10个性能优化技巧
2014/07/15 NodeJs
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
使用JavaScript破解web
2018/09/28 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
Python科学画图代码分享
2017/11/29 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
利用Python检测URL状态
2019/07/31 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
简述 Python 的类和对象
2020/08/21 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
介绍一下Linux文件的记录形式
2013/09/29 面试题
文科生自我鉴定
2014/02/15 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
如何写求职信
2014/05/24 职场文书
军训结束新闻稿
2015/07/17 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang