The previous blog "jquery preliminary research" briefly introduced jquery-related content. This is a simple example to experience the charm of jquery.
We want to achieve the following purpose: when the content of the text box is blank, a red border and a red wavy underline prompt will appear. if the content is empty, a prompt will be submitted, prompting "you have input everything, what do I submit? "; If you enter the content, the red box disappears and the submitted content appears in the lower part.
Front-End Interface:
HTML code:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> <HTML>Jquery. JS is required here.
CSS code:
. Usertext {/* the border of the control text box is a red solid line */Border: 1px solid red;/* Add a red underline under the text box */background-image: URL (.. /images/userverify.gif);/* duplicate horizontally */background-repeat: Repeat-X;/* appear at the bottom */background-position: bottom ;}JavaScript code:
$ (Document ). ready (function () {// run after Dom loading // obtain the text box var usernamenode =$ ("# username "); // register the button and click event $ ("# verifybutton "). click (function () {// 1. obtain the content of the text box var username = usernamenode. val (); // 2. send this content to the server side if (username = "") {alert ("You have input in everything and submit anything? ");} Else {$. Get (" http: // 127.0.0.1: 8080/jquery/userverify? Username = "+ encodeuri (username), null, function (response) {// 3. receive the data returned by the server and fill it in the DIV $ ("# result" ).html (response) ;}}); // you need to find the text box and register the event usernamenode. keyup (function () {// get the content VaR value = usernamenode in the current text box. val (); If (value = "") {// turns the border into red with the background image usernamenode. addclass ("usertext");} else {// remove the border and background image usernamenode. removeclass ("usertext ");}});});Partial running result diagram:
When the content is blank:
Empty:
The code is very simple. It is important to experience jquery's simple and rich selector, simple functions, and beautiful code. Only $ ("username") can be used to obtain controls. Simple addclass and removeclass can be used to control styles ...... Simple? Welcome to the next blog.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
