Jquery: Powerful Selector

This article introduces Jquery: Powerful selector Jquery selectors include basic selector, hierarchical selector, filter selector, and form selector. The following describes these four selector types one by one.

I. Basic Selector

Most of them are basic selectors. The basic selector includes the id selector, class selector, label selector, composite selector, and "*" selector.

$ ("# Id") select all elements whose property id is equal to "id.

$ (". Class_1") selects all elements whose attribute class is "class_1.

$ ("P") Select All

Element.

$ ("P, span, p. myClass") Select All

, And the property class is "myClass"

A group of elements of a tag.

$ ("*") Selects all elements.

2. Hierarchy Selector

If you want to obtain a specific element based on the hierarchy between elements, you can use the hierarchy selector.

$ ("P") Select

All

Element. This selector obtains all descendant elements, rather than the next level of elements (I .e. child elements ).

$ ("P> p") Select

All labels in

Child element.

$ (". Class_1 + p") Select the next attribute class as "class_1"

Peer element.

$ (". Class_1"). next ("p.

$ (". Class_1 ~ P ") Select All

Peer element.

$ (". Class_1"). nextAll ("p.

$ (". Class_1"). siblings ("p") is different from the preceding two selectors: This selector has no difference between the front and back, and it selects

Element.

3. Filter Selector

Filter selectors start with a colon (:). Filter selectors can be divided into basic filtering, content filtering, visibility filtering, attribute filtering, subelement filtering, and form object attribute filtering selectors.

1. Basic filter Selector

$ ("P: first") Select All

The first element

Element.

$ ("P: last") Select All

The last

Element.

$ ("Input: not (. class_1)") Select a property class that is not "class_1"Element.

$ ("Input: even") the selected index is an even number.Element.

$ ("Input: odd") the selected index is oddElement.

$ ("Input: eq (1)") Select an index equal to 1Element.

$ ("Input: gt (1)") SelectElement. (Note: greater than 1, not 1)

$ ("Input: lt (1)") SelectElement. (Note: less than 1, excluding 1)

$ (": Header") select all ,,....

$ ("P: animated") Select

Element.

$ (": Focus") selects the element that obtains the focus currently.

2. Content Filtering Selector

$ ("P: contains ('me')") Select

Element.

$ ("P: empty") Select

Empty element.

$ ("P: has (p)") Select contain

Element

Element.

$ ("P: parent") Select

Element.

3. Visibility filter Selector

$ (": Hidden") select all invisible elements, $ ("input: hidden") select all invisibleElement.

$ ("P: visible") select all visible

Element.

4. Attribute filter Selector

$ ("P [id]") Select

Element.

$ ("P [title = text]") Select

Element.

$ ("P [title! = Text] ") if the title of the selected attribute is not equal to" text ",

Element. (Note: If there is no attribute title

The element is also selected)

$ ("P [title ^ = text]") select attribute title starting with "text"

Element.

$ ("P [title $ = text]") the title of the selected Attribute ends with "text ".

Element.

$ ("P [title * = text]") Select

Element.

$ ('P [title | = "text"] ') Select the property title that is equal to "text" or prefixed with "text"

Element. (Note: The prefix refers to the string followed by '-').

$ ('P [title ~ = "Text"] ') Select an attribute title that contains the character "text" in a space-separated value.

$ ("P [id] [title $ = 'text']") Select

Element.

5. Child element filter Selector

$ ("P. one: nth-child (2)") Select

The second child element under the parent element.

$ ("P. one: first-child (2)") Select

The first child element under the parent element.

$ ("P. one: last-child (2)") Select

The last child element under the parent element.

$ ("P. one: first-child (2)") if the attribute class is "one ",

If the parent element has only one child element, select this child element.

6. form object attribute filter Selector

$ ("# Form1 input: enabled") SelectElement.

$ ("# Form1 input: disabled") Select unavailableElement.

$ ("Input: checked") Select the selected multiple selection boxes.

$ ("Select: selected") select the selected item from the drop-down list.

(Note: Setting the attribute disabled to "disabled" in the element makes the element unavailable)

Iv. Form Selector

$ (": Input") Select All,,AndElement.$ (": Text") select all single-line text boxes.$ (": Password") select all password boxes.$ (": Radio") select all single partitions.$ (": Checkbox") select all check boxes.$ (": Image") select all image buttons.$ (": Reset") select all reset buttons.$ (": Button") select all buttons.$ (": File") Select All upload controls.$ (": Hidden") selects all invisible elements.5. Precautions In Selector1. Some attribute values contain special charactersFor example:AaTo get this element: $ ("# id \ [1 \]").2. the selector contains spaces.$ ('. Class_1: Den den') and $ ('. class_1: Den den.$ ('. Class_1: Den den') obtains the hidden elements contained in the elements whose attribute class is class_1.$ ('. Class_1: Den den') obtains the element whose attribute class is class_1.For more information about Jquery: Powerful selector, refer to PHP!