DOM编程
DOM入门
•DOM就是HTML页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。 JavaScript→Dom就是C#→.Net Framwork。没有.net，C#只能for、while，连WriteLine、MessageBox都不行。Dom就是一些让JavaScript能操作HTML页面控件的类、函数。
•DOM也像WinForm一样，通过事件、属性、方法进行编程。
•CSS+JavaScript+DOM=DHTML
===================================================================================================
事件
•事件：<body onmousedown="alert('哈哈')">当点击鼠标的时候执行onmousedown中的代码。有时间事件响应的代码太多，就放到单独的函数中：
<script type="text/javascript">
function bodymousedown() {
alert("网页被点坏了，赔吧！");
alert("逗你玩的！");
}
</script>
<body onmousedown="bodymousedown()">
bodymousedown后的括号不能丢（ onmousedown="bodymousedown" ），因为表示onmousedown事件发生时调用bodymousedown函数，而不是onmousedown事件的响应函数是bodymousedown。
===================================================================================================
动态设置事件
可以在代码中动态设置事件响应函数，就像.Net中btn.Click+=一样
function f1() {
alert("1");
}
function f2(){
alert("2");
}
<input type="button" onclick="document.ondblclick=f1" value="关联事件1" />//注意f1不要加括号。
<input type="button" onclick="document.ondblclick=f2" value="关联事件2" />
===================================================================================================
window对象
window对象代表当前浏览器窗口，使用window对象的属性、方法的时候可以省略window，比如window.alert('a')可以省略成alert('aa')。
(1)alert方法，弹出消息对话框
(2)confirm方法，显示“确定”、“取消”对话框，如果按了【确定】按钮，就返回true，否则就false
if (confirm("是否继续？")) {
alert("确定");
}
else {
alert("取消");
}
•(3)重新导航到指定的地址：navigate("http://www.rupeng.com");
•(4)setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识
setInterval("alert('hello')", 5000);
•(5)clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。
var intervalId = setInterval("alert('hello')", 5000);
clearInterval(intervalId);
•(6)setTimeout也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次，clearTimeout也是清除定时。很好区分：Interval：间隔；timeout：超时。
var timeoutId = setTimeout("alert('hello')", 2000);
•案例：实现标题栏走马灯的效果，也就是浏览器的标题文字每隔500ms向右滚动一下。提示：标题为document.title属性。实现代码参考备注。
•练习：刚进入的时候还是向左滚动，点击【向左】按钮就向左连续滚动，点击【向右】按钮就向右连续滚动。
–思路1、全局变量，标志当前的滚动方向，当点击向左的时候dir="left",向右dir="right"。
–思路2、scrollleft scroolright,向右滚的时候将scrollleft的Interval clear掉，然后setInterval启动scrollright
•(7)showModalDialog弹出模态对话框，注意showModalDialog必须在onClick等用户手动触发的事件中才会执行，否则可能会被最新版本的浏览器当成广告弹窗而拦截。
–第一个参数为弹出模态窗口的页面地址。
–在弹出的页面中调用window.close()（不能省略window.close()中的window.）关闭窗口，只有在对话框中调用window.close()才会自动关闭窗口，否则浏览器会提示用户进行确认。
•(8)showModelessDialog弹出非模态窗口，参数等和showModalDialog一样。
•如何在弹出窗口和主窗口之间进行参数传递、如何控制弹出窗口的大小等后面再讲。
View Code
练习，标题栏走马灯：
function scrollTitle() {
var str = document.title;
str = str.charAt(str.length - 1 ) + str.substring( 0 , str.length - 1 );
document.title = str;
}
setInterval( " scrollTitle() " , 500 );
function scrollTitle() {
var str = document.title;
str = str.charAt(str.length - 1 ) + str.substring( 0 , str.length - 1 );
document.title = str;
}
setInterval( " scrollTitle() " , 500 );
===================================================================================================
body、document对象的事件
•（1）onload：网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，body onload才是全部加载完成
•（2）onunload：网页关闭（或者离开）后触发。
•（3）onbeforeunload：在网页准备关闭（或者离开）后触发。在事件中为"window.event.returnValue赋值（要显示的警告消息），这样窗口离开（比如前进、后退、关闭）就会弹出确认消息
–<body onbeforeunload="window.event.returnValue='真的要放弃发帖退出吗？'">。显示的文字随浏览器版本而有差异。
===================================================================================================
其他事件
•除了有特有的属性之外，当然还有通用的HTML元素的事件：onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）等。
===================================================================================================
form对象
•document.getElementById('btn1').click()
•form对象是表单的Dom对象。
•方法：submit()提交表单，但是不会触发onsubmit事件。
•实现autopost，也就是焦点离开控件以后页面立即提交，而不是只有提交submit按钮以后才提交，当光标离开的时候触发onblur事件，在onblur中调用form的submit方法。代码见备注。
•在点击submit后form的onsubmit事件被触发，在onsubmit中可以进行数据校验，数据数据有问题，返回false即可取消提交
• <form name="form1" action="a.aspx" method="get" onsubmit="if(document.getElementById('txtname').value.length<=0){alert('姓名必填');return false;}">
===================================================================================================
window对象的属性
•window.location.href='http://www.itcast.cn'，重新导向新的地址，和navigate方法效果一样。window.location.reload() 刷新页面
•window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。类似于winForm中的e(EventArg).
–altKey属性，bool类型，表示发生事件时alt键是否被按下，类似的还有ctrlKey、shiftKey属性，例子 <input type="button" value="点击" onclick="if(event.altKey){alert('Alt点击')}else{alert('普通点击')}" /> ；
–clientX、clientY 发生事件时鼠标在客户区的坐标；screenX、screenY 发生事件时鼠标在屏幕上的坐标；offsetX、offsetY 发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标。
–returnValue属性，如果将returnValue设置为false，就会取消默认事件的处理。在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器。
–srcElement，获得事件源对象。几个事件共享一个事件响应函数用。
–keyCode，发生时间时的按键值。
–button，发生事件时鼠标按键，1为左键，2为右键，3为左右键同时按。<body onmousedown="if(event.button==2){alert('禁止复制');}">
•*）screen对象，屏幕的信息
alert("分辨率：" + screen.width + "*" + screen.height);
if (scree（n.width < 1024 || screen.height < 768) {
alert("分辨率太低！");
}
•clipboardData对象，对粘贴板的操作。clearData("Text")清空粘贴板；getData("Text")读取粘贴板的值，返回值为粘贴板中的内容；setData("Text",val)，设置粘贴板中的值。
–案例：复制地址给友好。见备注。
–当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。<body oncopy="alert('禁止复制！');return false;"
–很多元素也有oncopy、onpaste事件：
–案例：禁止粘贴帐号。见备注。
在网站中复制文章的时候，为了防止那些拷贝党不添加文章来源，自动在复制的内容后添加版权声明。
function modifyClipboard() {
clipboardData.setData('Text', clipboardData.getData('Text') + '本文来自传智播客技术专区，转载请注明来源。' + location.href);
}
oncopy="setTimeout('modifyClipboard()',100)"。用户复制动作发生0.1秒以后再去改粘贴板中的内容。100ms只是一个经常取值，写1000、10、50、200……都行。不能直接在oncopy里修改粘贴板。
不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒以后执行，这样就不再oncopy的执行调用栈上了。
•history操作历史记录
–window.history.back()后退；window.history.forward()前进。也可以用window.history.go(-1)、window.history.go(1)前进
•document属性。是最复杂的属性之一。后面讲解详细使用。
View Code
<
a href
=
"
http://www.baidu.com
"
onclick
=
"
alert('禁止访问！');window.event.returnValue=false;
"
>
百毒
<
/
a>
< form action = " a.aspx " >
< input type = " submit " value = " 提交 " onclick = " alert('数据有问题！');window.event.returnValue=false; " / >
< / form>
< form action = " a.aspx " >
< input type = " submit " value = " 提交 " onclick = " alert('数据有问题！');window.event.returnValue=false; " / >
< / form>
View Code
<
input type
=
"
button
"
value
=
"
推荐给好友
"
onclick
=
"
clipboardData.setData('Text','推荐给你一个网站，很好玩'+location.href);alert('已经将网址放到粘贴板中，发给你的好友即可');
"/
>
帐号： < input type = " text " / ><br / >
重复帐号： < input type = " text " onpaste = " alert('为保证帐号的正确，请勿粘贴帐号');return false; " / >
帐号： < input type = " text " / ><br / >
重复帐号： < input type = " text " onpaste = " alert('为保证帐号的正确，请勿粘贴帐号');return false; " / >
===================================================================================================
document属性
•document是window对象的一个属性，因为使用window对象成员的时候可以省略window.，所以一般直接写document
•document的方法：
–（1）write：向文档中写入内容。writeln，和write差不多，只不过最后添加一个回车
–<input type="button" value="点击" onclick="document.write('<font color=red>你好</font>')" />
–在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起
– <script type="text/javascript">
– document.write('<font color=red>你好</font>');
– </script>
–write经常在广告代码、整合资源代码中被使用。见备注
内容联盟、广告代码、cnzz，不需要被主页面的站长去维护内容，只要被嵌入的js内容提供商修改内容，显示的内容就变了。
View Code
这里是页面的内容。
< script type = " text/javascript " >
document.write( " <font color=red>红色呀</font> " );
< / script>
哈哈哈哈哈 。
write经常在广告代码、整合资源代码中被使用
广告代码的例子：在http: // heima8.com/注册一个账户（测试用 账户名：itcast0710 密码：123456），申请一个广告代码，然后放到页面中
整合资源的例子：百度新闻 http: // news.baidu.com/newscode.html
百度新闻代码相当于页面中嵌入另外一个网站的js文件，js文件就是一个大的write语句，这样的好处就是主页面不用写死内容，被嵌入的js内容变了嵌入的内容就变了。
< script type = " text/javascript " >
document.write( " <font color=red>红色呀</font> " );
< / script>
哈哈哈哈哈 。
write经常在广告代码、整合资源代码中被使用
广告代码的例子：在http: // heima8.com/注册一个账户（测试用 账户名：itcast0710 密码：123456），申请一个广告代码，然后放到页面中
整合资源的例子：百度新闻 http: // news.baidu.com/newscode.html
百度新闻代码相当于页面中嵌入另外一个网站的js文件，js文件就是一个大的write语句，这样的好处就是主页面不用写死内容，被嵌入的js内容变了嵌入的内容就变了。
===================================================================================================
document方法
•getElementById方法（非常常用），根据元素的Id获得对象，网页中id不能重复。也可以直接通过元素的id来引用元素，但是有有效范围、form1.textbox1之类的问题，因此不建议直接通过id操作元素，而是通过getElementById
•（*）getElementsByName，根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementsByName返回值是对象数组。
•（*）getElementsByTagName，获得指定标签名称的元素数组，比如getElementsByTagName("p")可以获得所有的<p>标签。
•案例：点击一个按钮，被点击的按钮显示“呜呜”，其他按钮显示“哈哈”。
•案例：十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。(btn.disabled = true )
•练习：加法计算器。两个文本框中输入数字，点击【=】按钮将相加的结果放到第三个文本框中。
•练习：美女时钟。
View Code
加法计算器。
< input type = " text " id = " num1 " / >+<input type="text" id="num2" / >
< input type = " button " onclick = " calc() " value = " = " / ><input type="text" id="num3" / >
function calc() {
var s1 = document.getElementById( " num1 " ).value;
var s2 = document.getElementById( " num2 " ).value;
var i3 = parseInt(s1) + parseInt(s2);
document.getElementById( " num3 " ).value = i3;
}
案例：十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。(btn.disabled = true )
思路：
1 、注册按钮初始状态为不可用，disabled
2 、启动定时器，setInterval，1秒钟运行一次CountDown方法，设定一个初始值为10的全局变量，在CountDown方法中对全局变量倒数，然后将倒数的值写到注册按钮上（请仔细阅读协议（还剩8秒））。
3 、直到全局变量值为 <= 0 ，就让注册按钮可用，将按钮的文本设置为“同意”
< input type = " text " id = " num1 " / >+<input type="text" id="num2" / >
< input type = " button " onclick = " calc() " value = " = " / ><input type="text" id="num3" / >
function calc() {
var s1 = document.getElementById( " num1 " ).value;
var s2 = document.getElementById( " num2 " ).value;
var i3 = parseInt(s1) + parseInt(s2);
document.getElementById( " num3 " ).value = i3;
}
案例：十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。(btn.disabled = true )
思路：
1 、注册按钮初始状态为不可用，disabled
2 、启动定时器，setInterval，1秒钟运行一次CountDown方法，设定一个初始值为10的全局变量，在CountDown方法中对全局变量倒数，然后将倒数的值写到注册按钮上（请仔细阅读协议（还剩8秒））。
3 、直到全局变量值为 <= 0 ，就让注册按钮可用，将按钮的文本设置为“同意”
===================================================================================================
DOM的动态创建
•document.write只能在页面加载过程中才能动态创建。
•可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild方法将新创建元素添加到相应的元素下
function showit() {
var divMain = document.getElementById("divMain");
var btn = document.createElement("input");
btn.type = "button";
btn.value = "我是动态的！";
divMain.appendChild(btn);
}
<div id="divMain"></div>
<input type="button" value="ok" onclick="showit()" />
===================================================================================================
innerText、innerHTML
•几乎所有DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。
–<a href="http://www.itcast.cn" id="link1">传<font color="Red">智</font>播客</a>
–<input type="button" value="inner*" onclick="alert(document.getElementById('link1').innerText);alert(document.getElementById('link1').innerHTML);" />
•用innerHTML也可以替代createElement，属于简单、粗放型、后果自负的创建
–function createlink() {
– var divMain = document.getElementById("divMain");
– divMain.innerHTML = "<a href='http://www.rupeng.com'>如鹏网</a>";
– }
View Code
动态增加超链接
function createlink() {
var divMain = document.getElementById( " divMain " );
var link = document.createElement( " a " );
link.innerText = " 传智播客.Net培训 " ;
link.href = " http://net.itcast.cn " ;
link.target = " _blank " ;
divMain.appendChild(link);
}
动态加载网站列表
function loadArticle() {
var data = new Array();
data[ " 新浪网 " ] = " http://www.sina.com " ;
data[ " 百度 " ] = " http://www.baidu.com " ;
data[ " 新浪网 " ] = " http://www.sina.com " ;
var table1 = document.getElementById( " table1 " );
for ( var key in data) {
var link = data[key];
var tr = document.createElement( " tr " );
var tdName = document.createElement( " td " );
tdName.innerText = key;
var tdLink = document.createElement( " td " );
tdLink.innerHTML = " <a href=' " + link + " '> " + key + " </a> " ;
tr.appendChild(tdName);
tr.appendChild(tdLink);
table1.appendChild(tr);
}
}
function createlink() {
var divMain = document.getElementById( " divMain " );
var link = document.createElement( " a " );
link.innerText = " 传智播客.Net培训 " ;
link.href = " http://net.itcast.cn " ;
link.target = " _blank " ;
divMain.appendChild(link);
}
动态加载网站列表
function loadArticle() {
var data = new Array();
data[ " 新浪网 " ] = " http://www.sina.com " ;
data[ " 百度 " ] = " http://www.baidu.com " ;
data[ " 新浪网 " ] = " http://www.sina.com " ;
var table1 = document.getElementById( " table1 " );
for ( var key in data) {
var link = data[key];
var tr = document.createElement( " tr " );
var tdName = document.createElement( " td " );
tdName.innerText = key;
var tdLink = document.createElement( " td " );
tdLink.innerHTML = " <a href=' " + link + " '> " + key + " </a> " ;
tr.appendChild(tdName);
tr.appendChild(tdLink);
table1.appendChild(tr);
}
}
View Code
浏览器兼容性问题：
< table id = " tableLinks " >
< tbody >< / tbody>
< / table>，然后tableLinks.childNodes[0].appendChild(tr);
动态增加超链接
function createlink() {
var divMain = document.getElementById( " divMain " );
var link = document.createElement( " a " );
link.innerText = " 传智播客.Net培训 " ;
link.href = " http://net.itcast.cn " ;
link.target = " _blank " ;
divMain.appendChild(link);
}
动态加载网站列表
function loadArticle() {
var data = new Array();
data[ " 新浪网 " ] = " http://www.sina.com " ;
data[ " 百度 " ] = " http://www.baidu.com " ;
data[ " 新浪网 " ] = " http://www.sina.com " ;
var table1 = document.getElementById( " table1 " );
for ( var key in data) {
var link = data[key];
var tr = document.createElement( " tr " );
var tdName = document.createElement( " td " );
tdName.innerText = key;
var tdLink = document.createElement( " td " );
tdLink.innerHTML = " <a href=' " + link + " '> " + key + " </a> " ;
tr.appendChild(tdName);
tr.appendChild(tdLink);
table1.appendChild(tr);
}
}
< table id = " tableLinks " >
< tbody >< / tbody>
< / table>，然后tableLinks.childNodes[0].appendChild(tr);
动态增加超链接
function createlink() {
var divMain = document.getElementById( " divMain " );
var link = document.createElement( " a " );
link.innerText = " 传智播客.Net培训 " ;
link.href = " http://net.itcast.cn " ;
link.target = " _blank " ;
divMain.appendChild(link);
}
动态加载网站列表
function loadArticle() {
var data = new Array();
data[ " 新浪网 " ] = " http://www.sina.com " ;
data[ " 百度 " ] = " http://www.baidu.com " ;
data[ " 新浪网 " ] = " http://www.sina.com " ;
var table1 = document.getElementById( " table1 " );
for ( var key in data) {
var link = data[key];
var tr = document.createElement( " tr " );
var tdName = document.createElement( " td " );
tdName.innerText = key;
var tdLink = document.createElement( " td " );
tdLink.innerHTML = " <a href=' " + link + " '> " + key + " </a> " ;
tr.appendChild(tdName);
tr.appendChild(tdLink);
table1.appendChild(tr);
}
}
===================================================================================================
其他
•事件中的this。除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用，如果要使用则要将this传递给函数或者使用event.srcElement。(*)this和event.srcElement的语义是不一样的，this就是表示当前监听事件的这个对象，event.srcElement是引发事件的对象：事件冒泡。
•易错：修改元素的样式不是设置class属性，而是className属性。案例：网页开关灯的效果。
•修改元素的样式不能this.style="background-color:Red"。
•易错：单独修改样式的属性使用“style.属性名”。注意在css中属性名在JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为JavaScript中-是不能做属性、类名的。所以CSS中背景颜色是background-color，而JavaScript则是style.background；元素样式名是class，在JavaScript中是className属性；font-size→style.fontSize；margin-top→style.marginTop
•单独修改控件的样式<input type="button" value="AAA" onclick="this.style.color='red'" />
===================================================================================================
控制层的显示
•修改style.display，例子：切换层的显示
• function togglediv() {
• var div1 = document.getElementById('div1');
• if (div1.style.display == '') {
• div1.style.display = 'none';//不显示
• }
• else {
• div1.style.display = '';//显示
• }
• }
View Code
1
、点击按钮层变大：
< div id = " testDiv " style = " position:absolute;width:0px;height:0px;top:100px;height:100px " > 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈爱好哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈爱好哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 < / div>
< input type = " button " value = " show " onclick = " document.getElementById('testDiv').style.width=200;document.getElementById('testDiv').style.height=20; " / >
2 、点击按钮层动态变大。
< script type = " text/javascript " >
var slideShowIntervalId;
function slideShow() {
var testDiv = document.getElementById( ' testDiv ' );
var hasChange = false ;
var oldWidth = parseInt(testDiv.style.width, 10 );
var oldHeight = parseInt(testDiv.style.height, 10 );
if (oldWidth <= 200 ) {
testDiv.style.width = ( oldWidth + 10 ) + " px " ;
hasChange = true ;
}
if (oldHeight <= 20 ) {
testDiv.style.height = (oldHeight + 1 ) + " px " ;
hasChange = true ;
}
if ( ! hasChange) {
clearInterval(slideShowIntervalId);
}
}
< / script>
< div id = " testDiv " style = " position:absolute;width:0px;height:0px;top:100px;height:100px;border-color:Green;border-style:dotted;border-width:1px; " > 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈爱好哈哈哈哈哈哈哈哈哈哈哈哈哈 < / div>
< input type = " button " value = " 缓慢显示 " onclick = " slideShowIntervalId=setInterval('slideShow()',100) " / >
< div id = " testDiv " style = " position:absolute;width:0px;height:0px;top:100px;height:100px " > 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈爱好哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈爱好哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 < / div>
< input type = " button " value = " show " onclick = " document.getElementById('testDiv').style.width=200;document.getElementById('testDiv').style.height=20; " / >
2 、点击按钮层动态变大。
< script type = " text/javascript " >
var slideShowIntervalId;
function slideShow() {
var testDiv = document.getElementById( ' testDiv ' );
var hasChange = false ;
var oldWidth = parseInt(testDiv.style.width, 10 );
var oldHeight = parseInt(testDiv.style.height, 10 );
if (oldWidth <= 200 ) {
testDiv.style.width = ( oldWidth + 10 ) + " px " ;
hasChange = true ;
}
if (oldHeight <= 20 ) {
testDiv.style.height = (oldHeight + 1 ) + " px " ;
hasChange = true ;
}
if ( ! hasChange) {
clearInterval(slideShowIntervalId);
}
}
< / script>
< div id = " testDiv " style = " position:absolute;width:0px;height:0px;top:100px;height:100px;border-color:Green;border-style:dotted;border-width:1px; " > 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈爱好哈哈哈哈哈哈哈哈哈哈哈哈哈 < / div>
< input type = " button " value = " 缓慢显示 " onclick = " slideShowIntervalId=setInterval('slideShow()',100) " / >
===================================================================================================
IE中body的事件范围
•IE中如果在body上添加onclick、onmousemove等事件响应，那么如果页面没有满，则 “body 中最后一个元素以下（横向不限制）” 的部分是无法响应事件的，必须使用代码在document上监听那些事件，比如document.onmousemove = MovePic
•FF中也差不多。
===================================================================================================
元素的位置、大小单位
•通过dom读取元素的top、left、width、height等取到的值不是数字，而是“10px”这样的字符串；为这些属性设值的时候IE可以是80、90这样的数字，FF必须是“80px”、“90%”等这样的字符串形式，为了兼容统一用字符串形式。
•易错：不要写成div1.style.width=80px，而是div1.style.width='80px'
•如果要修改元素的大小（宽度加10），则首先要取出元素的宽度，然后用parseInt将宽度转换为数字（parseInt可以将"20px"这样数字开头的包含其他内容的字符串解析为20，parseInt('22px',10)，也就是解析尽可能多的部分）；然后加上一个值，再加上px赋值回去。
===================================================================================================
层的操作
•元素的position 样式值：static（无定位，显示在默认位置）、absolute（绝对定位）、fixed（相对于窗口的固定定位，位置不会随着浏览器的滚动而变化，IE6不支持）、relative（相对元素默认位置的定位）。如果要通过代码修改元素的坐标则一般使用absolute，然后修改元素的top（上边缘距离）、left（左边缘距离）两个样式值。left、top都是指的层的左上角的坐标
•案例：跟着鼠标飞的图片。提示：鼠标移动的事件是onmousemove（一边移动事件一边触发，而不是移动开始或者移动完成才触发），通过window.event的clientX、clientY属性获得鼠标的位置。
•案例：鼠标放到一个超链接的时候，在鼠标的位置显示一个黄色背景，带图片的悬浮提示，鼠标离开就消失。提示：鼠标进入控件的事件是onmouseover，离开的事件是onmouseout。
•案例：点击按钮层动态变大。提示：英文字母连续单词不会在中间自动换行的陷阱
===================================================================================================
弹出对话框的处理
•复习，使用window.showModalDialog('dialog.htm')弹出模态对话框
•给对话框传递参数，使用showModalDialog的第二个参数传递参数，在对话框中用window.dialogArguments获得传递的参数值；对话框中给window.parent.returnValue设定返回值，这样在父窗口中就可以通过showModalDialog返回值读取设置的返回值了。例子：弹出对话框询问用户姓名，向用户问好；弹出含有“是”、“否”、“取消”三个按钮的模态窗口，点击按钮的时候窗口关闭，然后主窗口显示用户点击的按钮。
•传递多个参数，将参数包装到数组中，然后仍然是通过第二个参数传递，返回多个返回值也可以返回数组：var arr = new Array();arr[0]=30;arr[1]="tom";
•练习（面试题），弹出一个含有确定、取消、重试三个按钮的对话框，并且得知用户的选择。
View Code
（
1
）给对话框传递参数，使用showModalDialog的第二个参数传递参数，在对话框中用window.dialogArguments获得传递的参数值；对话框中给window.parent.returnValue设定返回值，这样在父窗口中就可以通过showModalDialog返回值读取设置的返回值了：
dialog.htm：
function getData()
{
return document.getElementById( ' mytext1 ' ).value;
}
< body onLoad = " javascript:document.getElementById('mytext1').value=window.dialogArguments; " >
< input type = " text " id = " mytext1 "/ >
< input type = " button " value = " 确定 " onclick = " javascript:window.parent.returnValue=getData();window.close(); " >
< / body>
主页面：
var result = window.showModalDialog( ' dialog2.htm ' , 777 );
alert(result);
（ 2 ）传递多个参数，将参数包装到数组中即可： var arr = new Array();arr[ 0 ] = 30 ;arr[ 1 ] = " tom " ;
dialog.htm：
function getData()
{
return document.getElementById( ' mytext1 ' ).value;
}
< body onLoad = " javascript:document.getElementById('mytext1').value=window.dialogArguments; " >
< input type = " text " id = " mytext1 "/ >
< input type = " button " value = " 确定 " onclick = " javascript:window.parent.returnValue=getData();window.close(); " >
< / body>
主页面：
var result = window.showModalDialog( ' dialog2.htm ' , 777 );
alert(result);
（ 2 ）传递多个参数，将参数包装到数组中即可： var arr = new Array();arr[ 0 ] = 30 ;arr[ 1 ] = " tom " ;
===================================================================================================
JS中的正则表达式
•复习C#正则表达式
•JavaScript中创建正则表达式类的方法：
–var regex = new RegExp("\\d{5}") 或者 var regex = /\d{5}/
–/表达式/是JavaScript中专门为简化正则表达式编写而提供的语法，写在//中的正则表达式就不用管转义符了。
•RegExp对象的方法：
–（1）test(str)判断字符串str是否匹配正则表达式，相当于IsMatch
– var regex = /.+@.+/;
– alert(regex.test("[email protected]"));
– alert(regex.test("ab.com"));
–（2）exec(str)进行搜索匹配，返回值为匹配结果(*)
–（3）compile编译表达式，提高运行速度。 (*)
===================================================================================================
string的正则表达式方法
•String对象中提供了一些与正则表达式相关的方法，相当于对于RegExp类的包装，简化调用：
match(regexp)，相当于调用exec
var s = "[email protected]";
var regex = /(.+)@(.+)/;
var match = s.match(regex);
alert(RegExp.$1 + "，服务器：" + RegExp.$2);
练习：光标离开Email地址框的时候用正则表达式校验是否是合法的Email地址，如果不是的话Email地址框变红，并且注册按钮禁用，否则Email地址框颜色为白色，启用注册按钮。