记录我的旅程9之JavaScriptDom学习笔记

前言:下面我们接着旅程8继续我们的Javascript Dom征程9。在这篇博客里面我们主要讲述了form对象&＃xff0c;以及写Javascript代码的时候不同浏览器之间的差异和在Javascript中使用正则表达式的一些知识点&＃xff0c;接下来我们做了两个练习来说明了这些知识点&＃xff0c;那就是&＃xff1a;回车实现Tab跳转和全额文本框。

1. form对象

(1) 先来写段代码举例说明一下吧

(2) form对象是表单的Dom对象

(3) 方法&＃xff1a;submit提交表单&＃xff0c;但是不会触发onsubmit事件。

(4) 实现autopost,也就是焦点离开控件以后页面页面立即提交&＃xff0c;而不是只有提交submit按钮以后才提交&＃xff0c;当光标离开的时候出发onblur事件&＃xff0c;在onblur中调用form的submit方法。

(5) 再点击submit后form的onsubmit事件被触发&＃xff0c;在onsubmit中可以进行数据校验&＃xff0c;数据有问题&＃xff0c;返回false既可以取消提交。

例题说明&＃xff1a;

1. 不同浏览器的差异

(1) 面试题&＃xff1a;说说开发项目的时候不同浏览器的不同点&＃xff0c;你是怎么解决的&＃xff1f;

Appendchild,insertcell,px。

(2) 不同浏览器中对Dom支持的方法不一样。

 1) 获取网页中哪个元素触发了事件&＃xff0c;在IE中使用srcElement;在FireFox下面使用target。

 2) 使用Dom获取和更改网页标签元素内文本&＃xff0c;在IE中使用innerText&＃xff0c;在FireFox中使用textContent。

 3) 动态为网页和元素绑定事件&＃xff0c;在IE中绑定事件的方法是&＃xff1a;attachEvent&＃xff0c;在FireFox中绑定事件的方法是AddEventListener。

(3) 不同浏览器中对CSS的支持不一样&＃xff0c;所以出现在IE中显示正常的网页&＃xff0c;在FF下面全部乱点了&＃xff0c;哀悼网页使用的CSS只有IE支持&＃xff0c;FF都不支持。

(4) JQuery之类的框架进行s了封装&＃xff0c;将不同的浏览器的差异帮开发人员处理了&＃xff0c;开发人员只要调用Jquery方法&＃xff0c;Jquery会帮助在不同的浏览器中进行翻译&＃xff0c;用JQuery就可以解决不同浏览器上的Dom的不同。

1. JS中的正则表达式

(1) Javascript中创建正则表达式类的方法&＃xff1a;

 1) var regex&＃61;new RegExp(”\\d{5}”)或者var regex&＃61;^d{5}/

 2) /表达式/是Javascript中专门为简化正则表达式编写而提供的语法&＃xff0c;写在//中的正则表达式就不用管转义符了。

(2) RegExp对象的方法

 1) test(str)判断字符串str是否匹配正则表达式&＃xff0c;相当于IsMatch。

     var regex&＃61;/.&＃43;&＃64;.&＃43;/;

     alert(regex.test(’934532778#qq.com’));

     alert(regex.test(’sss.ss.com’));

 2) exec(str)进行搜索匹配&＃xff0c;返回值为匹配结果。

 3) compile编译表达式&＃xff0c;提高运行速度。

(3) string对象中提供了一些与正则表达式相关的方法&＃xff0c;相当于对于RegExp类的包装&＃xff0c;简化调用。

 1) match(regexp),相当于调用exec。

   var s&＃61;934532778&＃64;qq.com;

   var regex&＃61;/(.&＃43;)&＃64;(.&＃43;)/;

     s&＃xff0e;match(regex);

alert(regexp.$1);  alert(RegExp.$2);  //取得第一组和第二组的值。

1. 案例1

回车实现Tab跳转&＃xff0c;响应文本框的onkeyDown事件&＃xff0c;window.event.keyCode获得用户点击的keycode。(*)

keyCode和ASCII不是完全一致&＃xff0c;主键盘的1和小键盘的1的ASCII一样&＃xff0c;但是keyCode不一样&＃xff0c;回车的KeyCode为13&＃xff0c;tab的keyCode为9

1. 案例2

全额文本框:财务相关系统中涉及到金额的文本框有如下要求&＃xff1a;

(1) 进入金额文本框下不使用中文输入法。

(2) 不能输入非数字。

(3) 焦点在文本框中的时候文本框左对齐&＃xff0c;焦点离开文本框中的时候文本框右对齐&＃xff0c;显示千分位。

注释&＃xff1a;(1) 禁用输入法&＃xff1a;style&＃61;”inne-mode:disabled”。

(2) 禁止键入非法值&＃xff0c;只有这些才能够被键入

(3) 禁止黏贴&＃xff08;伟大的tester&＃xff09;&＃xff0c;大暴力&＃xff0c;应该只是禁止黏贴非法值&＃xff0c;在onpaste中通过clipboardData.getData(‘text’)取到黏贴板中的值&＃xff0c;然后遍历每个字符&＃xff0c;看是否是合法的值&＃xff0c;如果全部是合法值&＃xff0c;才允许黏贴&＃xff0c;只要有一个非法值就禁止黏贴。

(4) 添加千分位