JQuery (powerful JQuery selector _ jquery)

It has been more than a year since learning jQuery, but it has never been practiced due to WinForm program development. Now we start to redevelop WebForm again. Write several jQuery series to learn more about the jQuery framework. Since the birth of jQuery, it has made great achievements and recognized. JQuery is a lightweight JavaScript framework. Its release version is about 16 kb. It allows you to easily and concisely write beautiful animation effects, implement various visual effects, and easily process JavaScript DOM numbers and Ajax interactions. It has the advantages of being lightweight, easy to learn, easy to expand, and has a large number of jQuery plug-ins used across browsers and the Internet. Thanks to its many advantages, it has been officially recognized by Microsoft and has powerful Smart Tips in vs ide, according to official statistics, at least 20% of large international websites have joined jQuery as their scripts.

1: first, the distinction between JavaScript DOM and jQuery packaging Sets

1.1: In JavaScript, the access method is to operate the DOM structure. The available methods are as follows:

1: document. getElementById ("ID"): Get the DOM object by ID.

2: document. getElementsByName ("name"): obtains a DOM Array Based on the HTML Tag name attribute.

3: document. getElementsByTagName ("Tag"): obtains a DOM Array Based on the HTML Tag.

1.2: Compared with DOM, jQuery provides many available methods and attributes.

JQuery's simple object acquisition includes $ ("# id"), $ (". class), $ ("tag"), and its writing method is similar to that of css3.0.., HTMl Tag is written directly. The jquery selector is described below.

1.3: JavaScript DOM objects can be converted into jQuery packaging sets: $ (element) is used to wrap jQuery.

2: jQuery provides 10 thousand attribute selectors.

2.1 Basic Selector

Select expression	Description	Example
# Id	Matching an element with a given ID #	$ ("# TestDiv2") Get the element whose ID is testDiv2
. Class	It is used according to the given class Matching Element (that is, taking the class value.	$ (". MyDiv") gets a group of elements whose class is myDiv
Element	Match All elements based on the given element name, and directly write the element name (p, a, input, p, etc)	$ ("P") Get all p elements
Selector1, selector2, selectorN	Returns the result of merging the elements matched by each selector. The selector can be IDs, classes, and elements separated by commas (,).	$ ("# TestDiv2, p ") $ ("P, span, p. myDiv") obtains all elements whose p, span, and class are myDiv.
*	Select all elements	$ ("*")

2.2Simple Selector

Select expression	Description	Example
: First	Match the first element found	$ ("P: first ")
: Last	Match the last element found	$ ("P: last ")
: Eq (index)	Matching an element with a given index value can be found only if it exists. The index starts from 0.	$ ("P: eq (1 )")
: Gt (index)	Match All elements greater than the given index value	$ ("P: gt (0)") Search for 1st elements later
: Lt (index)	Match All elements smaller than the given index value	$ ("P: lt (2)") Find the elements in the first and second rows
: Even	Matches all elements with an even index value and starts counting from 0.	$ ("P: even ") Search for the numbers 1, 3, and 5 p
: Odd	Matches all elements with odd index values and starts counting from 0.	$ ("P: odd ") Find the second and second p
: Not (selector)	Removes all elements that match the given selector. Selector is an expression, which can be a value in the attribute.	$ ("Input: not (: checked )") Find all unselected input elements [Note: checked is a custom filter selector, which will be discussed later]
: Header	Matches title elements such as h1, h2, and h3.	$ (": Header" ).css ("background", "# EEE "); Add Style
: Animated	Match all the elements that are executing the animation effect	No examples

3.3: Content Selector

Select expression	Description	Example
: Contains (text)	Match the element containing the given text as long as it appears	$ ("P: contains ('Paragraph ')") Find the p element with the paragraph
: Empty	Match All null elements that do not contain child elements or text	$ ("P: empty ")
: Has (selector)	Matches the element containing the element matched by the selector.	$ ("P: has ('P ')")
: Parent	Match an element containing child elements or text	$ ("P: parent ")

4.4 child element Selector

Selector	Description	Example
: First-child	Match the first child element	$ ("Ul li: first-child") // find the first li in each ul
: Last-child	Match the last child element	$ ("Ul li: last-child") // find the last li in each ul
: Nth-child (index/even/odd/equation)	Match the nth child or parity element under the parent Element ': Eq (index)' matches only one element, and this matches the child element for each parent element. : Nth-child starts from 1, while: eq () is counted from 0! You can use: Nth-child (even) // an even number of rows : Nth-child (odd) // odd number of rows : Nth-child (3n) : Nth-child (2) // If the index is 2 : Nth-child (3n + 1) : Nth-child (3n + 2)	$ ("Ul li: nth-child (2)") // search for 2nd li addresses in each ul
: Nth-child (index/even/odd/equation)	Match the nth child or parity element under the parent Element	$ ("Ul li: nth-child (2)") // search for 2nd li addresses in each ul
: Only-child	If an element is the only child element in the parent element, it will be matched. If the parent element contains other elements, it will not be matched.	$ ("Ul li: only-child") // search for the li

4.5: visibility Selector

Selector	Description	Example
: Hidden	Match all the invisible elements. If the type attribute of the input element is "hidden", it will also be matched	$ ("P: hidden ")
: Visible	Match all visible elements	$ ("P: visible") // element to match $ (". PH: visible") // match by class

You don't need to talk about the example. You should have some insights on jQuery. Haha...