A summary of how jquery gets elements

A summary of how jquery gets elements

I. Description

There are two ways to get elements: the jquery selector, the jquery traversal function.

Make a summary, consolidate the knowledge.

Ii. acquisition of itself

1. Only one jquery selector is required

Selector Selector	Instance	Description
#Id	$ (' #myId ')	ID selector: Can get to an element with id "myId", Case sensitive

2. Multiple jquery selector combinations

is divided into two parts: the first half gets a collection of elements, the second half can be exactly one element, and the two can be combined to get the desired element.

1) first half-part selector

Selector Selector	Instance	Description
. class	$ ('. MyClass ')	Class selector: You can get all the elements of class ' MyClass '
Element	$ (' P ')	Get all the <p> elements
: Header	$ (': Header ')	Get all the caption elements:
: Animated	$ (': Animated ')	Get all the animated elements
: Contains (text)	$ (' P:contains (Hello) ')	Gets all the <p> elements that contain text Hello, and the middle text is case-sensitive
: Hidden	$ (': Hidden ')	Get all the hidden elements: width and height of 0, Display:none, Type=hidden,
[Attribute]	$ (' [href] ')	Property selector: Gets all elements that have a property of href
[Attribute=value]	$ (' [href=a.html] ')	= gets all elements with an attribute href and a value of a.html ! = gets all elements with an attribute href, and the value is not equal to a.html $= gets all elements with an attribute href, and the value ends with a.html ^= gets all elements with an attribute href and whose value begins with a.html ~= gets all the elements with the attribute href, and the value contains the word "a.html" *= gets all the elements with the attribute href, and the value contains the text "A.html"
: input	$ (': input ')	Get all input elements
: Radio	$ (': Radio ')	All input elements with type= "Radio" The similarities are: : text,: Chexbox,:p Assword,: Submit,: Reset,: button,: File
: Enabled	$ (': Enabled ')	All of the input elements that are enabled. :d isabled is the opposite.
: Checked	$ (': Checked ')	All selected input selections (radio box, check box)
: GT (Index)	$ (' P:gt (2) ')	Index starting with 0, gets all <p> elements of index greater than (not included) 2
: LT (Index)	$ (' P:lt (2) ')	Index starting from 0, gets all <p> elements with index less than (not included) 2
: Even	$ (' Tr:even ')	All even <tr> elements
: Odd	$ (' tr:odd ')	All odd <tr> elements

2) Second half selector: can be precise to an element

Selector Selector	Instance	Description
: First	$ (' P:first ')	First <p> Element
: Last	$ (' p:last ')	Last <p> Element
: EQ (Index)	$ ("P:eq (1)")	Second <p> element, index starting from 0

3. jquery Selector + traversal function

is also divided into two parts: the first half is obtained with a selector to a collection of elements, and the latter part is precisely an element with a traversal function

1) first half ibid.

2) Second half: traversal function

Method	Describe
EQ ()	Returns the element with the specified index number of the selected element
First ()	Returns the first element of a selected element
Last ()	Returns the last element of the selected element

Third, get sibling elements

As the name implies: Gets the sibling element of the selected element . You first need to navigate to the element (which is summarized above, no longer duplicates ), and then get its sibling elements.

1) Selector

Selector Selector	Instance	Description
Element + Next	$ (' div + P ')	Next <p> element adjacent to each div
Element ~ Siblings	$ (' div ~ p ')	Get all <p> elements that are similar to Div peers

2) Traversal function

Method	Describe
Next ()	Returns the next sibling element of the selected element
Nextall ()	Returns all sibling elements after the selected element
Prev ()	Returns the previous sibling element of the selected element
Prevall ()	Returns all sibling elements before the selected element

Iv. getting the parent element

Gets the parent element of the selected element

1) Selector

Selector Selector	Instance	Description
:p arent	$ (' p:parent ')	Gets the parent element of all P-elements

2) Traversal function

Method	Describe
Parent ()	Gets the parent element of the selected element
Parents ()	Gets all the ancestor elements of the selected element

V. Get child elements

Gets the child element of the selected element

1) Selector

Selector Selector	Instance	Description
Parent > Child	$ (' div > P ')	Get all <p> elements of Div Direct child elements
Parent descendant	$ (' div p ')	Get <p> elements for all descendants of Div

2) Traversal function

Method	Describe
Children ()	Returns all the immediate child elements of the selected element
Contents ()	Returns all immediate child elements of the selected element (containing text and comment nodes)
Find ()	Returns the descendant elements of the selected element

Tags: jquery reprint

A summary of how jquery gets elements