jquery Selector Highlights (read "Sharp jquery (second edition)")

the jquery selector is divided into basic selectors, hierarchical selectors, filter selectors, and form selectors.

Filter selectors can be divided into basic filtering, content filtering, visibility filtering, attribute filtering, child element filtering, and Form object property filter selectors.

$ ("Input:not (. myClass)") selects the <input> element that is not myClass by class.

$ ("Input:even") Select index is even <input> element

$ (": Header") Select all the

$ (": Focus") pick the element that currently gets focus

The filtering rules of the Content filter selector are mainly embodied in the child elements or textual content that he contains.

$ ("Div:has (P)") selects the <div> element that contains the <p> element.

$ ("div:parent") Select the <div> element that has child elements (including text elements)

$ ("Div:parent"). CSS ("Background", "#bbffaa"); Changes the background color of <div> elements that contain child elements, including text elements.

The Visibility filter selector selects the appropriate element based on the visible and invisible state of the element.

: Hidden selects all elements that are not visible. Returns the collection element.

: Visible selects all visible elements ... Returns the collection element.

The filter rule for a property filter selector is to get the corresponding element through the attributes of the element.

The following is an example of a property filter selector:

$ ("Div[id]") Select the element that owns the property ID

$ ("div[title=test]") Select the <div> element with the property title "Test".

$ ("div[title!=test]") select attribute title not equal to ' test ' <div> element (Note: <div> element with no attribute title will also be selected)

$ ("div[title^=test]") Select the <div> element that the attribute title begins with "Test".

$ ("div[title$=test]") Select the <div> element with the property title ending with "test".

$ ("div[title*=test]") Select the <div> element with the property title ending with "test".

$ (' div[title|= ' en "] ') Select the attribute title equals en or an element prefixed with en (the string followed by a hyphen '-').

$ (' div[title~= "UK"] ') Select the attribute title with a space-delimited value that contains the characters UK element.

$ ("div[id][title$= ' Test ')" selects the <div> element that owns the attribute ID, and the property title ends with "test".

: Nth-child () selector is a very common sub-element filter selector, detailed functions are as follows.

(1): Nth-child (even) can select an element with an even number of index values under each parent element.

(2): Nth-child (Odd) can select an element that has an odd number of index values under each parent element.

(3): Nth-child (2) You can select an element that has an index value equal to 2 under each parent element.

(4): Nth-child (3n) You can select an element that has a multiple of 3 of the index value under each parent element.

(5): Nth-child (3n+1) can select an element under each parent element that has an index value of (3n+1). (n starts from 1).

EQ (index) matches only one element, whereas: Nth-child will match child elements for each parent element that meets the criteria. It should also be noted that the Nth-child (index)

Index is starting at 1 and: EQ (index) starts at 0. Similarly: First and: First-child,:last and: Last-child are similar.

The Form object property filter selector, which primarily filters the selected form elements, such as selecting the Selected drop-down box, multi-box, and so on.

jquery Selector Highlights (read "Sharp jquery (second edition)")