Summary of JQuery's methods of getting elements

1. Description

There are two ways to get elements: jQuery selector and jQuery traversal function. In this article we will share with you a summary of JQuery’s method of getting elements. , hope it can help everyone.

Make a summary and consolidate knowledge.

2. Get yourself

1. Only one jQuery selector is needed

Selector	Instance	Description
#Id	$('#myId')	ID selector: You can get the element with the ID "myId", case-sensitive

2. Various jQuery selector combinations

Divided into two parts: the first half obtained It is a collection of elements, and the second half can be exactly one element. Combining the two, you can get the desired element.

      1) First half of the selector

.class$('.myClass') Class selector: You can get all elements with class 'myClass'element$('p')Get all< ;p>Element:header$(':header')Get all header elements:

~ < h6>

:animated$(':animated')Get all animated elements:contains(text)$('p:contains(Hello)')Get all

elements that contain the text Hello, the middle text is case-sensitive

:hidden$(':hidden')Get all hidden elements: width and height are 0, display:none, type= hidden, [attribute]$('[href]')Attribute selector: Get all elements with attribute href[attribute=value]$('[href=a.html]'): input$(':input')Get all input elements:radio$(':radio' ):enabled$(':enabled')All enabled input elements. :disabled is the opposite:checked$(':checked')All selected input selections (radio boxes, check boxes ):gt(index)$('p:gt(2)')index starts from 0, and gets index greater than ( All

elements excluding) 2

:lt(index)$('p:lt(2)')Index starts from 0, get all

elements with index less than (excluding) 2

:even$('tr:even')All evenelements:odd$('tr:odd')All odd< tr>Element

##Selector	Example	Description
		= Get all hrefs with attribute , and the value is a.html element != Get all the elements with attribute href, and the value is not equal to a.html $= Get all the elements with attribute href, and Elements whose value ends with a.html ^= Get all elements with attribute href and whose value starts with a.html ~= Get all elements with attribute href and whose value contains Elements with the word "a.html" *= Get all elements with the attribute href and the value containing the text "a.html"
		All input elements with type="radio" Similar ones include: :text,:chexbox,:password,:submit,: reset, :button, :file

#2) The second half of the selector: can be accurate to a certain An element

SelectorInstanceDescription:first:last:eq(index )

3. jQuery selector + traversal function

It is also divided into two parts: the first half uses the selector to obtain an element Set, the second half uses the traversal function to accurately identify a certain element

1) The first half is the same as above

2) The second half: the traversal function

$('p:first')	The first element
$('p:last')	The last element
$("p:eq(1)")	The second element, index starts from 0

## eq() Returns the selected element The element with the specified index number first() Returns the first element of the selected element last( ) Returns the last element of the selected element

Method	Description

3. Get sibling elements

As the name suggests: Get the

sibling elements of selected element. First, you need to locate the element ( has been summarized above, so we will not repeat ), and then get its sibling elements.

1) Selector

element + next$('p + p')Each p is adjacent Next

element

element ~ siblings$('p ~ p')Get all the elements at the same level as p

Element

Selector	Instance	Description

## 2) Traversal function

MethodDescriptionnext()nextAll()prev()prevAll()

Returns the next element of the selected element Level elements
Returns all sibling elements after the selected element
Returns the previous sibling element of the selected element
Returns all sibling elements before the selected element

4. Get the parent element

Get the

parent

element of selected element 1) Selector

selection Device $('p:parent')

Instance	Description	:parent
Get the parent elements of all p elements

## 2) Traversal function

Method

Description

##parent()	Get the parent elements of the selected element
parents()	Get all the ancestor elements of the selected element

5. Get the child elements

Get the ## of the

selected element

#ChildElement

1) Selector

##Selector

Instance $('p > p')parent descendant $('p p') Get p All descendant

elements

# 2) Traversal function

Description	##parent > child	Get all elements that are direct child elements of p

Method

Description

Returns all direct child elements of the selected element (including text and comment nodes) Returns the descendant elements of the selected elementThe above content is a summary of JQuery’s method of obtaining elements. I hope it can help everyone.

children()Returns all direct child elements of the selected element	contents()
	find()

Related recommendations:

jquery gets the element index() method instance detailed explanation

jquery gets the element, wraps the element and inserts the element attribute usage Detailed explanation

jquery method of obtaining element value (common form elements)_jquery

The above is the detailed content of Summary of JQuery's methods of getting elements. For more information, please follow other related articles on the PHP Chinese website!