Functions:
1. One of my colleagues asked me to implement such a function, like PHP. Input a number in the form, and then the page shows the corresponding quantity. If it is PHP, it will be much simpler, jquery is still the first implementation, so we started a crazy experiment and finally implemented it (knowledge point: Jquery creates nodes, obtains form values, and loops)
Jquery code:
Copy codeThe Code is as follows:
<Script type = "text/javascript" language = "javascript">
$ (Function (){
$ ("# Btn"). click (function () {// select the element whose ID is btn and add a click event
Var result = $ ("input [name = 'text']"). val (); // obtain the value of the text box whose name is 'text' and define it as the result variable.
$ ("Div"). remove (". abc"); // deletes the div containing the. abc class during each execution;
For (I = 1; I <= result; I ++) {// for Loop, set I = 1, and Add 1 for each loop; when the I value is from 1 to the same value as the result value (that is, "name = 'text' value of the text box"), the loop is stopped.
Var createobj = $ ("<div class = 'abc'> created node </div>"); // defines div as the variable createobj.
$ ("Body"). append (createobj); // append the createobj variable to the 'body' in html.
}
});
});
</Script>
HTML code:
Copy codeThe Code is as follows:
<Body>
<Input type = "text" id = "text" name = "text"/>
<Input type = "button" id = "btn" value = "OK"/>
</Body>
CSS code:
Copy codeThe Code is as follows:
<Style>
. Abc {height: 50px; width: 50px; margin: 20px; background: # ccc ;}
</Style>