The jquery selector has four main categories, namely, the basic selector, the hierarchy selector, the filter selector, and the form selector. The bottom is to sum up separately.
The basic selector is the most commonly used selector in jquery and the simplest selector, which looks for DOM elements through element tag names, element Id,class. A total of five basic selectors, summarized as follows:
Selector
|
Return
|
Example
|
Element Tag Selector
|
Collection elements
|
$ ("P") Select all the <p> elements.
|
ID Selector
|
A single element
|
$ ("#test") Select the element with the ID test.
|
Class Selector
|
Collection elements
|
$ (". Test") Select all elements with test class
|
Wildcard selectors
|
Collection elements
|
$ ("*") Select all the elements.
|
Group Selector
|
Collection elements
|
$ ("Div,span,p.myclass") selects all <div>,<span>, and a set of elements that have a <p> label of class MyClass.
|
It is appropriate to get specific elements, such as descendant elements, child elements, neighboring elements, and sibling elements, through hierarchical relationships between DOM elements.
Selector
|
Return
|
Example
|
Descendant element Selector
|
Collection elements
|
$ ("div span") Select all <span> elements in <div>.
|
Child element Selector
|
Collection elements
|
$ ("Div>span") Select the element name under <div> element is a child element of <span>.
|
Adjacent element selector
|
Collection elements
|
$ (". One+div") Select the next <div> sibling element of class one.
|
Brother Element Selector
|
Collection elements
|
$ ("#two ~div") selects all <div> sibling elements
after the element with ID two.
|
Note: The difference between $ ("prev~siblings") selector and siblings () method.
$ ("#prev ~div") selects all the sibling DIV elements that follow the "#prev" element. The siblings () method is independent of the front and back position and can be matched as long as it is a sibling node.
The filter selector mainly filters out the required DOM elements through specific filtering rules, the same as the Pseudo class selector syntax in CSS, where the selector begins with a colon (:). According to the different filtration rules, filter selector can be divided into basic
Filter, content filtering, visibility filtering, attribute filtering, child element filtering and Form object attribute filter selector altogether six kinds of selectors.
This is only a summary of the basic filters, other filters in the actual development process when the need to review it.
Selector
|
Return
|
Example
|
: A
|
A single element
|
$ ("Div:first") selects the 1th <div> element in all <div> elements.
|
: Last
|
A single element
|
$ ("Div:last") selects the last 1 <div> elements in all <div> elements.
|
Not (selector)
|
Collection elements
|
$ ("Input:not (. myClass)") Select the class is not a myClass <input> element.
|
: Even
|
Collection elements
|
$ ("Input:even") select an even <input> element for the index.
|
: Odd
|
Collection elements
|
$ ("input:odd") select an odd <input> element for the index.
|
: EQ (Index)
|
A single element
|
$ ("Input:eq (1)") Select the <input> element with index equal to 1.
|
: GT (Index)
|
Collection elements
|
$ ("INPUT:GT (1)") Select the <input> element with index greater than 1.
|
: LT (Index)
|
Collection elements
|
$ ("Input:lt (1)") Select the <input> element with index less than 1. (not including 1)
|
: Header
|
Collection elements
|
$ (": Header") Select all
|
: Animated
|
Collection elements
|
$ ("div:animated") Select the <div> element in which the animation is being executed.
|
With the form selector, we can easily get one or a type of element of a form.
Selector
|
Return
|
Example
|
: input
|
Collection elements
|
$ (": input") selects all <input>,<textarea>,<select> and <button> elements.
|
: Text
|
Collection elements
|
$ (": Text") selects all Single-line text boxes.
|
:p Assword
|
Collection elements
|
$ (": password") Select all the password boxes.
|
: Radio
|
Collection elements
|
$ (": Radio") selects all the radio boxes.
|
: checkbox
|
Collection elements
|
$ (": CheckBox") Select all the check boxes.
|
: Submit
|
Collection elements
|
$ (": Submit") Select all the Submit buttons.
|
: Image
|
Collection elements
|
$ (": Image") Select all the image buttons.
|
: RESET
|
Collection elements
|
$ (": Reset") Select all the reset buttons.
|
: button
|
Collection elements
|
$ (": Button") Select all the buttons.
|
: File
|
Collection elements
|
$ (": File") Select all the upload fields.
|
: Hidden
|
Collection elements
|
$ (": Hidden") selects all invisible elements.
|
The above is the summary of the jquery selector, I hope everyone can understand and skillfully use them