Small Valley actual combat jquery (a)--the user's famous school inspection

the little Goodong shoes rested for several days , finally started to learn again. . What I learned today Jquery , Let 's take a look at God's horse. JQ uery ?

• J Query is designed-to-change the the-the-to-write JavaScript.
• the focus of JQuery is "find some elements, does something with them".
• Write Less,do more.

It is a multi-browser-compatible JavaScript framework that is compatible withCSS3,enables users to easily handlehtml,events,animating Effects,UseAjaxwait.characterized by a strongCSSSelector-based,almost all operations first use selectors to findDOMObject,then perform various operations on it.

Learning JQuery used to be learned before. Html,javascript , CSS with the DIV wait , The following is a summary of the learning process in the actual combat harvest it .

today is a small example of a user's famous school,divided into two parts of server-side page end,on the server side,When the user name entered already exists,Prompt user name already exists,Otherwise, the user name is available.the focus is on the writing of the client code,tips for page information during the input process.That 's right.,because otherJSFile UsageJQuerywrote the,so to write the introductionJQueryfile,It's like getting a tool first .(jQuery),and then use the tool to manipulate(otherJSfile)it,otherwise the program is not running..introduction of File One:

Figure A

uservarify . js the code is as follows :

/** need to do two things through JavaScript code *1.button be pressed, get the data in the text box, send to the server side, and finally accept the data returned by the server, fill in our reserved div. text box, after the user keys, You need to determine if the contents of the text box are empty, and if it is not empty, remove the red border and the background image, otherwise keep */$ (document). Ready (function () {///This is the code var usernamenode=$ that will be executed after the page is loaded: "#userName");//need to locate the button, register the event $ ("#varifyButton"). Click (function () {//Get the contents of the text box var username=usernamenode.val (); /Send this content to server-side if (username== ") {alert (" User name cannot be empty! ");} Else{$.get ("http://192.168.24.118:8080/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, With background image usernamenode.addclass ("Usertext");} else{//remove border and background image Usernamenode.removeclass ("Usertext");});});

uservarify . CSS the code is pretty simple . , only a few words to achieve the effect of the cue line , CSS the strength of the we still have to experience it slowly ~~

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

particles:

Small examples also involve a lot of technology, small Goodong shoes very seriously summed up a bit:

1. It is not difficult to find that HTML is responsible for the content of the page, CSS is responsible for the page style, and JavaScript is responsible for page behavior.

2. The first paragraph of the markup section of figure I specifies the rendering specifications used by the browser in interpreting the HTML code, such as the display position and size of the elements. This rendering specification is given by the web, and each browser interprets the HTML code according to this specification. The result is a rich and colorful page effect. But even under the same DOCTYPE specification, different browsers will render HTML pages in different text patterns. There are three types of text modes: weird mode, Standard mode and almost standard mode. We can get the value of Document.compatmode by JS to get the text pattern used by the current browser, this value is usually two, Backcompat (odd text mode), Css1compat (standard text mode).

3. Define a div or span node to display the server return data at a later time. It's a little trick, so we get the data.

4.$ (document). Ready (function () {}) defines the method to be executed when the page is loaded.

The 5.$ () method gets the page-specific node, which is the selector for some CSS, by getting the DOM and defining events, performing operations or getting data to accomplish what we want to accomplish.

The 6.$.get () method can interact with the server side for Get mode, and when the data is returned it calls the callback method, which receives a plain-text parameter that represents the return data on the server side.

7. We want a CSS effect to be optional, you can use the addclass ()/removeclass () method to add or remove a class to a node, which controls the effect of CSS on the node with that class's HTML.

In fact, finished this example, small Goodong shoes really feel jquery is very simple ah.