Dom的学习笔记一
今天学习了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+="一样。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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);
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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);
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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 confirmdemo() {
if (confirm("是否进入?")) {
alert('进入了');
}
else {
alert('取消进入')
}
var intervalId;
function startInterval() {
intervalId=setInterval("alert('Hello')",5000);//注意被执行的代码是字符串格式,也可以写一个匿名函数
}
}
</script>
</head>
<body>
<input type="button" value="ConfirmTest" onclick="confirmdemo()" />
<input type="button" value="Navigate测试" onclick="navigate('HTMLPage1.htm')"/>
<input type="button" value="setInterval测试" onclick="startInterval()"/>
<input type="button" value="停止Interval" onclick="clearInterval(intervalId)"/>
</body>
</html>
6) setTimeout也是定时执行,但是不像setInterval那样是定时执行,而是设定时间后只执行一次,clearTimeout也是清除定时。
很好区分:Interval是定时;Timeout是超时之意。如:var timeoutld=setTimeout("alert('hello')",2000);
案例:实现标题栏走马灯的效果,也就是浏览器的标题文字每隔500ms向右滚动一下。提示:标题为document.title属性。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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">
var timerId;//全局变量最好也声明
function scroll() {
var title = document.title;
//var firstch = title.charAt(0);
var lastCh = title.charAt(title.length-1);//容易错
var leftStr = title.substring(0, title.length - 1);
document.title = leftStr + lastCh;
} //目的是将网页的标题滚动起来
//每调用一次setInterval都会产生一个新的定时器,并且旧的不会自动停止,所以看起来好像“越跑越快”
</script>
</head>
<body>
<input type="button" value="滚动1" onclick="setInterval('scroll()', 500)" />
<input type="button" value="滚动2" onclick="if(timerId){clearInterval(timerId);}timerId=setInterval('scroll()', 500)" />
<input type="button" value="停止(错误写法)" onclick="clearInterval(setInterval('scroll()', 500))" />
<input type="button" value="停止" onclick="clearInterval(timerId)" />
</body>
</html>
4、1)onload:网页加载完毕时触发,浏览器是一边下载文档、一边解析执行,可能会出现JavaScript执行时需要操作某个元素,这个元素还没有加载,如果这样就要把操作的代码放到body的onload事件中,或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发,而body 里的onload才是全部加载完成。
2)onunload:网页关闭(或者离开)后触发。在事件中为 "Window.event.returnValue"赋值(要显示的警告消息),这样窗口离开(比如前进、后退、关闭)就会弹出确认消息。如:<body onbeforeunload="Window.event.returnValue='真的要放弃发贴退出吗?'">
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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(鼠标按键释放)等。
三、网站常见的小案例:
1、注册页面弹出的注册协议,为了让用户先阅读注册协议,设置在一定时间后(如10秒后)注册按钮才可用。演示代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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">
var leftSeconds = 10;
var intervalId;
function CountDown() {
var btnReg = document.getElementById("btnReg");
if (btnReg) { //如果网页速度非常慢的话,可能定时器运行的时候控件还没有加载!
if (leftSeconds<=0) {
btnReg.value = "同意";
btnReg.disabled = ""; //btnReg.disabled = "false"
clearInterval(intervalId); //停止计时器
}
else {
btnReg.value = "请仔细阅读协议(还剩" + leftSeconds + "秒)";
leftSeconds--;
}
}
}
intervalId = setInterval("CountDown()", 1000);
</script>
</head>
<body>
<textarea></textarea>
<input id="btnReg" type="button" value="同意" disabled="disabled" />
</body>
</html>
2、举一个最最最简单的加法计算器,代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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 calcClick() {
var value1 = document.getElementById("txt1").value;
var value2 = document.getElementById("txt2").value;
value1 = parseInt(value1, 10);//js是弱类型的
value2 = parseInt(value2, 10);
document.getElementById("txtResult").value = value1 + value2;
}
</script>
</head>
<body>
<input type="text" id="txt1" />+<input type="text" id="txt2" />
<input type="button" onclick="calcClick()" value="等于" /><input type="text" id="txtResult" />
</body>
</html>
笔记整理中,待续……
posted on 2011-12-21 23:58 Gelivable【IT随笔】 阅读(373) 评论(0) 编辑 收藏 举报