jquery Simple Get Started example user checksum demo sample _jquery

This example describes the user checksum of the jquery simple Getting started example. Share to everyone for your reference, specific as follows:

jquery in the small series of the world, that is, JavaScript and query (query), that is, the Library of Auxiliary JavaScript Development, Baidu Encyclopedia on the introduction of jquery more detailed, small partners can east their own small claws, internet search, perhaps, there are unexpected surprises oh, Today's article, small set of simple to introduce some of the basics of jquery, and then small compiled in the collection instance, explain how in the specific application process, our jquery is how to shine on her stage ...

Through the study of jquery, we can learn what knowledge nie, such as we will learn the use of jquery API functions, as well as simple examples of the implementation of a few HTML, CSS, JS small knowledge, as a star-level framework of jquery, who are using NIE, For example, we are familiar with the Goole, IBM, ORACLE, DELL, potatoes and so on, are using jquery to do front-end development, our jquery is not very hot.

After introducing some of the basics of jquery, Next, small set simple to write an example---user famous school, first of all, we analyze this small example of code thinking, first server-side analysis, the user name returned to the specified already exists, to other user names, return user name can be used ; input: User name; output: Hint information, then we write code, write code, before writing a simple description of the directory of this small example: we need an HTML file, we named Userverify, in addition, we need to write CSS and JS files, It's more popular now. Follow the web standards, we need to put the CSS file and JS file separate, easy to manage, we need to build CSS files and JS files, in addition, the application may need to use the picture, so we set up a separate images file, and then, we began to write code:

There is a paging file, first to edit the HTML, to ensure that the inner content through the HTML tag, the code is as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
< html>
   
 

Next, create a CSS file in the CSS file directory and write CSS code:

. usertext {
  /* The border of the control text box is a red solid line
  /border:1px solid red;
  Background-image:url (.. /images/userverify.gif);
  Background-repeat:repeat-x;
  Background-position:bottom;
}

Accordingly, in JS we also want to build two files, a jquery a userverify, given the jquery code more, so the small set has uploaded the relevant resources, the need for small partners to download the link, and then, we write userverify code, To add capacity to the finishing page:

* * * need JavaScript code to do two things * 1.button is pressed, you need to get the data in the text box, and then send it to the server side, and finally accept the data returned by the server, fill in our reserved div so that the user can see the result * 2. On the text box, After the user presses the key, you need to determine whether the contents of the text box are empty, if not empty, the red border and background map should be canceled, otherwise the * * * * * * * * * * needs to be registered on the page loading * * * * * * * * * * * * * * * */
  The content of the page is the code var Usernamenode = $ ("#userName") that needs to be executed after the load is completed;
    Need to find button press, register event $ ("#verifyButton"). Click (function () {//1. Gets the contents of the text box var userName = Usernamenode.val ();
    2. Send this content to server-side if (UserName = "") {alert ("User name cannot be empty"); else {$.get ("http://127.0.0.1:8080/JQuery/UserVerify?userName=" + encodeURI (encodeURI (UserName)), Null,function (R
        Esponse) {//3. Receive server-side returned data, populated into Div $ ("#result"). HTML (response);
    });
  }
  });
    You need to find the text box, register the event Usernamenode.keyup (function () {//Get the contents of the current text box var value = Usernamenode.val ();
    if (value = = "") {//Make border red, and with background image usernamenode.addclass ("Usertext");
    else {//remove border and background image Usernamenode.removeclass ("Usertext");
}
  }); });

 

Let's take a look at the effects of the operation:

Small example, small series on the demo to here, through this small example, we know HTML is responsible for page content, CSS is responsible for page style, JS is responsible for page behavior, HTML should have DOCTYPE to inform the browser rendering display mode, border Zodiac can control the border of page elements, background-*** can control the background map, as well as the location of the background map, the way to repeat the display, and so on, these small knowledge points, we can get a full understanding of this small example, to supplement a small point of knowledge, sent to server-side data in JS to do conjunctions Encodeurl, Then the server-side code in the UTF-8 way to do a urldecode, can solve the garbled problem in Chinese.

More interested readers of jquery-related content can view the site: "jquery form Operation Tips", "jquery common Plug-ins and Usage summary", "jquery operation JSON data techniques Summary", "JQuery Extended Skills Summary", " jquery drag-and-drop effects and tips summary, jquery table (table) Operation tips Summary, "jquery Ajax Usage Summary", "jquery common Classic Effects Summary", "jquery animation and special effects usage Summary" and "jquery Selector usage Summary"

I hope this article will help you with the jquery program design.