Examples of dom operations and events in jquery-Form Verification

Obviously, this can improve the user experience.
Html code:
Copy codeThe Code is as follows:
<Form method = "post" action = "">
<Div class = "int">
<Label for = "username"> User name: </label>
<Input type = "text" id = "username" class = "required"/>
</Div> </form>

Jquery code:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
$ ('Form: input'). blur (function (){
Var $ parent = $ (this). parent ();
$ Parent. find (". formtips"). remove ();
If ($ (this). is ('# username ')){
If (this. value = "" | this. value. length <6 ){
Var msg = "<span class = 'formtips error'> enter at least 6 usernames </span> ";
$ (Msg). appendTo ($ parent );
} Else {
Var msg = "<span class = 'formtips success '> the input is correct </span> ";
$ (Msg). appendTo ($ parent );
}
}
}). Keyup (function (){
$ (This). triggerHandler ("blur ");
}). Focus (function (){
$ (This). triggerHandler ("blur ");
})
})
</Script>

Now, let's analyze the jquery statements in detail.
First look at the dom operation statement
$ ('Form: input') is used to find the <input>, <textarea>, <select>, and <button> elements under the form element.
Similarly, there are $ (': text'), $ (': checkbox'), and so on. Anyway, you only need to understand that the corresponding elements can be obtained through the form selector only in the form.
Parent () is the parent node that finds matching elements. Find () is used to search for elements matching expressions. Remove () is used to delete elements.
Is () is to use an expression to check the Element Set of the current selector. if at least one matching element exists, true is returned.
AppendTo () is to add an element to an element.
TriggerHandler () is a special method that triggers a specific event on the element.
Let's look at the event statement.
Keyup () is triggered when the button is up.
It is not difficult to understand the above Code after understanding each method
This code may be in doubt. $ Parent. find (". formtips"). remove ();
This statement ensures that only one element is prompted. If this sentence is not found, the system will add the prompt element.