There are 4 types of jquery selectors, namely: 1. Basic selector, which searches for elements by their id, class, etc.; 2. Hierarchical selector, which obtains specific elements based on hierarchical relationships; 3. Filtering Selectors include content filtering, visibility filtering, attribute filtering, and sub-element filtering; 4. Form selectors can return a collection of elements.
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
The basic selector is the most commonly used and simplest in jQuery Selector, which finds DOM elements through the element's id, class, tag name, etc.
1. ID selector #id
Description: Match an element based on the given id and return a single element (Note: In the web page, the id name cannot be repeated )
Example: $("#test") selects the element with the id of test
2. Class selector.class
Description: According to The given class name matches the element and returns the element set
Example: $(".test") selects all elements with class test
3. Element (label) selector element
Description: Match the element based on the given element name and return the element collection
Example: $("p") selects all
elements $("div "): Select all div tags
4, *
Description: Match all elements and return the element set
Example: $("* ") Select all elements
5, selector1, selector2,...,selectorN (union selector)
Description: Match each selector to The elements are merged and returned together to return the merged element set
Example: $("p,span,p.myClass") selects all
, and< whose class is myClass ;p>Element collection of tags
The hierarchical selector obtains specific elements based on hierarchical relationships.
1. Descendant selector
Example: $("p span") selects all elements in the element (Note: The descendant selector selects all specified selected elements of the parent element, whether they are children or grandchildren) 2. Child selector $("parent>child") Example: $("p>span") selects all elements under the element (note: the child selector only selects child elements directly belonging to the parent element) 3. Peer selector $("prev next") Description: Select the next element immediately after the prev element and return the element set Example: $(". one p") selects the next sibling element set with class one 4, sibling selector $("prev~siblings") Description : Select all siblings elements after the prev element and return the set of elements Example: $("#two~p") selects the set of all sibling elements after the element with id two 1>Basic filter selector 1, :first Description: Select the first An element, returns a single element Example: $("p:first") selects the first element among all elements 2, :last Description: Select the last element and return a single element Example: $("p:last") Selects the last element among all elements 3. :not(selector) Description: Remove all elements matching the given selector and return a collection of elements Example: $("input:not(.myClass)" ) Select elements whose class is not myClass 4, :even Description: Select all elements whose index is an even number, the index starts from 0, and return the element set 5. :odd Description: Select all elements whose index is an odd number. The index starts from 0 and returns the element set 6. :eq(index) Description: Select the element whose index is equal to index. The index starts from 0 and returns a single element. 7, :gt(index) Description: Selects the element whose index is greater than index. The index starts from 0 and returns the element. Collection 8, :lt(index) Description: Select elements whose index is less than index, the index starts from 0, and return the element collection 9, :focus Description: Select the currently focused element 2>Content filter selector 1, :contains(text) Description : Select the element containing the text "I" and return the element collection Example: $("p:contains('I')") Select the element containing the text "I" 2, :empty Description: Select empty elements that do not contain child elements or text elements, and return a collection of elements Example: $("p:empty") Selects empty elements that do not contain child elements or text elements Empty element ( 3, :has(selector) Description: Select the element containing the element matched by the selector and return the element collection Example: $("p:has(p)") Selects the containing the element Element (3. Filter selector
4, :parent
Description: Select elements containing child elements or text, and return the element collection
Example: $("p:parent") selects
elements that contain child elements or text elements (
ortext< ;/p>)
3>Visibility filter selector
1, :hidden
Description: Select all invisible elements and return Element collection
2, :visible
Description: Select all visible elements and return the element collection
4>Attribute filter selector (return element collection)
1.[attribute]
Example: $("p[id]") Select the p element with the id attribute
2.[attribute=value]
Example: $("input[name=text]") Select the input element with name attribute equal to text
3, [attribute!=value]
Example: $("input[name!=text]") Select input elements with name attributes that are not equal to text
4, [attribute^=value]
Example: $("input[name ^=text]") Select input elements with name attributes starting with text
5, [attribute$=value]
Example: $("input[name$=text]") Select input elements with name attributes ending with text
6, [attribute*=value]
Example: $("input[name*=text]") Select input elements with name attributes containing text The input element
7, [attribute~=value]
Example: $("input[class~=text]") selects the space-separated value with class attribute that contains text Input element
8, [attribute1][attribute2][attributeN]
Description: Merge multiple attribute filter selectors
5>Form object attribute filter selection Device (returns a collection of elements)
1, :enabled
Description: Select all available elements
2, :disabled
Description: Select All unavailable elements
3, :checked
Description: Select all selected elements (radio boxes, check boxes)
Example: $("input: checked") Select all selected elements
4, :selected
Description: Select all selected option elements (drop-down list)
Example: $("select option:selected") Selects all selected option elements
1. :text
Description: Select all single-line text boxes
Example: $(":text")Select all single-line text boxes
2. :password
Description: Select all password boxes
3.:button
Description: Select all buttons
4, :checkbox
Description: Select all multi-select boxes
Recommended related video tutorials: jQuery video tutorial
The above is the detailed content of What are the types of jquery selectors?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
