JavaScript Dom学习笔记(一)

在这篇博客里面我们主要讲述了form对象，以及写JavaScript代码的时候不同浏览器之间的差异和在JavaScript中使用正则表达式的一些知识点，接下来我们做了两个练习来说明了这些知识点，那就是：回车实现Tab跳转和全额文本框。

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

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

(3) 方法：submit提交表单，但是不会触发onsubmit事件。

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

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

例题说明：

不同浏览器的差异
(1) 面试题：说说开发项目的时候不同浏览器的不同点，你是怎么解决的？

Appendchild,insertcell,px。

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

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

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

 3) 动态为网页和元素绑定事件，在IE中绑定事件的方法是：attachEvent，在FireFox中绑定事件的方法是AddEventListener。

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

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

JS中的正则表达式
(1) JavaScript中创建正则表达式类的方法：

 1) var regex=new RegExp(”d{5}”)或者var regex=^d{5}/

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

(2) RegExp对象的方法

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

     var regex=/.+@.+/;

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

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

 2) exec(str)进行搜索匹配，返回值为匹配结果。

 3) compile编译表达式，提高运行速度。

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

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

   var [email protected];

   var regex=/(.+)@(.+)/;

     s．match(regex);

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

案例1
回车实现Tab跳转，响应文本框的onkeyDown事件，window.event.keyCode获得用户点击的keycode。(*)

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

案例2
全额文本框:财务相关系统中涉及到金额的文本框有如下要求：

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

(2) 不能输入非数字。

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

注释：(1) 禁用输入法：style=”inne-mode:disabled”。

(2) 禁止键入非法值，只有这些才能够被键入

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

(4) 添加千分位