Proficient in the use of jQuery selector [to]

jQuery has a very powerful engine of choice, providing a complete selector syntax, allowing us to select almost all the elements. jQuery's selector syntax is based on CSS3 and XPath, and on CSS3 and XPath to understand more the more significant when the use of jQuery handy. On the CSS and XPath, please refer to the following link:

It is worth noting that, CSS3 today has not been supported by all browsers, so we rarely use it. However, we can still choose jQuery use CSS3 elements, because jQuery has its own custom selector engine, and the realization of CSS3 support.

JQuery selector would like to know more information, visit the official jQuery documentation related Selector part. Now, in the original basis of official documents to make some simple translations and explanations.

1. CSS selector (CSS Selectors)

jQuery complete support for CSS 1-3, and it can (selector) expression to add custom CSS-like (and xPath).

1.1 jQuery support CSS selector syntax

* Any element
E to E of all types of element (in fact, E can be any element)
E: nth-child (n) a type E of element, it is his father element sub-element of the first n
E: first-child of a type E of element, it is his father, the first child element of the element (the equivalent of E: nth-child (0))
E: last-child of a type E of element, it is his father, a sub-element of the final element
E: only-child of a type E of element, it is the only son of his father element of element
E: empty a type E user interface (UI) element, it has no sub-element (including text element)
E: enabled a type E user interface (UI) element, it is set to prohibit the (disabled)
E: disabled a type of E user interface (UI) element, it is set to allow (enabled)
E: checked a type E user interface (UI) element, it is selected (checked) state (for radio buttons and checkboxes)
E: selected for the E type of user interface (UI) element, it is selected (selected) state (in the selection, there are one or more alternative element). Note: selected attribute is not in the CSS specifications, but the provision of internal support jQuery
E.myclass a type E of element, its class is "myclass"
E # myid an E type of element, its id is "myid"
E: not (s) of a type E, element, and the result of concentration of element does not match (not included) selector s (used for filtering)
EF for the F type of element, it is the type of element for the E descendants element (note the descendants element)
E> F to F type of element, it is the type of element for the E sub-element (note the sub-element)
E + F an F type of element, it is followed in the type of element for E behind a brother element (Note F is E's brother nodes, and is following closely the subsequent one)
E ~ F an F type of element, it is the type of element for E behind a brother element (Note F is the brother of E-node, and the location in the back of E)

E, F, G to E, a type of element, a type F of element, a type G of element (used to select more than one element)

1.2 jQuery support, but (with the CSS specification) is different from the selector syntax

Difference is that the property name must be added before the symbol "@"

E [@ foo] an E type of element, it has a property "foo"
E [@ foo = bar] an E type of element, it has attributes "foo = bar"
E [@ foo ^ = bar] an E type of element, it has a property "foo", and its attribute value is "bar" at the beginning of the
E [@ foo $ = bar] an E type of element, it has a property "foo", and its attribute value is "bar" at the end of
E [@ foo *= bar] a type E of element, it has a property "foo", and its attribute value contains "bar"
E [@ foo = bar] [@ baz = bop] a type E of element, it has attributes "foo = bar" and attributes "baz = bop"

Note: The above "bar" and "bop" are strings.

Not supported by 1.3 jQuery selector syntax (abbreviated)

Because no practical effect, so we have not made to go into details here, I would like to learn more can read the official help documentation.

1.4 Contex and anchoring

Contex can set to anchor (location) selector, which is jQuery with CSS norms of a difference. Users can use the syntax: $ (expr, context) to set the context root. The default context root is the entire document.

2. XPath selector (XPath Selectors)

XPath is also supported by jQuer one selector syntax. jQuery support basic XPath syntax. Below some examples for illustration.

2.1 positioning path (Location Paths)

Absolute path, as opposed to the entire HTML document

  $ ( "/ Html / body / / p") $ ( "body / / p") $ ( "p / .. / div")

Relative path, as opposed to set context node "this"

  $ ( "P / *", this) $ ( "/ p / / a", this)

2.2 to support the Axis selector

"/ /": Descendants of elements (div of all types for p descendants elements)

  $ ( "/ Div / / p") $("// div / / p ")

"/": Sub-elements (div of all types for the p sub-elements)

  $("// Div / p ")

"~": Brother elements (div of all types to form the brother of elements)

  $("// Div ~ form ")

""..": Father of elements (div parent element of type p sub elements)

  $("// Div / .. / p ")

2.3 to support the predicate grammar (Predicates)

[@ foo] has the attribute "foo"

  $("// Input [@ foo] ")

[@ foo = 'test'] has the attribute "foo = 'test'"

  $("// A [@ foo = 'tsxt'] ")

[Nodelist] match elements of their children and grandchildren Nodelist (used to filter)

  $("// Div [p] ") $("// div [p / a]")

2.4 jQuery support, but (with the XPath specification) predicate different syntax (Predicates)

[last ()] or [position () = last ()] becomes: last (choice of the results of a focus on the final element)

  $ ( "P: last")

[0] or [position () = 0] becomes: eq (0) or: first (choice of the results of a focus on the first element)

  $ ( "P: first") $ ( "p: eq (0)")

[position () <5] becomes: lt (5) (choice of more than 5 index result of elements)

  $ ( "P: lt (5)")

[position ()> 2] becomes: gt (2) (choice of the results of concentrated index of less than 2 elements)

  $ ( "P: gt (2)")

Note: "becomes" in front of the predicates is XPath syntax, the back is equivalent to jQuery syntax.

3. JQuery selector custom (Custom Selectors)

jQuery has some custom selector syntax, grammar Although these are not in the CSS and XPath specification, but they are very convenient, where they won came jQuery.

3.1 custom selector (Custom Selectors)

: even the results of concentrate its index for even-numbered (even nos) of the elements
: odd results concentrate its index for the odd (odd) of the elements
: eq (N) and: nth (N) choose to focus on the results of the index of the elements for the N
: gt (N) choose to focus on the results of the index of the elements is greater than N
: lt (N) choose to focus on the results of the index is less than N of the elements
: first select the first result element (equivalent to eq (0) or the nth (0))
: last choice of the results of a focus on the final element
: parent choice in the outcome of focus elements, it must have sub-elements (including text nodes) (with: empty the contrary)
: contains ( 'test') choose to focus on the results of the specified text contains elements
: visible select all visible (visible) of the elements (display attribute value of visible, block, inline, or visibility of the value of property visible, does not include hidden types of elements (on the hidden type, such as <input type = "hidden" ... >))
: hidden select all hidden (visible) of the elements (display attribute value equal to none, or visibility of the value of properties hidden, does not include hidden types of elements (on the hidden type, such as <input type="hidden" …>))

Examples:

  $ ( "P: first"). Css ( "fontWeight", "bold"); $ ( "div: hidden"). Show (); $ ( "/ div: contains ( 'test')", this). hide ();

3.2 selector form (Form Selectors)

: input select all form elements (input, select, textarea, button)
: text to select all the text of the domain (type = "text").
: password select all domain password (type = "password").
: radio select all the radio buttons (type = "radio").
: checkbox to select all the check box (type = "checkbox").
: submit select all the submit button (type = "submit").
: image select all image domain (type = "image").
: reset select all reset button (type = "reset").
: button to select all button (type = "button").
: file select all <input type="file">.

: hidden is also available in 3.1 above described.

The proposed form in the use of options to provide a context root, examples:

  $ ( '# MyForm: input')

  $ ( 'Input: radio', myForm)

Above his final statement will select all of the "myForm" form all the radio button, which is equivalent to [@ type = radio] (that is, $("[type = radio], myForm ")), but Table single selector will be slightly faster, especially for large-scale form.

3.3 more selector

jQuery selector that allows third-party plug-ins to expand:

More Selectors Plugin
Mike Alsup on Custom Selectors
Patch to allow selection by CSS property (full plugin to be released simultaneously with 1.1)

References:

http://docs.jquery.com/DOM/Traversing/Selectors

(2 votes, average: 5 out of 5)

Loading ...

- Welcome rating for this article

No donations within the last 180 days.Who make donation will leave message at here. Donate Now.

This a wordpress plugin Wp-Donators. It provides a smart donation function to autoleave the sponsor information in this container after payment. People can donate and submit name / URL or TextLink AD. The information of the latest donors are displayed in the cloud. The more a person donates, the bigger their link will be.It 's will support most popular payment interface in future. ParPal Just the first one. More ..

Powered By: WP-DONATORS