Directory
I. Description
Ii. acquisition of itself
Third, get sibling elements
Iv. getting the parent element
v. Get child 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 |
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 |
"Grimace Original" jquery method summary of acquiring elements