JavaScript Dom Learning notes (i)

In this blog we talked about the form object and the differences between different browsers when writing JavaScript code and some knowledge of using regular expressions in JavaScript, and then we did two exercises to illustrate these points of knowledge, That is: Enter to implement tab jump and full text box.

Form Object
(1) First to write a paragraph code to illustrate the

The code is as follows

Copy Code

<form id= "Form1" action= "ball.htm" if (onsubmit= (' name '). document.getElementById) {alert (' cannot be empty '); return false;} " > <input type= "text" id= "name" onblur= "document.getElementById (' Form1 '). Submit ()"/> <input type= "button" id= "BTN1" onclick= "alert (' I'm thinking ')" value= "a button"/> <input type= "button" value= "I first submitted" onclick= "document.getElementById (' Btn1 '). Click ()"/> <input type= "button" value= "onclick=" document.getElementById (' Form1 '). Submit () "/> <input type= "Submit" value= "Validate form"/> </form>

(2) The Form object is the DOM object of the forms

(3) Method: Submit the form, but will not trigger the onsubmit event.

(4) Implementation of Autopost, that is, focus left the control page page immediately after the submission, and not only submitted submit button after submission, when the cursor left onblur event, in the onblur call form of the Submit method.

(5) Click Submit again after the form of the onsubmit event is triggered, in the onsubmit can be data validation, data problems, return False can cancel the submission.

Example Description:

The code is as follows	Copy Code
<form id= "Form1" action= "dongoto.htm" > <select onchange= "document.getElementById (' Form1 '). Submit ()" > <option> Jilin </option> <option> Gansu </option> <option> Beijing </option> </select> <input type= "Submit"/> </form>

Differences in different browsers
(1) Interview questions: Talk about the development of the project when different browsers different points, how do you solve?

Appendchild,insertcell,px.

(2) The DOM support methods in different browsers are not the same.

1 Get the Web page which element triggers the event, use srcelement in IE, and use target under Firefox.

2 use DOM to get and change the text inside the page tag element, use innertext in IE, use textcontent in Firefox.

3 dynamically for Web pages and element binding events, the method of binding events in IE is: attachevent, the way to bind events in Firefox is AddEventListener.

(3) Different browsers for the support of the CSS is not the same, so appear in IE in the normal Web page, under the FF all chaos, mourning the use of CSS Web page only IE support, FF do not support.

(4) The framework of jquery, such as the encapsulation, will be different browser differences for developers to deal with, as long as the developers call the jquery method, jquery will help in different browsers for translation, jquery can be used to solve different browsers on the different DOM.

Regular Expressions in JS
(1) Methods for creating regular expression classes in javascript:

1) var regex=new RegExp ("\d{5}") or Var regex=^d{5}/

2/Expression/is the syntax provided in JavaScript specifically for simplifying regular expressions, and regular expressions written in//are not used for escape characters.

(2) Method of RegExp Object

1 Test (str) determines whether string str matches a regular expression, equivalent to IsMatch.

var regex=/.+@.+/;

Alert (regex.test (' 934532778#qq.com '));

Alert (regex.test (' sss.ss.com '));

2) EXEC (str) searches for a match, the return value is the matching result.

3) Compile compiler expression, improve the speed of operation.

(3) A String object provides some methods related to regular expressions, equivalent to a wrapper for the RegExp class, which simplifies the invocation.

1 match (RegExp), equivalent to calling exec.

var s=934532778@qq.com;

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

S Match (regex);

alert (regexp.$1);  alert (regexp.$2); Gets the values for the first and second groups.

Case 1
Enter the tab jump, respond to the onkeydown event of the text box, Window.event.keyCode get the user clicks KeyCode. (*)

KeyCode and ASCII are not exactly the same, the main keyboard 1 and the keypad 1 of the same ASCII, but KeyCode is not the same, carriage return keycode for 13,tab KeyCode 9

The code is as follows	Copy Code
<body onkeydown= "if (window.event.keycode==13) {window.event.keycode=9}" > <input type= "Text"/> <input type= "Text"/> <input type= "Text"/> <input type= "Text"/> </body>

Case 2
Full text box: A text box involving amounts in a financial-related system has the following requirements:

(1) Enter the amount of text box does not use the Chinese input method.

(2) cannot enter non digit.

(3) When the focus is in the text box, the text box is aligned to the left, and the text box is right-aligned when the focus leaves the text box, displaying the thousand-bit.

Note: (1) Disable Input method: style= "inne-mode:disabled".

(2) Prohibit typing illegal values, only these can be typed

(3) Prohibit pasting (great tester), <input onpaste= "return false;" > Big violence, should only prohibit sticky stick illegal value, in Onpaste through Clipboarddata.getdata (' text ') to the value of the sticky board, and then traverse each character, see whether it is a valid value, if all is legal value, only allow sticky paste, It is prohibited to stick a sticker as long as there is an illegal value.

(4) Add thousand points

The code is as follows

Copy Code

<script type= "Text/javascript" > function Numkeydown () { var k = Window.event.keyCode; Return Isvalidnum (k); To determine if K is a valid ASCII } function Isvalidnum (k) { return (k = = 9) | | (k = = 13) | | (k = = 46) | | (k = = 80) | | (k = = 189) | | (k = = 109) | | (k = = 190) | | (k = = 110) | | (k >= && k <= 57) | | (k >= && k = 105) | | (k >= && K <= 40); } function Numpaste () { var text = clipboarddata.getdata ("text"); for (var i = 0; i < text.length; i++) { var asc = text.charcodeat (i); Charat--> "3", charCodeAt to take ASCII code if (!isvalidnum (ASC)) {//If an illegal value is encountered, it is considered illegal to paste the content. return false; } } } </script> <body> <input type= "text" onpaste= "return Numpaste ()" onkeydown= "Return Numkeydown" onfocus= "this.style.textalige= ' left '" onblur= "this.style.textalige= ' right '" style= "ime-mode:disabled"/> </body>