Summary of some jQuery features and usage

1. Precise and simple object selection (dom ):
Copy codeThe Code is as follows:
$ ('# Element'); // equivalent to document. getElementById
("Element ")
$ ('. Element'); // Class
$ ('P'); // html tag
$ ("Form> input"); // sub-Object
$ ("Div, span, p. myClass"); // select multiple objects at the same time
$ ("Tr: odd" ).css ("background-color", "# bbbbff"); // table
Background
$ (": Input"); // form object
$ ("Input [name = 'newsletter ']"); // a specific form object

2. The application of object functions is simple and unlimited:
Copy codeThe Code is as follows:
Element. function (par );
$ ("P. surprise"). addClass ("ohmy"). show ("slow ")...

3. Operations on selected objects (including styles ):
Copy codeThe Code is as follows:
$ ("# Element"). addClass ("selected"); // Add a style to the object
Certificate ('{element'}.css ({"background-color": "yellow", "font
-Weight ":" bolder "}); // Changes the object style.
$ ("P"). text ("Some new text."); // change the object text
$ ("Img"). attr ({src: "test.jpg", alt: "Test Image"
}); // Change the object text
$ ("P"). add ("span"); // add a label to the object
$ ("P"). find ("span"); // find the corresponding elements in the object
$ ("P"). parent (); // parent element of the object
$ ("P"). append ("<B> Hello </B>"); // add content to the object

4. Support for aJax and file formats: xml/html/script/json/jsonp
Copy codeThe Code is as follows:
$ ("# Feeds"). load ("feeds.html"); // imports static page content in the corresponding region
$ ("# Feeds"). load ("feeds. php", {limit: 25}, function ()
{Alert ("The last 25 entries in the feed have been
Loaded ") ;}); // import Dynamic Content

5. event support:
Copy codeThe Code is as follows:
$ ("P"). hover (function (){
$ (This). addClass ("hilite"); // move the cursor over it
}, Function (){
$ (This). removeClass ("hilite"); // move the mouse away
}); // Different effects (automatically loop all p objects)
)

6. Animation:
Copy codeThe Code is as follows:
$ ("P"). show ("slow"); // hide an object (slow gradient)
$ ("# Go"). click (function (){
$ ("# Block"). animate ({
Width: "90% ",
Height: "100% ",
FontSize: "10em"
},1000 );
}); // Dynamic changes in width, height, and font after clicking the mouse

7. Extension:
Copy codeThe Code is as follows:
$. Fn. background = function (bg ){
Return this.css ('background', bg );
};
$ (# Element). background ("red ");