What are jquery selectors? Introduction to common selectors in jquery

jquery selector is used to find element nodes. One of the most powerful and commonly used functions of the $() function in jQuery is to use the selector to select DOM elements. Therefore, the following article will introduce it to you. Let’s take a look at the commonly used selectors in jquery. Friends in need can take a look.

Without further ado, let’s go directly to the text~

There are four major categories of jquery selectors, namely basic selectors, hierarchical selectors, filter selectors and form selectors. Let's take a look at these four jquery selectors separately.

1. jquery’s basic selector

The basic selector is the most commonly used selector in JQuery and is also the simplest selector. It uses element id, class and Tag name to find DOM elements.

$("#myELement")	Select the element whose id value is equal to myElement. The id value cannot be repeated in the document. There can be an id value of myElement, so the only element obtained is
$("div")	Select all div tag elements and return the div element array
$(".myClass")	Select all elements using css of myClass class
$("*")	To select all elements in the document, you can use a variety of selection methods for joint selection: for example $("#myELement,div,.myclass")

##Note: The id can only be used once in the web page, that is, the id is unique, but the class is allowed to be reused.

2. jquery hierarchical selector

The hierarchical selector obtains elements through the hierarchical relationship between DOM elements. The main hierarchical relationships include parent-child, descendant, adjacent, Brotherly relationship.

$("form input") Select the input elements in all form elements$("#main > *")Select all child elements whose id value is main$("label input")Select the next input element node of all label elements. After testing, the selector returns all input label elements that are directly followed by an input label. ##$(" #prev ~ div")

Note: Chain operations can only be performed if this method returns a JQuery object.

3. jquery filter selector

The filter selector mainly filters out the required DOM elements through specific filtering rules. The filtering rules are the same as the pseudo ones in CSS. The syntax of class selectors is the same, that is, the selectors start with a colon (:) (for more information about css pseudo-class selectors, please refer to css Learning Manual). According to different filtering rules, filter selectors can be divided into basic filtering, content filtering, visibility filtering, attribute filtering, sub-element filtering and form filtering. There are six types of selectors for object attribute filtering selectors. Let's take a brief look at the six jquery filter selectors

(1) jquery basic filter selector

Filter selectors are based on certain types of filtering rules. The matching of elements starts with (:) when written; the simple filter selector is the most widely used type of filter selector.

$("tr:first"): Select the first of all tr ​​elements

$("tr:last"): Select the last of all tr ​​elements

$("input:not(:checked) span"): Filter out all input elements of: checked selector

$("tr:even"): Select the 0th of all tr ​​elements , 2, 4... elements (note: because the selected elements are arrays, the sequence numbers start from 0)

$("tr:odd"): Select all The 1st, 3rd, 5th... element of the tr element

$("td:eq(2)"): Select the td element with serial number 2 among all td elements

$("td:gt(4)"): Select all td elements with sequence numbers greater than 4 in td elements

$("td:ll(4)"): Select td elements All td elements with serial numbers less than 4

$(":header"): Match header elements such as h1, h2, h3. This is specially used to obtain headers such as h1 and h2. Element

$("div:animated"): Matches all elements that are performing animation effects

(2) jquery content filter selector

The filtering rules of the content filtering selector are mainly reflected in the sub-elements and text content it contains.

$("div:contains('John')"): Select all elements containing John text in the div

$("td:empty"): Select all elements that are empty ( Array of td elements (not including text nodes)

$("div:has(p)"): Select all div elements containing p tags

$("td:parent" ): Select all element arrays with td as the parent node

(3) jquery visibility filter selector

The visibility filter selector is based on the visible and Invisible state to select the corresponding element.

$("div:hidden"): Select all hidden div elements

$("div:visible"): Select all visible div elements

(4) jquery attribute filter selector

The filtering rule of the attribute filter selector is to obtain the corresponding element through the attribute of the element.

$("div[id]"): Select all div elements containing the id attribute

$("input[name='newsletter']"): Select all div elements whose name attribute is equal to 'newsletter' input elements

$("input[name!='newsletter']"): Select all input elements whose name attribute is not equal to 'newsletter'

$("input [name^='news']"): Select all input elements whose name attribute starts with 'news'

$("input[name$='news']"): Select all name attributes Input elements ending with 'news'

$("input[name*='man']"): Select all input elements whose name attribute contains 'news'

(5) jquery child element filter selector

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$( "ul li:nth-child(3n 1)"): Matches the Nth child or odd-even element under its parent element. This selector is somewhat similar to eq() in Basic Filters mentioned before, but different The difference is that the former starts from 0 and the latter starts from 1.

$("div span:first-child"): Returns an array of the first child nodes of all div elements

$("div span:last-child" ): Returns an array of the last node of all div elements

$("div button:only-child"): Returns an array of all child nodes that have only one child node in all divs

(6) jquery form object attribute filter selector

This selector mainly filters the selected form elements.

$(":enabled"): Select all operable form elements

$(":disabled"): Select all inoperable form elements

$(":checked"): Select all checked form elements

$("select option:selected"): Select all selected elements in the child elements of select

$("input[@ name =S_03_22]").parent().prev().text(): Select the text value of the previous td of the input text box named "S_03_22"

$ ("input[@ name ^='S_']").not("[@ name $='_R']"): The name starts with "S_" and does not end with "_R"

$("input[@ name =radio_01][@checked]").val();: The selected value of a radio named radio_01

$(" A B"): Find all child nodes under the A element, including indirect child nodes

$("A>B"): Find the direct child nodes under the A element

$(" A B"): Find the sibling nodes behind the A element, including indirect child nodes

$("A~B"): Find the sibling nodes behind the A element, excluding indirect child nodes

4. jquery form selector

Using the form selector, we can easily obtain a certain element or type of element of the form.

Note: Note: The method to select the hidden value in the input is the usage in the above example, but if you use ":hidden" directly, it will match all invisible elements in the page, including those with a width or height of 0 .

$(":input"): Select all form input elements, including input, textarea, select and button

$(":text"): Select all text input elements

$(":password"): Select all password input elements

$(":radio"): Select all radio input elements

$(":checkbox "): Select all checkbox input elements

$(":submit"): Select all submit input elements

$(":image"): Select all image input elements

$(":reset"): Select all reset input elements

$(":button"): Select all button input elements

$(":file "): Select all file input elements

$(":hidden"): Select all input elements of type hidden or hidden fields of the form

The above is the entire content of this article For more information about the jquery selector, you can refer to jquery Online Manual on the php Chinese website for further information! ! !

Sibling selector, this selector returns all div tags belonging to the same parent element of the tag element with id prev

The above is the detailed content of What are jquery selectors? Introduction to common selectors in jquery. For more information, please follow other related articles on the PHP Chinese website!