JQuery event-ready () method

After the page is loaded, run the statement in do stuff when DOM isready!
$ (Document). ready (function (){
      // Do stuff when DOM is ready
      });

Selector
$ ("A") is a jquery selector)
$ ("") Indicates the element tag. For example, $ ("div") is <div> </div>
Click is a function object method. The method is to click the mouse event!
    Example:
    $ (Document). ready (function (){
    $ ("A"). Click (function (){
      Alert ("Hello world! ");
        });
      });

$ ("Div "). click $ ("Div ") that is, all the DIV tags on the page. This sentence binds all the tags to the DIV element with a click event. That is, when all the divs are clicked, execute alert ("Hello world! ");

Selector and events)
Select Dom Element
Select an element with the ID orderedlist, which is equivalent to the document in JavaScript. getelementbyidx ("orderedlist"), in jquery, you only need $ ("# ID") where ID is the ID of the element, and the element is any element! Addclass is used to change the CSS class of this element to red.
$ (Document). ready (function (){
$ ("# Orderedlist"). addClass ("red ");
});

      $ ("# Id> xx") set the Class of CSS for all elements marked as xx under the element that represents ID, id is the element's idxx is the element's 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 only executes the reset () method for the form with the ID of form. But what if you have many forms to execute? You can write as follows:
$ (Document). ready (function (){
// Use this to reset several forms at once
$ ("# Reset"). click (function (){
     $ ("Form"). each (function (){
      This. reset ();
     });
});
});

Another problem you must face is to select one or more elements. Jquery provides the filter () and not () methods. When filter () is used to filter () expression elements, not () is used to delete elements that are opposite to not () expressions. What if you want to select all Li elements and do not contain ul sub-elements? You can write as follows:
$ (Document). Ready (function (){
$ ("Li"). Not ("[ul]" ).css ("border", "1px solid black ");
});

Find (expr) continues searching for objects that match the expression in the matched object
<P> Hello </P> <pid = "A"> helloagain </P> <Pclass = "selected"> Andagain </P>

Query code and functions:
Function JQ (){
   Alert ($ ("p"). Find ("# A" example .html ())
}
Find the object with ID a in the $ ("p") object

Suspect:

The result is that except for the Li that contains the UL sub-element, all other Li has a border. You may also want to select the anchor (<A>) with the name attribute ):
$ (Document). Ready (function (){
$ ("A [@ name]"). background ("# eee ");
});

To match the value of an attribute, we can use "* =" instead of "="
$ (Document). ready (function (){
$ ("A [@ href * =/content/gallery]"). click (function (){
     // Dosomething with all links that point somewhere to/content/gallery
});
});

Till now, we have learned a lot about using selector. In this case, you need to select the first or last element. Think about the FAQ in starterkit.htm. When you click a question, how does it hide and display it? The Code is as follows:
$ (Document). ready (function (){
$ ('# Faq'). find ('dd'). hide (). end (). find ('dt'). click (function (){
    Var answer = $ (this). next ();
    If (answer. is (': visable ')){
      Answer. slideUp ();
    } Else {
      Answer. slideDown ();
    }
   });
});

Because there is only one selector (# faq) above, we use chain to reduce the code length and improve the Code's readability and expressiveness. it should be noted that many people may not understand the translation in the original article, and I feel that they have not understood it. Let me talk about my own understanding:
Both 'dd' and 'dt' are # sub-elements of the faq. The function of find () is to find its sub-elements. End () should be matched with next (). end () is essentially to filter 'dd', that is, when next () is actually the reference 'dt '. In this way, the next of each 'dt' is 'dd', which is easy to implement. If you still don't understand it, you can follow it as a reference.

In addition to the same element, you can also select the parent element:
$ (Document). ready (function (){
$ ("A"). hover (function (){
     $ (This). parents ("p"). addClass ("highlight ");
}, Function (){
     $ (This). parents ("p"). removeClass ("highlight ");
});
});

P is the parent element of.

 

(Documentintent is to get the entire webpage document Object (your website Doc ument), $ (document). ready means that when the document object is ready.

$ (Document). ready (function (){
// Do stuff when DOM is ready // when the document is loaded, the code is executed from this place.
});