Implementation features:
1, a classmate asked me to implement a function like PHP, enter a number in the form, and then the page will appear the corresponding number; if it is PHP is much simpler, jquery implementation is the first, the beginning of the mad experiment, and finally realized (Knowledge point: jquery Create nodes, Gets the value of the form, the Loop statement)
jquery Code:
Copy Code code as follows:
<script type= "Text/javascript" language= "JavaScript" >
$ (function () {
$ ("#btn"). Click (function () {//SELECT element with ID btn, add click event
var result = $ ("input[name= ' text ']"). Val (); Gets the value of the text box with the name ' text ' and defines it as a variable result
$ ("div"). Remove (". abc"); The function is to delete the div containing the. ABC class every time it is executed;
for (i=1;i<=result;i++) {//for loop, set I=1, add 1 to each loop, and stop the loop when I's value from 1 loops to the value equal to result (that is, "the value of the text box's name= ')"
var createobj = $ ("<div class= ' abc ' > Nodes created </div>"); Define DIV as variable createobj
$ ("Body"). Append (Createobj); Append the createobj variable to the ' body ' in HTML
}
});
});
</script>
HTML code:
Copy Code code as follows:
<body>
<input type= "text" id= "text" name= "text"/>
<input type= "button" id= "btn" value= "OK"/>
</body>
CSS code:
Copy Code code as follows:
<style>
. abc {height:50px;width:50px; Margin:20px;background: #ccc;}
</style>
