The jquery selector is a combination of CSS 1-3 and XPath. Jquery extracts the best part of these two query languages and creates the final jquery expression query language after integration. If you know CSS (most web developers use it), you can easily learn it.
Use both CSS and xpath
Let's look at several examples:
Hide all paragraphs that contain links:
$ ("P [a]"). Hide ();
Display the first section of the page:
$ ("P: eq (0)"). Show ();
Hide all currently visible layer elements:
$ ("Div: visible"). Hide ();
Obtain the list items of all unordered lists:
$ ("Ul/Li ")
/* Valid too: $ ("Ul> li ")*/
Obtain the value of the input field whose name is bar:
$ ("Input [@ name = bar]"). Val ();
All selected single-choice R buttons:
$ ("Input [@ type = radio] [@ checked]")
If you have any questions about the working principle of the query language, you can subscribe to the Mail list here.
CSS queryer
Jquery fully supports css1.3.
For more information about CSS, see the following link:
The following lists the supported types of CSS queryer Syntax:
-
- * Any element
-
- Elements whose E type is E
-
- E: the root type is E and is the root element of the document.
- E: Nth-child (n) is the nth child element of its parent element of Type E.
-
- E: First-child is the first child element of its parent element.
-
- E: Last-child is the child element of its parent element whose last type is E.
-
- E: Only-Child, which is the only sub-element of its parent element and of the type E
-
- E: Empty does not have any child elements (including text nodes) whose type is E.
-
- E: Enabled
-
- E: the disabled type is E, which indicates the user interface elements that are allowed or disabled.
-
- E: The checked type is E, and the selected user interface elements (such as single-choice buttons or check boxes)
-
- E. The warning type is E, and the class attribute value is warning.
-
- E # The myid type is e and the ID is "myid ". (Match at most one element)
-
- E: Not (s) type is E, does not match selector s
-
- Elements of the e f type after the E Type
- E> F is the F element of the E element sub-element.
-
- E + f an F element immediately preceded by an e Element
-
- E ~ F An F element preceded by an e Element
Differences
All attribute selectors are written to be very similar to XPath (because all attributes start with the @ symbol ).
- E [@ Foo] An Eelement with the foo attribute
- E [@ Foo = bar] the value of the foo attribute is an Eelement of bar.
- E [@ Foo ^ = bar] the value of the foo attribute is an Eelement starting with the string "bar ".
- E [@ Foo $ = bar] An Eelement whose values end with the string "bar"
- E [@ Foo * = bar] the value of the foo attribute contains the Eelement ending with the string "bar ".
Not Supported
-
- E: Link
- E: visited an e element being the source anchor of a hyperlink of which the target is not yet visited (: Link) or already visited (: visited)
-
- E: Active
-
- E: hover
-
- E: Focus an e element during certain user actions
-
- E: Target an e element being the target of the referring URI
-
- E: first-line the first formatted line of an E Element
-
- E: First-letter the first formatted Letter of an E Element
-
- E: selection the portion of an E element that is currently selected/highlighted by the user
-
- E: Before generated content before an e Element
- E: After generated content after an e Element
Jquery does not support the following selectors because they are useless.
- E: Nth-last-child (n) An e element, the n-th child of its parent, counting from the last one
- E: Nth-of-type (n) An e element, the n-th sibling of its type
- E: Nth-last-of-type (n) An e element, the n-th sibling of its type, counting from the last one
- E: first-of-type an e element, first sibling of its type
- E: Last-of-type an e element, last sibling of its type
- E: only-of-type an e element, only sibling of its type
- E: Lang (FR) an element of Type E in language "FR"
XPath queryer
XPath is a built-in Expression Language supported by jquery. Jquery supports basic XPath expressions.
Location Path
- Absolute path
$ ("/Html/body/P ")
$ ("/*/Body/P ")
$ ("// P/../Div ")
- Relative Path
$ ("A", this)
$ ("P/a", this)
Supported axis selectors
- Descendant element has a descendant Element
$ ("// Div // P ")
- Child element has a child element
$ ("// DIV/P ")
- Preceding sibling element has an element before it, on the same axes
$ ("// Div ~ Form ")
- Parent selects the parent element of the element
Predicates supported by $ ("// DIV/../P ")
- [@ *] Has an attribute
$ ("// Div [@ *]")
- [@ Foo] has the foo attribute.
$ ("// Input [@ checked]")
- [@ Foo = 'test'] The property Foo value is 'test'
$ ("// A [@ ref = 'nofollow']")
- [Nodelist] element contains a node list, for example:
$ ("// Div [p]")
$ ("// Div [p/A]")
Supported predicates, but different from XPath and CSS
- [Last ()] or [position () = last ()] is changed to: Last
$ ("P: Last ")
- [0] or [position () = 0] changed to: eq (0) or: first
$ ("P: First ")
$ ("P: eq (0 )")
- [Position () <5] changed to: Lt (5)
$ ("P: Lt (5 )")
- [Position ()> 2]: GT (2)
$ ("P: GT (2 )")
Custom Selector
Jquery contains some expressions that are not used in CSS and XPath, but we think they are very convenient to use, so they are included.
The following generic syntax is based on different CSS selectors, but has very similar names.
- : Even obtains an element whose ordinal number is an even number from the Matching Element Set.
- : Odd obtains an odd number of elements from the Matching Element Set.
- : Eq (0) and: Nth (0) Fetch 0th elements from the Matching Element Set
- : GT (4) obtains an element with an ordinal number greater than N from the Matching Element Set.
- : Lt (4) obtains elements with an ordinal number less than N from the Matching Element Set.
- : First is equivalent to: eq (0)
- : Last matched element
- : Parent Selects all elements that contain child elements (including text nodes)
- : Contains ('test') select all elements containing the specified text
- : Visible: select all visible elements (the display value is block or visible, and the visibility value is visible, excluding the hide field)
- : Hidden: select all hidden elements (elements with a non-hide field and a display value of block, visible, and visibility)
Example:
$ ("P: First" ).css ("fontweight", "bold"); $ ("Div: hidden "). show (); $ ("Div: Contains ('test ')"). hide ();
Form Selector
Here are some selectors for the form:
- : Input select form elements (input, select, textarea, button)
- : Text select all text fields (type = "text ")
- : Password select all password domains (type = "password ").
- : Radio select all radio buttons (type = "radio ").
- : Checkbox select all check boxes (type = "checkbox ").
- : Submit select all submit buttons (type = "Submit ").
- : Select all image fields (type = "image ").
- : Select all clearing fields (type = "reset") for reset ").
- : Select all buttons (type = "button") for the button ").
You can also use: hidden, which is described in detail above.
$ ('# Myform: input ')
If you need to specify the form:
$ ('Input: Radio ', myform)
This selects all the radio buttons in the myform. Generally, [@ type = radio] is used to select radio, but the usage is simplified.
More selectors
The jquery selector can be expanded with some third-party components:
- More selectors plugin
- Mike alsup on custom selectors
- Patch to allow selection by CSS property (full plugin to be released simultaneously with 1.1)
