What are jquery's pseudo-class selectors?-Front-end Q&A-php.cn

What are jquery's pseudo-class selectors?

WBOY

Release： 2022-06-08 10:48:25

Original

2548 people have browsed it

jquery's pseudo-class selector: 1. Position selector, selects elements according to their position on the page; 2. Sub-element selector, selects sub-elements under a certain element; 3. Visibility selector , select elements based on whether they are visible; 4. Content selector, select elements based on their internal text or sub-elements; 5. Form selector, used to operate form elements; 6. Form attribute selector, based on the attributes of form elements to choose.

What are jquery's pseudo-class selectors?

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

jquery’s pseudo-class selector

The pseudo-class selector can be regarded as a special selector. Pseudo-class selectors all start with an English colon:. jQuery refers to the form of CSS pseudo-class selectors and provides us with a large number of pseudo-class selectors.

Commonly used pseudo-class selectors include the following 6 types.

1. "Position" pseudo-class selector.

The "position" pseudo-class selector refers to a pseudo-class selector that selects elements based on their position on the page. In jQuery, common "position" pseudo-class selectors are shown in the table.

What are jquerys pseudo-class selectors?

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-min.js"></script>
    <script>
        $(function () {
            $("li:first,li:last").css("color", "red");
        })
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

Copy after login

The program execution effect is as shown in the figure:

What are jquerys pseudo-class selectors?

2. "Child element" pseudo-class selector.

The "child element" pseudo-class selector refers to a pseudo-class selector that selects child elements under a certain element. Selecting child elements is one of the most commonly used operations in jQuery.

In jQuery, there are two main categories of "child element" pseudo-class selectors.

:first-child, :last-child, :nth-child(n), :only-child;
:first- of-type, :last-of-type, :nth-of-type(n), :only-of-type.

3. "Visibility" pseudo-class selector.

The "visibility" pseudo-class selector refers to a pseudo-class selector that selects elements based on the two states of "visible" and "invisible". In jQuery, there are two "visibility" pseudo-class selectors

:visible selects all visible elements
:hidden selects all non-visible elements Visible elements

The so-called invisible elements refer to elements with display:none defined.

4. "Content" pseudo-class selector.

The "content" pseudo-class selector refers to a pseudo-class selector that selects elements based on their internal text or sub-elements. In jQuery, the commonly used "content" pseudo-class selector

:contains(text) selects elements containing the specified text
:has (selector) Select elements containing the specified selector
:empty Select elements that do not contain text and sub-elements, that is, empty elements
: parent selects elements containing text or child elements

5. "Form" pseudo-class selector.

The "form" pseudo-class selector refers to a pseudo-class selector that specifically operates on form elements.

:input selects all input elements
:button selects all ordinary buttons, that is,
:submit selects all submit buttons, i.e.
:reset selects all reset buttons, That is,
:text selects all single-line text boxes
:textarea selects all multi-line text Box
:password Select all password text boxes
:radio Select all radio button boxes
:checkbox Select all checkboxes
:image Select all image fields
:file Select all file fields

6. "Form attribute" pseudo-class selector.

The "form attribute" pseudo-class selector refers to a pseudo-class selector that is selected based on the attributes of the form element.

:checked Selects all selected form elements, usually radio buttons or check boxes
:selected Selects the selected form Element options, usually drop-down lists
:enabled Select all available form elements
:disabled Select all unavailable form elements
:read- only Select all read-only form elements
:focus Select all focused form elements

Video tutorial recommendation: jQuery video tutorial

The above is the detailed content of What are jquery's pseudo-class selectors?. For more information, please follow other related articles on the PHP Chinese website!