JQuery Study notes (tryjquery)

The first episode.
After the page load is completed, the JS code is executed:
$ (document). Ready (function () {

$ ("H1"). Text ("Where to?");

});

The second episode.
How to find page elements:

$ ("H1") using tags to get page elements

$ ("#ID") get page elements using tag ID

$(". ClassName ") get page elements using tag class name

Css

P {...}
#container {...}
. Articles {...}

Jquery

$ ("P");
$ ("#container");
$ (". Articles");

The third episode.
Gets the child elements in a page element and gets a collection of page elements in several ways:

$ ("#destinations Li"); Gets all the elements contained in the page element with ID destinations, including sons, grandchildren, generations ....

$ ("#destinations > li"); Gets the element that is directly labeled Li in the page element with ID destinations, and contains only the son.

$ (". Promo, #france"); Gets the number of child elements with the class name promo or ID France.

$ ("#destinations Li:first");

$ ("#destinations li:last");

$ ("#destinations li:odd");

$ ("#destinations Li:even");

Watch out, the index starts at 0

The fourth episode.
Using. First () is more efficient than using pseudo-classes: first efficiency is higher:

$ ("#destinations Li");

$ ("#destinations"). Find ("Li"); Fast speed

$ ("Li:first");

$ ("Li"). First (); Fast speed

$ ("Li:last");

$ ("Li"). Last (); //fast speed

$ ("Li"). First (). Next (). Prev ();

$ ("Li"). First (). parent ();

$ ("#destinations"). Children ("Li");

Children (), unlike find (), only selects direct children

The fifth episode.
add element <element> to the subordinate of the target element, before the subordinate, behind the sibling, in front of the sibling
. Append (<element>)

. prepend (<element>)

. After (<element>)

. Before (<element>)

Add the target element to the back of the element <element> subordinate, before the subordinate, behind the sibling, in front of the sibling

. AppendTo (<element>)

. Prependto (<element>)

. Insertto (<element>)

. Insertbefort (<element>)

The seventh episode.

. Closest () iterates through the current element, walking up the DOM tree until it finds a match that has been applied to the selector, and returns a JQuery object with 0 or one element. . Parents () iterates from the parent element, walking up the DOM tree up to the root of the document, adding each ancestor element to a temporary collection, and filtering the collection based on that selector if a selector is applied.

The eighth episode.
Get the value of a custom property

JQuery Study notes (tryjquery)