JQuery Practice --- getting started with JQuery + and jquery practice

JQuery Practice --- getting started with JQuery + and jquery practice

JQuery, in the mini-Editor world, is JavaScript and Query, which is the library used to assist JavaScript development. Baidu Baike gives a detailed introduction to JQuery, little friends can search on the Internet with Dongdong's tolerance. Maybe there is an unexpected surprise. In this blog, I will briefly introduce some basic JQuery knowledge, then let's talk about how JQuery shines on her stage in the specific application process ......

Through JQuery learning, we can learn some knowledge about nie. For example, we will learn how to use JQuery's API functions and how to implement simple instances. There are also some small knowledge about html, css, and js, anyone who is using the star-studded JQuery framework, such as Goole, IBM, ORACLE, DELL, and Tudou, is using JQuery for front-end development, is JQuery very popular.

After introducing some basic knowledge about JQuery, let's compile an example-user name verification. First, let's analyze the code ideas of this small example. First, let's analyze the ideas on the server side, the User Name returned for the specified user name already exists. For other user names, the user name returned can be used. Input: User Name; output: prompt information. before writing the code, make up a simple description of the directory of this small example: we need an html file named UserVerify. In addition, we need to write css and js files, it is quite popular now. According to the web standards, we need to place css files and js files separately for ease of management. We need to create css files and js files respectively. In addition, images may be used in applications, so we create an images file separately, and then we start to write the code:

There is a page file. Edit html first to ensure that the content is displayed through html tags. 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 under 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 {/* 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 ;}</span> </span>
Correspondingly, in js, we also need to create two files, one jquery and one userVerify. In view of the large amount of jquery code, xiaobian has uploaded relevant resources, if necessary, you can download the code from this link. Then, we will compile the userVerify code to add behavior capabilities to the Organization page:


<Span style = "font-size: 18px;"> <span style = "font-size: 18px;"> <span style = "font-size: 18px; ">/** two things need to be done through Javascript code * 1. when a button is pressed, you need to obtain the data in the text box, then send it to the server, and finally accept the data returned by the server, and fill it in our reserved div, in this way, the user can see the result * 2. in the text box, after you press the button, you need to determine whether the content in the text box is empty. If it is not empty, the red border and background image should be canceled, otherwise, you need to complete the page loading before you retained ** // **. These tasks are registered **/$ (document ). ready (function () {// The content here is the code var userNameNode =$ ("# userName") that needs to be executed after page loading is complete; // you need to find the button and press it, register events $ ("# veri FyButton "). 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 ("userName cannot be blank");} 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") ;}}) ;}</span> </span>
Let's take a look at the running effect:


Here is a small example. We know that html is responsible for page content, css is responsible for page styles, and js is responsible for page behavior, in html, doctype should be provided to inform the browser of the rendering display mode. border can control the border of page elements, and background-*** can control the background image and the position of the background image, repeated display methods, etc. We can all get a full understanding of these small knowledge points in this small example, add a small knowledge point, and send the data to the server to make the link encodeURL in js, then the server code according to the UTF-8 method to do a URLDecode, can solve the Chinese garbled problem.
Small message: In this blog, I briefly introduced some basic JQuery knowledge, and then gave an example of a simple user name verification. At the end of the article, I briefly summarized some of jquery's features, write less, Do More; JQuery is the designed header change the way that you write js; supports various mainstream browsers, including IE6 and later; based on powerful css selector, almost all operations first use selectors to find DOM objects and then perform various operations on them. Shielding browser differences provides convenient extension for DOM operations and has a powerful plug-in mechanism. BS summary, unfinished, To be continued ......