What are the jQuery selectors? What's the point?
May 31, 2021 Article blog
Table of contents
A selector is a way to select the element you want. T his element is selected and you can do all sorts of things with it. The jQuery selector is almost identical to the CSS selector, and of course, you have to learn the CSS Basics tutorial before you learn jQuery.
In JavaScript, if you want to pick an element, you can only get it using methods such as getElementByID (), getElementTagName (), getElementByClassName (), etc., which have limited functionality and the name "long and smelly", which is estimated to have scared away a lot of new students.
Compared to jQuery's selectors, jQuery has completely inherited the style of the CSS selector, which has greatly facilitated our development.
I. ID selector
Class Selector
The element selector
Level selectors
V. Full Selector
Six. Property filter selector
| selector | description |
| $("[attribute|+'value']") | Select an element that specifies a property value equal to a given string or is prefixed by that string of text, followed by a hyphen "-" |
| $("[attribute|+'value']") | Select the specified property to have an element that contains a given substring (select a given property to be an element that contains certain values) |
| $("[attribute*+'value']") | Select the specified property to contain an element of a given value in a value separated by a space |
| $("[attribute~='value']") | Selecting the specified property is given a worthy element |
| $("[attribute='value']") | Select an element that does not have a specified property, or that does not have a specified property value equal to a given value |
| $("[attribute^='value']") | Select the element whose specified property starts with a given string |
| $("[attribute$='value']") | Selecting an element whose specified property ends with a given value is case sensitive |
| $("[attribute]") | Select all elements with the specified property, which can be any function |
| $("[attribute$='value']") | Select the element that matches all the specified property filters |
Seven. Child element selector
| selector | description |
| $(":first-child") | Select the first child element under all parent elements |
| $(":last-child") | Select the last child element under all parent elements |
| $(":only-child") | If an element is the only child of its parent, it is selected |
| $(":nth-child") | Select the nth child element of all their parent elements |
| $(":nth-last-child") | Select the nth child element of all their parent elements. The count starts at the last element to the first |
Eight. Form element selector
| selector | description |
| $(":input") | Select all input, textarea, select, and button elements |
| $(":text") | Match all text boxes |
| $(":password") | Match all password boxes |
| $(":radio") | Match all radio buttons |
| $(":checkbox") | Match all check boxes |
| $(":submit") | Match all submission buttons |
| $(":image") | Match all image fields |
| $(":reset") | Match all reset buttons |
| $(":button") | Match all buttons |
| $(":file") | Match all text fields |
Of course, there are other selectors that can be found in the jQuery selector
The editor has found a jQuery selector detector that is perfect for beginners to learn, and jQuery has everything in style
In order to achieve the effect of learning while practicing, jQuery micro-classes can definitely help you to completely learn jQuery