$ (document). Ready (function ()

$ (document). Ready (function ()

The Window.onload event is executed when the page is fully loaded
$ (function () {}) is executed when the label on the page is finished loading

After the page loads, start running the do stuff when DOM is in ready statement!
$ (document). Ready (function () {
Do stuff when DOM was ready
});
Selector Selector
$ ("a") is a jquery selector (selector)
$ ("") where the field is the tag of the element. For example $ ("div") is <div></div>
Click is a method of a function object. Method for mouse click event!
Cases:
$ (document). Ready (function () {
$ ("a"). Click (function () {
Alert ("Hello world!");
});
});

$ ("div"). Click $ ("div") is all the div tags on the page this is a click event that is bound to all the elements of the tag div ("Hello world!") when all the div is clicked by the mouse;

Selector (selector) and event (events)
Select DOM Element
Select an element with ID orderedlist, which is equivalent to document.getElementById ("Orderedlist") in JavaScript, and only $ ("#id") in jquery, where ID is the ID of the element, element is any element! AddClass to change the CSS class of this element to red
$ (document). Ready (function () {
$ ("#orderedlist"). AddClass ("Red");
});

$ ("#id > XX") this represents the ID of the element under which all elements marked as XX are set to the class of CSS, the ID of the element ID xx is the element of the tag example <div><li><a> and so on!
$ (document). Ready (function () {
$ ("#orderedlist > Li"). addclass ("Blue");
});

$ (document). Ready (function () {
Use this to reset a single form
$ ("#reset"). Click (function () {
$ ("#form") [0].reset ();
});
});

This code simply executes the reset () method with the form ID. But what if you have a lot of forms that need to be executed? So you can write this:
$ (document). Ready (function () {
Use this to reset several forms at once
$ ("#reset"). Click (function () {
$ ("form"). each (function () {
This.reset ();
});
});
});

Another problem you have to face is choosing one or several elements. jquery provides the filter () and not () methods. When filter () is filtering some elements that are appropriate for the filter () expression, and not () is the opposite of the Delete and not () expressions. When you want to select all the LI elements and do not include the UL sub-elements? You can write this:
$ (document). Ready (function () {
$ ("Li"). Not ("[UL]"). CSS ("Border", "1px solid black");
});

Find (expr) continues to look for objects that match an expression in a matching object
<p>hello</p><p id= "A" >hello again</p><p class= "selected" >and again</p>

Query code and Features:
function JQ () {
Alert ($ ("P"). Find ("#a"). HTML ())
}
Look for an object with ID A in the $ ("P") object

Doubt:

The result is that except for Li, which contains the UL sub-elements, all the other Li have got a border. Maybe you want to choose a anchor with the name attribute (<a>):
$ (document). Ready (function () {
$ ("a[@name]"). Background ("#eee");
});

To match the value of a property, we can use "*=" instead of "="
$ (document). Ready (function () {
$ ("a[@href *=/content/gallery]"). Click (function () {
Do something with all links, point somewhere to/content/gallery
});
});

Until now, we have learned a lot about the use of selectors. There's a situation here. You need to select the previous or next element. Think about the FAQ in starterkit.htm, when you click the question, how does it implement hiding and showing? The code is this:
$ (document). Ready (function () {
$ (' #faq '). Find (' dd '). Hide (). End (). Find (' DT '). Click (function () {
var answer = $ (this). Next ();
if (answer.is (': Visible ')) {
Answer.slideup ();
} else {
Answer.slidedown ();
}
});
});

Because there is only one selector (#faq) above, we use chain to reduce the length of the code and improve the readability and performance of the code. Here to explain, if translated according to the original text I think a lot of people can not understand, feel he did not say how to understand. I'm talking about my own understanding:
Both ' DD ' and ' DT ' are child elements of #faq, and find () is the function of finding its child elements. End () should be paired with next (), and end () essentially filters ' DD ', which is essentially the reference ' DT ' when it is next (). So each ' dt ' next is ' DD ', very easy to achieve. If you do not understand it, you can do it again by reference.

In addition to the generic element, we can also select the parent element:
$ (document). Ready (function () {
$ ("a"). Hover (function () {
$ (this). Parents ("P"). AddClass ("highlight");
}, function () {
$ (this). Parents ("P"). Removeclass ("highlight");
});
});

It's easy to see that p is the parent element of a.

(document) means to obtain an entire Web page document object (similar to Window.document), $ (document). Ready means to get the document object in place.

$ (document). Ready (function () {
Do stuff whenever DOM is ready//starts executing code from here when the document is loaded
});

$ (document). Ready (function ()