JQuery selector, a child element of the jquery Selector

JQuery selector, a child element of the jquery Selector

Basic selector, level selector, filter selector, form Selector

Basic Selector

The simplest selector is to search for DOM elements by element id, class, and tag signature.

Level Selector

If you want to obtain specific elements through the hierarchical relationship between DOM elements, such as descendant elements, child elements, adjacent elements, and peer elements, the hierarchical selector is a good choice.

Selector	Description
$ ("Ancestor descendant ")	Select all descendant (descendant) elements in ancestor
$ ("Parent> child ")	Select the child (child) element under the parent element, and $ ("Ancestor descendant") is different, $ ("Ancestor descendant") selects descendant elements.
$ ("Prev + next ")	Select the next element next to the prev Element
$ ("Prev ~ Siblings ")	Select all siblings elements after the prev Element

 

 

 

 

 

 

Filter Selector

Basic filtering, content filtering, visibility filtering, attribute filtering, child element filtering, and form object attribute filtering selector.

Basic filter Selector

Selector	Description
: First	Select the first element
: Last	Select the last element
: Not (selector)	Removes all elements that do not match the given selector.
: Even	Select all the elements with an even index. The index starts from 0.
: Odd	Select all the elements with an odd number of indexes. The index starts from 0.
: Eq (index)	Select the element whose index is equal to index (index starts from 0)
: Gt (index)	Select the element whose index is greater than index (index starts from 0)
: Lt (index)	Select the element whose index is smaller than the index (index starts from 0)
: Header	Select All title elements, such as h1, h2, h3, etc.
: Animated	Select all elements of the animation being executed
: Focus	Select the element for which the current focus is obtained

 

 

 

 

 

 

Content Filter Selector

The filtering rules of the content filtering selector are mainly embodied in the child elements or text content contained in the selector.

Selector	Description
: Contains (text)	Select an element with text content as "text"
: Empty	Select an empty element that does not contain child elements or text
: Has (selector)	Select the element containing the element matched by the selector
: Parent	Select an element that contains child elements or text

 

 

 

 

Visibility filter Selector

: Hidden Selects all invisible elements;

: Visible: select all visible elements;

Attribute filter Selector

Selector	Description
[Attribute]	Select the element with this attribute
[Attribute = value]	Select an element whose attribute value is value
[Attribute! = Value]	Select an element whose attribute value is not equal to value
[Attribute ^ = value]	Select an element whose attribute value starts with value.
[Attribute $ = value]	Select the element whose attribute value ends with value.
[Attribute * = value]	Elements whose attribute values contain values
[Attribute | = value]	Select an element whose attribute is equal to a given string or whose prefix (followed by a hyphen "-")
[Attribute ~ = Value]	Select an element that contains a given value in a space-separated value of an attribute.
[Attribute1] [attribute2] [attributeN]	Combine the attribute selector into a composite attribute selector to meet multiple conditions. Scale down every time you select

 

 

 

 

 

 

 

 

 

Child element filter Selector

Selector	Description
: Nth-child (index/even/odd/equation)	Select the sub-element of the index or parity element under each parent element (index starts from 1)
: First-child	Select the first child element under each parent Element
: Last-child	Select the last child element under each parent Element
: Only-child	If an element is the only child element in its parent element, it will be matched. If the parent element contains other elements, it will not be matched.

 

 

 

 

 

Form object attribute filter Selector

: Enabled: select all available elements

: Disabled: select all unavailable Elements

: Checked select all selected elements (single checked, check box)

: Selected select all selected option elements (drop-down list)

Form Selector

Selector	Description
: Input	Select all <input>, <textarea>, <select>, and <button> Elements
: Text	Select all single-row text boxes
: Password	Select all password boxes
: Radio	Select all single-region
: Checkbox	Select All check boxes
: Submit	Select all submit buttons
: Image	Select All image buttons
: Reset	Select all reset buttons
: Button	Select All buttons
: File	Select All upload Domains
: Hidden	Select all invisible elements

 

 

 

 

 

 

 

 

 

 

 

Precautions In Selector

1. the selector contains special characters such as ".", "#", and "(" or "]".

If you handle the error in the normal way, you can use the escape character to escape the error.

2. @ symbol of the attribute Selector

During the upgrade process of jquery, jquery completely abandons the @ symbol left by version 1.1.0 in version 1.3.1. If you use version 1.3.1 or later, you do not need to add the @ symbol before the attribute.

3. Note that there are spaces in the selector

Var $ t_a = $ (". test: hidden"); // select the hidden element from the element whose class is "test ".

Var $ t_ B = $ (". test: hidden"); // select an element whose hidden class is "test ".

The two are different because the backend selector and filter selector are different.

 

References:

Chapter 2 of 2nd sharp jQuery

 

<! --

Author: xiangrui
Source: http://www.cnblogs.com/beginner2014/p/4443472.html
The copyright of this article is shared by the author and the blog. You are welcome to repost this article, but you must keep this statement without the author's consent and provide a connection to the original article on the article page. Thank you for your cooperation.

-->