The first lesson of jquery learning Start

1.$ Picker ($ = = JQuery)

(1) $ ("div"). AddClass ("Special"), select all the <div> elements on this page, and add the div plus a CSS style named "Special". (2) $ ("div") selects all div elements. (3) $ ("#body") select an element with ID of body. (4) $ ("div #body") Select <div> with ID body. (5) $ ("Div.contents p") Select <div> all of the lower <p> elements of class contents. (6) $ ("Div>div") Select the next layer of <div> package <div>. (7) $ ("Div:has (div)") Select the <div> element that has at least one child <div>.

　　

2. jquery makes it easy to manipulate the DOM, such as adding, modifying, or deleting nodes, adding event handling to nodes, and so on.

(1) Select all <a> that contain the target property, and add a text below its node:

$ ("A[target]". Append ("Open in a new window")

(2) Select an element with ID of body and modify two CSS properties:

$ ("#body"). CSS ({border: "1px solid green", Height: "40px"});

(3) When submitting the form, determine if the username field is empty and if it is empty, the text within the Help block is displayed.

$ ("form"). Submit (function () {if ($ ("Input #username"). val () = = "") $ ("Span.help"). Show ();});

(4) When the user clicks the link with the ID open, the block with the ID of menu is displayed and False is returned.

$ ("A # Open"). Click (function () {$ ("menu"). Show (); return false;});

(5) The block with the ID menu is displayed with a dynamic pull-down effect.

$ ("#menu"). Slidedown ("fast");

(6) All the <div> gradient is 300px wide, the text and the border 20px wide.

$ ("div"). Animate ({width: ' 300px ', padding: ' 20px '}, ' slow ');

(7) The dynamic effect of the callback function, all <div> with 0.5s dynamic effect hidden, and then the dynamic effect of 0.5s display. where $ (this) is the element of the method method caller.

$ ("div"). Hide (500,function ({$ (this). Show (500);}));

(8) Obtain sample.html and find out all of the <div> underlying

$ ("#body"). Load ("sample.html div>h1");

(9) Obtain JSON-formatted data through Getjson and process the data through a callback method:

$.getjson ("Test.json", function (data) {for (var idx in data) $ ("#menu"). Append ("<li>" +data[idx]+ "</li>");});

　

3. Chain-style notation

X Select all the <div> in the page, and then hide them, modify the text to blue and show the effect of the <div> drop, then the original selection action:

$ ("div"). Hide (); $ ("div"). CSS ("Color", "Blue"); $ ("div"). Slidedown ();

To replace it with one line of code is:

$ ("div"). Hide (). CSS ("Color", "blue"). Slidedown ();

Code to be aware of:

$ ("Ul.open")   //Find out that all classes in the file are open <ul>.children           //filter out the next layer of all <li>.addclass ("open")     //to these <li> added a class.end ()//               to go back to the previous search results, that is, all <ul>.find ("a")          //Find out all of the <a>.click (function () {     //pair <a> new event handling $ (this). Next (). Toggle (); return false;}). End ();     Back to the previous search results

4. Document Ready Event

The document ready event of jquery simulates the DOM Content Loaded event.

The difference between DOM content Loaded events and Window.onload events is that DOM content Loaded events start earlier.

Also, Window.onload has no way to specify a different method to execute multiple times, and the last specified method overrides the previous method. Like what:

Window.onload = function () {alert ("Hello world!");}; Window.onload = function () {alert ("Hello");};

If you use jquery, you can write:

$ (document). Ready (function () {alert (' Hello world! ');}); $ (document). Ready (function () {alert (' Hello! ');});

　

Reference

1. "Qiao Jquey" Chao Wu Zhang Shuai.