Examples of jQuery Learning

Program code
Window. onload = function (){...}.
To access HTML documents, you must first load the Document Object Model (DOM ). When the window. onload function is executed, it indicates that everything has been loaded, including images and banners. You need to know that the download speed of a large image is relatively slow. Therefore, you must wait until the download of the large image is complete before you can see the window. it takes a long wait time for the code executed by onload (), which is not what we want.
Jquery provides a "ready" event. You can use the following code snippet:
Program code
$ (Document). ready (function () {// when the document object is ready, you do not need to wait until the image is downloaded.
// Your code
});
Optional (document): Obtain the document Object of the entire web page (Yu weijing Doc ument), $ (document). ready means that when the document object is ready.
The above code indicates checking the Document Object until it can be operated. the onload () function is much faster, because the code can be executed as long as the file object is loaded, without waiting for the image download on the page to complete.) --- this is what we want. Well, let's not talk about anything else. Let's start to use jQ to write a few simple examples.

1, demo1: -- trigger when the mouse is clicked
First, some actions are triggered when you try to click a hyperlink. Add the following code to the ready function:
Program code
$ ("P"). click (function () {// obtain the object of all paragraph p. Add the click event to it and add it to readey.
// Your code
});

2, demo2: -- add CSS Class
Another thing is that a common task is to add or remove the css class of elements, for example:
Program code
$ ("A"). addClass ("test ");
$ ("A"). removeClass ("test"); // you can change the style through $ ("p"). toggleClass ("selected ");

3, demo3: -- Use of show () and html ()
$ ("A"). addClass ("test" cmd.show(cmd.html ("foo"); // The jquery method can be connected.
// How (): displays hidden matching elements.
// Html ("info"): sets the html content of each matching element.

4, demo4: -- special effect hide ()
$ ("A"). click (function (){
$ (This). hide ("slow"); // The object gradually disappears and is hidden.
Return false; // indicates no jump, equivalent to js
});

5. demo5: --- expand and contract
$ (Document). ready (function (){
$ ("# Head"). click (function (){
$ ("# Content"). slideToggle ("slow", function () {alert ("Hello, cssrain ..");});
}); // SlideToggle (speed, callback) Highly changed switching visibility. After the switch is complete, a callback function can be triggered.
}); // Speed "slow", "normal", or "fast" can also specify a value

6. demo6: -- appendTo usage
{$ ("# Head2"). click (function ()
{$ ("<Input type = 'text' name = 'ddd 'id = 'ddd' value = 'hello, cssrain .. '> <br> "). appendTo ("# ccc ");});}
<Input type = "button" name = "head2" id = "head2" value = "appendTo">
<Div name = "ccc" id = "ccc"> check the changes here </div>
// AppendTo (): append all matched elements to another specified element set, that is, add sub-nodes.
// Append (): adds a subnode to an element.

7, demo7: -- The table is discolored across rows, the mouse slides over the color, and click the color.
Code explanation:
In this example, I have put the explanation on, so I will not post comments here.
The following examples are used: mouseover (), addClass (), mouseout (), removeClass (), click (),
ToggleClass (), tr: even and other methods.
The difference between toggle () and toggleClass () is also explained.
In addition, I used the chain operation in this example. You can view the explanations in the chain operation .txt.

8, demo8: -- toggle () usage:
$ ("P "). toggle () // specifies the visible state of the switching element. Note that this parameter has an effect on all p. You can also switch the toggle (Function even, Function odd) methods ).

9, demo9: -- hover () usage:
Hover (function over, function out) // simulates a hovering event
$ ("# Orderedlist tr"). hover (function over, function out) // Add all rows in a table

10, demo10: -- $ can also be replaced by jQuery
$ (Document). ready (function () {// your code}); $ in // can also be replaced by jQuery
JQuery (document). ready (function (){
JQuery ("."). click (function () {jQuery (this). toggleClass ("")})
}); // The advantage is that you may use $ in other js libraries and may conflict with each other. It is safer to replace $ with jQuery.

There is:
$ (Document). ready (function () {// your code}); // Abbreviation: $ (function () {// your code });

11. demo11: -- each-find usage
$ ("# Orderedlist"). find ("li"). each (function (I ){})
// Find ("li") to find all li elements. The each () method is used to execute each object in the set.
// Each (the Function to be executed by Function fn) uses every matching element as the context to execute a Function.

12, demo12: -- parents () usage:
$ (This). parents ("p"). addClass ("highlight"); // a tag closest to it
This. parent () // specifies the parent node of the object.

13, demo13: -- load () usage:
$ ("# Feeds"). load ("FAQ1.html", function () {alert ("load is done ");}
<Div id = "feeds"> </div>
// Load HTML from a remote file and inject it into the DOM

14. demo14: -- next usage:
. Next () // obtain the next sibling node of the object.

Pack the jQuery beginner's learning instance code set