Collection Based on jQuery Selector

Jquery Object Access
1. each (callback): execute a function with each matching element as the context, return false; stop the loop; return true; jump to the next loop.

For example:
Copy codeThe Code is as follows:
$ ("Img"). each (function (){
$ (This). toggle ("example ");
})

2. The same size () and length indicate the number of elements in the jquery object.

$ ("Img"). size (); or $ ("img"). length;

3. get (): get all the matching DOM element sets (note that the returned result is a dom object rather than a jquery object)
Copy codeThe Code is as follows:
$ ("Img"). get (). reverse ();

4. get (index): gets a matching element. Index indicates matching the first element. You can use the get (index) method to operate an actual dom element.

$ ("Img"). get (0); // obtain the first matching img element

$ (This). get (0) is equivalent to $ (this) [0 ].

5. index (subject): searches for elements that match the object indicated by the parameter and returns the index value of the corresponding element.

Selector-Basic
Selector1, selector2, and selectorN combine the matched elements and return them together.
Copy codeThe Code is as follows:
$ ("Div, span, p. myClass ");

Note the following differences:

1. $ ("span", this)

For example:
Copy codeThe Code is as follows:
$ ("Div. foo"). click (function (){
$ ("Span", this). addClass ("bar ");
});

2. $ ("div # hi"), $ ("p. intro ")

For example:
Copy codeThe Code is as follows:
$ ("Div # hi" ).css ("color", "red ");

3. $ ("form input ")

For example:
Copy codeThe Code is as follows:
$ ("Form input" ).css ("border", "5px solid red ");

We need to differentiate the meanings of the preceding similar forms.

Selector-level
1. ancestor descendant matches all descendant elements under a given ancestor Element

$ ("Div input"); // all input values under div

2. parent> child matches all child elements under the given parent Element

$ ("Div> input); // child element under the parent Element

3. prev + next match all next elements following the prev Element

$ ("Div + span") // span next to the div

4. prev ~ Siblings matches all the siblings elements after the prev Element

$ ("Form ~ Input ") // find all input elements of the same generation as the form

Selector-simple
1.: first matches the first element found

$ ("Tr: first") // find the first row in the table

2.: last element found by last match
$ ("Tr: last") // match the last element found

3.: not (selector) removes all elements that match the given selector.
Ps: complex selectors are supported in jquery 1.3 (for example: not (div a) and: not (div, ))
$ ("Input not (: checked)") // All unselected input Elements

4. The even matches all the elements with an even index value and starts counting from 0.
$ ("Tr: even") // find the even number of rows in the table

5. The odd matches all elements with an odd index value and starts counting from 0.
$ ("Tr: odd") // search for odd rows in a table

6.: eq (index) matches the element of a given index value.
$ ("Tr: eq (1)") // find the second row

7.: gt (index) matches all elements greater than the given index value.
$ ("Tr: gt (0)") // find all rows greater than 0

8.: lt (index) matches all elements smaller than the given index value.
$ ("Tr: lt (2)") // find all rows smaller than 2

9. the header matches title elements such as h1, h2, and h3.
$ (": Header" ).css ("background", red "); // Add the background color to all titles

10.: animated matches all the elements in the animation being executed.

Selector-content:
1.: contains (text) Match elements containing the given text
$ ("Div: contains ('aaa')") Find all div elements containing aaa

2.: empty () matches all null elements that do not contain child elements or text.
$ ("Td: empty ")

3. The has (selector) matches the element containing the element matched by the selector.
$ ("Div: has (p)"). addClass ("test"); // Add a text class to all div elements containing p elements.

4.: parent matches the elements that contain child elements or text.
$ ("Td: parent"); // search for all td elements containing child elements or text

Selector-visibility:
1.: hidden matches all invisible elements. If the type attribute of the input element is hidden, it will also be matched.
$ ("Tr: hidden"); // search for all invisible tr Elements

2.: visible matches all visible elements
$ ("Tr: visible"); // search for all visible tr Elements

Selector-attributes:
1. [attribute] matches the element containing the given attribute
$ ("Div [id]") // search for all div elements containing the id attribute

2. [attribute = value] matching a given attribute is an element of a specific value
$ ("Input [name = 'username']") // query all input elements whose names are username.

3. [attribute! = Value] matches all elements that do not contain the specified attribute or that do not match the specified value.
This selector is equivalent to: not ([attr = value]). to match an element that contains a specific attribute but is not equal to a specific value, use [attr]: not ([attr = value])
$ ("Input [name! = 'Username'] ") // find all names! = Input element of username

4. [attribute ^ = value] matches the given attribute with elements starting with some values.
$ ("Input [name ^ = 'user']) // find all input elements whose names start with 'newws'

5. [attribute $ = value] matches the elements whose given attributes end with some values.
$ ("Input [name $ = 'letter']) // you can specify all input elements whose names end with 'letter '.

6. [attribute * = value] matching a given attribute is an element that contains certain values.
$ ("Input [name * = 'man']") // find all input elements whose names contain 'man'

7. [selector1] [selector2] [selectorN] composite attribute selector, which must be used when multiple conditions are met at the same time.
$ ("Input [id] [name = 'man']") //

Selector-child element:
1.: nth-child (index/even/odd/equation) matches the nth child or parity element under its parent element.
$ ("Ul li: nth-child (2)") // search for 2nd li addresses in each ul

2.: first-child matches the first child element.
$ ("Ul li: first-child") // find the first li in each ul

3. las-child matches the last child element.
$ ("Ul li: last-child") // search for the last li in the first ul

4. 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

Selector-form:
1.: input,: text,: password,: radio,: checkbox,: submit,: image,: reset,: button,: file
2.: hidden matches all invisible elements, or elements whose type is hidden.

Selector-form object attributes:
1.: enable matches all available elements
$ ("Input: enabled") // find all available input Elements

2.: disabled matches all unavailable elements.
$ ("Input: disabled") // matches all unavailable Elements

3.: checked matches all selected elements (check box, single-choice, option not included in select)
$ ("Input: checked") // find all checked check box Elements

4.: selected matches all selected option elements.
$ ("Select option: selected") // find all selected option Elements