我是一个菜鸟，我只是在努力，2021正视自己，面对2021！

记录我的旅程9之JavaScript Dom学习笔记

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

  1. form对象

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

 1 <form id="form1" action="ball.htm" onsubmit="if(document.getElementById('name').value.length<=0){alert('不能为空');return false;}">
 2 
 3     <input type="text" id="name" onblur="document.getElementById('form1').submit()" />
 4 
 5     <input type="button" id="btn1" onclick="alert('我惦记了')" value="一个按钮" />
 6 
 7     <input type="button" value="我最先提交" onclick="document.getElementById('btn1').click()" />
 8 
 9     <input type="button" value="提交吧" onclick="document.getElementById('form1').submit()" />
10 
11     <input type="submit" value="验证Form" />
12 
13 </form>

 

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

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

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

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

例题说明：

  

 1   <form id="form1" action="dongoto.htm">
 2 
 3         <select onchange="document.getElementById('form1').submit()">
 4 
 5             <option>吉林</option>
 6 
 7             <option>甘肃</option>
 8 
 9             <option>北京</option>
10 
11         </select>
12 
13         <input type="submit" />
14 
15     </form>

 

  1. 不同浏览器的差异

(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的不同。

  1. 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 s=934532778@qq.com;

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

     s．match(regex);

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

  1. 案例1

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

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

 1 <body onkeydown="if(window.event.keyCode==13){window.event.keyCode=9}">
 2 
 3 <input type="text" />
 4 
 5 <input type="text" />
 6 
 7 <input type="text" />
 8 
 9 <input type="text" />
10 
11 </body>

 

  1. 案例2

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

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

(2) 不能输入非数字。

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

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

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

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

(4) 添加千分位

   

 1 <script type="text/javascript">
 2 
 3         function numkeyDown() {
 4 
 5             var k = window.event.keyCode;
 6 
 7             return isValidNum(k);  //判断K是否是合法的ASCII
 8 
 9         }
10 
11         function isValidNum(k) {
12 
13             return (k == 9) || (k == 13) || (k == 46) || (k == 80) || (k == 189) || (k == 109) || (k == 190) || (k == 110) || (k >= 48 && k <= 57) || (k >= 96 && k == 105) || (k >= 37 && k <= 40);
14 
15         }
16 
17         function numpaste() {
18 
19             var text = clipboardData.getData("text");
20 
21             for (var i = 0; i < text.length; i++) {
22 
23                 var asc = text.charCodeAt(i); //charAt——>"3",charCodeAt取ASCII码
24 
25                 if (!isValidNum(asc)) {  //遇到一个非法值就认为要黏贴的内容是非法的。
26 
27                     return false;
28 
29                 }
30 
31             }
32 
33         }
34 
35     </script>
36 
37 </head>
38 
39 <body>
40 
41 <input type="text" onpaste="return numpaste()" onkeydown="return numkeyDown"
42 
43 onfocus="this.style.textalige='left'"
44 
45  onblur="this.style.textalige='right'"
46 
47   style="ime-mode：disabled"  />
48 
49 </body>

 

posted @ 2012-08-06 21:57  Kencery  阅读(518)  评论(0)  编辑  收藏  举报
友情链接：初心商城