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 显示当前系统时间代码
Dec 28 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
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中$_SERVER的详细参数与说明
2008/07/29 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
jquery 经典动画菜单效果代码
2010/01/26 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
canvas实现钟表效果
2017/02/13 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python中threading超线程用法实例分析
2015/05/16 Python
Python中标准模块importlib详解
2017/04/16 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
幼儿园教师自我鉴定
2014/03/20 职场文书
绘画专业自荐信
2014/07/04 职场文书
贷款委托书
2014/08/01 职场文书
单位车辆管理制度
2015/08/05 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
你知道Java Spring的两种事务吗
2022/03/16 Java/Android