Dom 学习总结及其实例
Posted onDom 学习总结及其实例
daomul
1、 重新导航到指定的地址：navigate("http://www.cnblogs.com/daomul/");
2、
（1、/*setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识。如：
setInterval("alert('hello')",5000);
/*clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。
var intervalld= setInterval("alert('hello')",5000); clearInterval(intervalld);
（2、setTimeout也是定时执行，但是不像setInterval那样是定时执行，而是设定时间后只执行一次，clearTimeout也是清除定时。 很好区分：Interval是定时；Timeout是超时之意。
var timeoutld=setTimeout("alert('hello')",2000);
（3、案例：实现标题栏走马灯的效果，也就是浏览器的标题文字每隔500ms向右滚动一下
跑马灯效果
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
43、
（1、onload:网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，而body 里的onload才是全部加载完成。 （2、onunload：网页关闭（或者离开）后触发。onbeforeunload：窗口离开（比如前进、后退、关闭之前）就会弹出确认消息。如：
4、
除了有特有的属性之外，当然还有通用的HTML元素的事件：onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeyup(按键释放)、onkeypress(点击按键)、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、
onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)等。
5、window对象的属性
（1、window.location.href="http://www.sina.com.cn",重新导向新的地址，和navigate方法效果一样。window.location.reload()刷新页面。
（2、window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。
a、altKey属性，boot类型，表示发生事件时alt键是否被按下，类似的还有ctrlKey、shiftKey属性
windows事件样例
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
4b、 clientX、clientY 发生事件时鼠标在客户区（浏览器界页面内）的坐标；screenX、screenY发生事件时鼠标在屏幕上的坐标；offsetX、offsetY发生事件时鼠标相对于事件源（按钮button内）的坐标。 c、returnValue属性，如果将returnValue设置为false，就会取消默认事件的处理。 d、srcElement:获得事件源对象 e、KeyCode：发生时间时的按键值 f、button：发生时间时鼠标的按键，1为左键，2为右键，3为左右键同时按。
<body onmousedown="if(event.button==2){alert('禁止复制')}">
6、clipboardData对象，对粘贴板的操作。clearData("Text")清空粘贴板；getData("Text")读取粘贴板的值，返回值为粘贴板中的内容；setData("Text",val),设置粘贴板中的值。
（1、当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。
（2、很多元素也有oncopy、onpaste事件。例子1：禁止复制
例子2：给粘贴板赋值：复制地址给好友例子3：禁止粘贴到文本框
请输入您的手机号码： 请您再次输入手机号码：:
例子4：复制时附带内容
在网站中复制文章的时候，为了防止那些拷贝党不添加文章来源，自动在复制的内容后添加版权声明。
function modifyClipboard(){
clipboardData.setData('Text',clipboardData.getData('Text')+'本文来自博客园技术专区，转载请注明来源。'+location.href); } oncopy="setTimeout('modifyClipboard()',100)"。
用户复制动作发生0.1秒以后再去修改粘贴板中的内容。100ms只是一个经常取值，写1000、10、50、20……都行。不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒以后执行，这样就不再oncopy的执行调用栈上了。
7、页面前进、后退：history操作历史记录
window.history.back()后退； window.history.forward()前进。也可以用window.history.go(-1)表前进；window.history.go(1)表后退。
实例1：
这里是第2页后退8、document属性（最复杂的属性）document是window对象的一个属性，因为使用window对象成员的时候可以省略window,所以一般直接写document。
（1、write:向文档中写入内容。writeln和write差不多，只不过最后添加一个回车 （2、 （3、在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起 （4、
案例1：
getElementById
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
4案例2：
getElementByName
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
432
33
34
35
36
37 38 39
案例3：
getElementByTagName
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
4案例4：
阅读协议等待计时器
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
4案例5：
美女时钟
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
4案例6：
五角星评分
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
4| ☆ | ☆ | ☆ | ☆ | ☆ | 43
9、Dom的动态创建
（1、document.write只能在页面加载过程中才能动态创建。
（2、可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild方法将新创建元素添加到相应的元素下
动态创建按钮
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
410、innerText与innerHTML
（1、几乎所有DOM元素都有innerText与innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。
<a href="[http://cnblog.com/daomul/](http://blog.sina.com.cn/)" id="link1">博<font color="red"/>客</font>园</a>
<input type="button" value="innerXXX" onclick="alert(document.getElementById('link1').innerText);
alert(document.getElementById('link1').innerHTML);" />
（2、用innerHTML也可以替代createElement,属于简单、粗放型、后果自负的创建。
function createInput() { var divMain = document.getElementById('divMain'); divMain.innerHTML="daomul的博客"; }
11、浏览器兼容性问题：
（1、IE6、IE7对table.appendChlid("tr")的支持和IE8不一样，用insertRow、 insertCell来代替或者为表格添加tbody，然后向tbody中添加tr。个人比较喜欢
下面的Insert方式，它不是不兼容火狐浏览器，它也是基本兼容的了，只是 (FF)不支持innerText，但是支持innerHtml。
实例：动态增加双行网站列表
采用InsertRow和insertCell
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
4采用appendChild方法
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
412、事件冒泡
如过元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B也会，顺序是由内而外。
13、事件中的this
除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数 中不能使用，如果要使用则要将this传递给函数或者使用event.srcElement.
案例：
this事件
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
414、Dom修改样式
（1、Dom中修改css样式，必须是通过className而不是class(可能是因为作为关键字)
例如：onclick="document.getElementById('htmldivID').className='cssID'; "
例如：获得body的css样式id：document.body.className
（2、单独修改样式的属性使用“style.属性名”，不过要注意存在“-”的属性，因为javascript中横线代表减号
案例1：ontextBlur()是myload的响应函数，而不是被响应函数调用的函数，所以可以用this来获得
修改Dom样式-鼠标移离
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
4案例2：评分
评分
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
4| ☆ | ☆ | ☆ | ☆ | ☆ | 43
15、编程控制层
（1、元素的position样式值：static（无定位，显示在默认位置）、absolute(绝对位置)、fixed（相对于窗口的固定定位，位置不会随着浏览器的滚动而变化，IE6不支持）、relative(相对元素默认位置的定位)。如果要通过代码修改元素的坐标则一般使用absolute，然后修改元素的top（上边缘距离）、left（左边缘距离）两个样式值。
（2、createElement的两种用法，注意innerHTML的问题，
var input=document.createElement("<a href=‘[http://www.cnblogs.com/daomul](http://www.cnblogs.com/daomul)’>文本</a>")文本部分不会被识别
（3、设定一些DOm元素属性名的特殊属性：例如
label.setAttribute("for","username"); label.setAttribute("aaa","111");
案例1：高级选项的显示隐藏
高级选项的显示隐藏
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
4案例2：鼠标移动（1）
鼠标移动图片
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
4
20 美女与你同在21
案例3：鼠标移动显示信息（2）
鼠标移动显示信息
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
4案例4：小图片显示大图片
小图片显示大图片
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
4案例5：评分控件改进
评分控件改进
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
4| ☆42 | 43☆44 | 45☆46 | 47☆48 | 49☆50 | 51
案例6：搜索框关键字搜索
搜索框关键字搜索
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
416、Form表单： Form 对象是表单的 Dom 对象。
方法： submit() 提交表单，但是不会触发 onsubmit 事件。 实现 autopost ，也就是焦点离开控件以后页面立即提交，而不是 只有提交 submit 按钮以后才提交，当光标离开的时候触发 onblur 事件，在 onblur 中调用 form 的 submit 方法。在点击 submit 后 form 的 onsubmit 事件被触发 ，在 onsubmit 中可以 进行数据校验，数据有问题， 返回 false 即可取消提交。
案例1：
Form表单
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
417、正则表达式
/JavaScript 中创建正则表达式类的方法： var regex = new RegExp("\d{5}") 或者 var regex = /\d{5}/ / 表达式 / 是 JavaScript 中专门为简化正则表达式编写而提供的语法， 写在 // 中的正则表达式就不用管转义符了。 /RegExp 对象的方法： // test(str) 判断字符串 str 是否匹配正则表达式，相当于 IsMatch var regex = /.+@.+/; alert(regex.test("a@b.com")); alert(regex.test("ab.com")); // exec(str) 进行搜索匹配，返回值为匹配结果 ( / ) // compile 编译表达式，提高运行速度。 ( / ) /*String 对象中提供了一些与正则表达式相关的方法，相当于对于 RegExp 类的包装，简化调用： match(regexp) ,相当于调用 exec
var s = "aaa@163.com";
var regex = /(.+)@(.+)/;
var match = s.match(regex);
alert(RegExp.$1 + " ，服务器： " + RegExp.$2);
案例1：
正则表达式
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
418、不同浏览器的差异
19、键盘码操作以及金融框案例:
案例1：
财务相关系统中涉及到金额的文本框有如下要求：
/*进入金额文本文本框不使用中文输入法 不能输入非数字 焦点在文本框中时文本框左对齐；焦点离开文本框时文本框右对齐，显示千 分位 禁用输入法： style="ime-mode:disabled"
/*禁止键入非法值，只有这些才能被键入 (k == 9) || (k == 13) || (k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)|| (k>=48 && k<=57)||(k>=96 && k<=105)||(k>=37 && k<=40) 。 onkeydown="return numonKeyDown()" 不要写成 onkeydown="numonKeyDown()" 区分事件响应函数 和事件响应函数调用的函数。
/* 禁止粘贴 ( 伟大的 Tester) ， <input onpaste="return false;" ，太暴力，应该只是禁止粘贴非法值。在 onpaste 中通过 clipboardData.getData('Text')
取到粘贴板中的值，然后遍历每个字符，看是否是合法的值，如果全部是合法值才允许粘贴，只要有一个非法值就禁止粘贴。 charAt 、 charCodeAt添加千分位 的方法
/* 焦点在的时候左对齐没有千分位，焦点不在时右对齐千分位：this.style.textAlign='right'
金融文本框设置
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4
541 禁用输入法:42 43
44 不能输入和粘贴非数字:45 46
47 添加去掉千分位:48 51
52 53
省市选择
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 6
7 案例3：复选框实现全选、全不选、反选
复选框选择
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
443
44
45
46
47 48 49 50
51案例4：权限选择
权限选择
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
4分类: javascript
绿色通道： 好文要顶 关注我 收藏该文与我联系
daomul
关注 - 1
粉丝 - 43
4
0 (请您对文章做出评价)
« 上一篇：ADO.NET- 基础总结及实例 » 下一篇：JQuery 学习总结及实例
posted @ 2013-04-23 00:36 daomul 阅读(925) 评论(3) 编辑 收藏
1、 重新导航到指定的地址：navigate("http://www.cnblogs.com/daomul/");
2、
（1、/*setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识。如：
setInterval("alert('hello')",5000);
/*clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。
var intervalld= setInterval("alert('hello')",5000); clearInterval(intervalld);
（2、setTimeout也是定时执行，但是不像setInterval那样是定时执行，而是设定时间后只执行一次，clearTimeout也是清除定时。 很好区分：Interval是定时；Timeout是超时之意。
var timeoutld=setTimeout("alert('hello')",2000);
（3、案例：实现标题栏走马灯的效果，也就是浏览器的标题文字每隔500ms向右滚动一下
跑马灯效果
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
43、
（1、onload:网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，而body 里的onload才是全部加载完成。 （2、onunload：网页关闭（或者离开）后触发。onbeforeunload：窗口离开（比如前进、后退、关闭之前）就会弹出确认消息。如：
4、
除了有特有的属性之外，当然还有通用的HTML元素的事件：onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeyup(按键释放)、onkeypress(点击按键)、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、
onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)等。
5、window对象的属性
（1、window.location.href="http://www.sina.com.cn",重新导向新的地址，和navigate方法效果一样。window.location.reload()刷新页面。
（2、window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。
a、altKey属性，boot类型，表示发生事件时alt键是否被按下，类似的还有ctrlKey、shiftKey属性
windows事件样例
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
4b、 clientX、clientY 发生事件时鼠标在客户区（浏览器界页面内）的坐标；screenX、screenY发生事件时鼠标在屏幕上的坐标；offsetX、offsetY发生事件时鼠标相对于事件源（按钮button内）的坐标。 c、returnValue属性，如果将returnValue设置为false，就会取消默认事件的处理。 d、srcElement:获得事件源对象 e、KeyCode：发生时间时的按键值 f、button：发生时间时鼠标的按键，1为左键，2为右键，3为左右键同时按。
<body onmousedown="if(event.button==2){alert('禁止复制')}">
6、clipboardData对象，对粘贴板的操作。clearData("Text")清空粘贴板；getData("Text")读取粘贴板的值，返回值为粘贴板中的内容；setData("Text",val),设置粘贴板中的值。
（1、当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。
（2、很多元素也有oncopy、onpaste事件。例子1：禁止复制
例子2：给粘贴板赋值：复制地址给好友例子3：禁止粘贴到文本框
请输入您的手机号码： 请您再次输入手机号码：:
例子4：复制时附带内容
在网站中复制文章的时候，为了防止那些拷贝党不添加文章来源，自动在复制的内容后添加版权声明。
function modifyClipboard(){
clipboardData.setData('Text',clipboardData.getData('Text')+'本文来自博客园技术专区，转载请注明来源。'+location.href); } oncopy="setTimeout('modifyClipboard()',100)"。
用户复制动作发生0.1秒以后再去修改粘贴板中的内容。100ms只是一个经常取值，写1000、10、50、20……都行。不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒以后执行，这样就不再oncopy的执行调用栈上了。
7、页面前进、后退：history操作历史记录
window.history.back()后退； window.history.forward()前进。也可以用window.history.go(-1)表前进；window.history.go(1)表后退。
实例1：
这里是第2页后退8、document属性（最复杂的属性）document是window对象的一个属性，因为使用window对象成员的时候可以省略window,所以一般直接写document。
（1、write:向文档中写入内容。writeln和write差不多，只不过最后添加一个回车 （2、 （3、在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起 （4、
案例1：
getElementById
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
4案例2：
getElementByName
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
432
33
34
35
36
37 38 39
案例3：
getElementByTagName
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
4案例4：
阅读协议等待计时器
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
4案例5：
美女时钟
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
4案例6：
五角星评分
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
4| ☆ | ☆ | ☆ | ☆ | ☆ | 43
9、Dom的动态创建
（1、document.write只能在页面加载过程中才能动态创建。
（2、可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild方法将新创建元素添加到相应的元素下
动态创建按钮
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
410、innerText与innerHTML
（1、几乎所有DOM元素都有innerText与innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。
<a href="[http://cnblog.com/daomul/](http://blog.sina.com.cn/)" id="link1">博<font color="red"/>客</font>园</a>
<input type="button" value="innerXXX" onclick="alert(document.getElementById('link1').innerText);
alert(document.getElementById('link1').innerHTML);" />
（2、用innerHTML也可以替代createElement,属于简单、粗放型、后果自负的创建。
function createInput() { var divMain = document.getElementById('divMain'); divMain.innerHTML="daomul的博客"; }
11、浏览器兼容性问题：
（1、IE6、IE7对table.appendChlid("tr")的支持和IE8不一样，用insertRow、 insertCell来代替或者为表格添加tbody，然后向tbody中添加tr。个人比较喜欢
下面的Insert方式，它不是不兼容火狐浏览器，它也是基本兼容的了，只是 (FF)不支持innerText，但是支持innerHtml。
实例：动态增加双行网站列表
采用InsertRow和insertCell
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
4采用appendChild方法
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
412、事件冒泡
如过元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B也会，顺序是由内而外。
13、事件中的this
除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数 中不能使用，如果要使用则要将this传递给函数或者使用event.srcElement.
案例：
this事件
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
414、Dom修改样式
（1、Dom中修改css样式，必须是通过className而不是class(可能是因为作为关键字)
例如：onclick="document.getElementById('htmldivID').className='cssID'; "
例如：获得body的css样式id：document.body.className
（2、单独修改样式的属性使用“style.属性名”，不过要注意存在“-”的属性，因为javascript中横线代表减号
案例1：ontextBlur()是myload的响应函数，而不是被响应函数调用的函数，所以可以用this来获得
修改Dom样式-鼠标移离
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
4案例2：评分
评分
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
4| ☆ | ☆ | ☆ | ☆ | ☆ | 43
15、编程控制层
（1、元素的position样式值：static（无定位，显示在默认位置）、absolute(绝对位置)、fixed（相对于窗口的固定定位，位置不会随着浏览器的滚动而变化，IE6不支持）、relative(相对元素默认位置的定位)。如果要通过代码修改元素的坐标则一般使用absolute，然后修改元素的top（上边缘距离）、left（左边缘距离）两个样式值。
（2、createElement的两种用法，注意innerHTML的问题，
var input=document.createElement("<a href=‘[http://www.cnblogs.com/daomul](http://www.cnblogs.com/daomul)’>文本</a>")文本部分不会被识别
（3、设定一些DOm元素属性名的特殊属性：例如
label.setAttribute("for","username"); label.setAttribute("aaa","111");
案例1：高级选项的显示隐藏
高级选项的显示隐藏
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
4案例2：鼠标移动（1）
鼠标移动图片
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
4 20 美女与你同在21
案例3：鼠标移动显示信息（2）
鼠标移动显示信息
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
4案例4：小图片显示大图片
小图片显示大图片
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
4案例5：评分控件改进
评分控件改进
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
4| ☆42 | 43☆44 | 45☆46 | 47☆48 | 49☆50 | 51
案例6：搜索框关键字搜索
搜索框关键字搜索
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
416、Form表单： Form 对象是表单的 Dom 对象。
方法： submit() 提交表单，但是不会触发 onsubmit 事件。 实现 autopost ，也就是焦点离开控件以后页面立即提交，而不是 只有提交 submit 按钮以后才提交，当光标离开的时候触发 onblur 事件，在 onblur 中调用 form 的 submit 方法。在点击 submit 后 form 的 onsubmit 事件被触发 ，在 onsubmit 中可以 进行数据校验，数据有问题， 返回 false 即可取消提交。
案例1：
Form表单
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
417、正则表达式
/JavaScript 中创建正则表达式类的方法： var regex = new RegExp("\d{5}") 或者 var regex = /\d{5}/ / 表达式 / 是 JavaScript 中专门为简化正则表达式编写而提供的语法， 写在 // 中的正则表达式就不用管转义符了。 /RegExp 对象的方法： // test(str) 判断字符串 str 是否匹配正则表达式，相当于 IsMatch var regex = /.+@.+/; alert(regex.test("a@b.com")); alert(regex.test("ab.com")); // exec(str) 进行搜索匹配，返回值为匹配结果 ( / ) // compile 编译表达式，提高运行速度。 ( / ) /*String 对象中提供了一些与正则表达式相关的方法，相当于对于 RegExp 类的包装，简化调用： match(regexp) ,相当于调用 exec
var s = "aaa@163.com";
var regex = /(.+)@(.+)/;
var match = s.match(regex);
alert(RegExp.$1 + " ，服务器： " + RegExp.$2);
案例1：
正则表达式
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 3
418、不同浏览器的差异
19、键盘码操作以及金融框案例:
案例1：
财务相关系统中涉及到金额的文本框有如下要求：
/*进入金额文本文本框不使用中文输入法 不能输入非数字 焦点在文本框中时文本框左对齐；焦点离开文本框时文本框右对齐，显示千 分位 禁用输入法： style="ime-mode:disabled"
/*禁止键入非法值，只有这些才能被键入 (k == 9) || (k == 13) || (k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)|| (k>=48 && k<=57)||(k>=96 && k<=105)||(k>=37 && k<=40) 。 onkeydown="return numonKeyDown()" 不要写成 onkeydown="numonKeyDown()" 区分事件响应函数 和事件响应函数调用的函数。
/* 禁止粘贴 ( 伟大的 Tester) ， <input onpaste="return false;" ，太暴力，应该只是禁止粘贴非法值。在 onpaste 中通过 clipboardData.getData('Text')
取到粘贴板中的值，然后遍历每个字符，看是否是合法的值，如果全部是合法值才允许粘贴，只要有一个非法值就禁止粘贴。 charAt 、 charCodeAt添加千分位 的方法
/* 焦点在的时候左对齐没有千分位，焦点不在时右对齐千分位：this.style.textAlign='right'
金融文本框设置
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4
541 禁用输入法:42 43
44 不能输入和粘贴非数字:45 46
47 添加去掉千分位:48 51
52 53
省市选择
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 6
7 案例3：复选框实现全选、全不选、反选
复选框选择
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
443
44
45
46
47 48 49 50
51案例4：权限选择
权限选择
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3
4分类: javascript
绿色通道： 好文要顶 关注我 收藏该文与我联系
daomul
关注 - 1
粉丝 - 43
4
0 (请您对文章做出评价)
« 上一篇：ADO.NET- 基础总结及实例 » 下一篇：JQuery 学习总结及实例
