A practical example of jquery---initial knowledge jquery+

jquery in the small part of the world, that is, JavaScript and query (query), which is a library of auxiliary JavaScript Development, Baidu Encyclopedia of the introduction of jquery more detailed, small partners can be east of their own small claws, internet search, perhaps, there are unexpected surprises oh, Today, this blog, small part of a simple introduction of jquery some basic knowledge, and then small in the collection of examples, 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 function, as well as a simple instance of the implementation of some HTML, CSS, JS little knowledge, as the star-level framework jquery, who are using NIE, For example, we are familiar with Goole, IBM, ORACLE, DELL, potatoes and so on, are using jquery to do front-end development, our jquery is not very hot.

After the introduction of some of the basic knowledge of jquery, then, the small part of the simple to write an example---the user elite, first of all, we analyze this small example of the code idea, the first server-side thinking analysis, the user name returned to the specified user name already exists, for other user names, return user name can be used ; input: User name; output: Prompt information, and then we write the code, before writing the code, the small part of a simple description of the small example of the directory: we need an HTML file, we named Userverify, in addition, we need to write CSS and JS files, It's more popular now. According to the Web standards, we need to put the CSS file and JS file separate, easy to manage, we need to set up CSS files and JS file, in addition, the application may need to use the picture, so we create a separate images file, then we began to write code:

There is a page file, first to edit the HTML, to ensure that the contents of the content through the HTML tag, the code is as follows:

<span Style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" ><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
Next , create a CSS file in the CSS file directory and write the CSS code:
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >.usertext {/* Controls the border of the text box is a solid red */border:1px solid Red;background-image:url (.. /images/userverify.gif); background-repeat:repeat-x;background-position:bottom;}  </span></span></span>
Accordingly, in JS we also want to build two files, a jquery a userverify, in view of the jquery code more, so the small series has uploaded related resources, the need for small partners to the link to download, and then we write userverify code, To add capacity to the finishing page:
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >/* * Need to do two things with JavaScript code * 1.button is pressed, you need to get the data in the text box, then send to the server side, and finally accept the data returned by the server, populate the div we reserved, so that users can see the result * 2. text box, after the user keys, you need to determine whether the contents of the text box is empty, if not empty, the red border and the background map should be canceled, otherwise reserved * *//* * need to complete the page loading is registered on these jobs * */$ (document). Ready (function () {// The content of this is the code to be executed after the page is loaded var Usernamenode = $ ("#userName");//need to find the button press to register the event $ ("#verifyButton"). Click (function () {// 1. Get the contents of the text box var userName = Usernamenode.val ();//2. Send this content to the 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 ( Response) {//3. Receive server-side returned data, populated into Div $ ("#result"). HTML (response);});}); /need to find a text box, register event Usernamenode.keyup (function () {//Get the contents of the current text box var value = Usernamenode.val (), if (value = = "") {//Let the border turn red, And with the background figure usernamenode.addclass ("Usertext");} else {//remove border and background image Usernamenode.removeclass ("Usertext");});}); </span></span></span>
Let's look at the effect of the operation:
Small example, small part of the demonstration here, through this small example, we know that HTML is responsible for page content, CSS is responsible for page style, JS responsible for page behavior, HTML should have DOCTYPE to tell the browser rendering display, border Zodiac can control the page element of the border, background-*** can control the background map, as well as the position of the background map, repeated display of the way and so on, these small knowledge points, we can get a full understanding in this small example, to supplement a small knowledge point, sent to the server side of the data in JS to do conjunctions Encodeurl, Then the server side of the code in accordance with UTF-8 to do a urldecode, can solve the problem of garbled in Chinese.
 Small Editor's note: this blog, the small part of the main simple introduction of the basic knowledge of jquery, and then give a simple user of the famous school example, the end of the article, a simple summary of some features of jquery, Write Less,do More;jquery is designed head change the the-the-the-go-JS; supports a variety of mainstream browsers, including IE6 and above, and based on a powerful CSS selector, almost all operations use selectors to find DOM objects first. Then the various operations, shielding browser differences, the operation of the DOM provides a convenient extension, with a powerful plug-in mechanism. BS Summary, not finished, to be continued ...

A practical example of jquery---initial knowledge jquery+