1 Base selector

1.1 Basic selector

Basic selectors are the most frequently used in development, and there are four main types:

1. Element selector: syntax is $(” element name “)

   $("p").css("color","red");

2. Id selector: syntax is $(“#id name “), don’t forget to write #

   $("#submit").css("color","red");

3. Class selector: syntax is $(“.class name “), don’t forget to write.

   $(".btn").css("color","red");

4. Group selector: performs the same operation on several selectors at the same time, with the syntax $(” selector 1, selector 2… , selector n”)

   $("h3,div,p,span").css("color","red");

1.2 Hierarchy selector

In jQuery, there are four types of hierarchical selectors: father, son, descendant, brother, and neighbor.

1. Descendant selector: Syntax is $(“M N”). Note the spacing between M and N, as shown in the following example: select all p elements inside the element with id=”first”. Both descendents are selected.

   $("#first p")

2. Child selector: Syntax is$("M>N"), itOnly select the child elements, does not include other descendant elements.
3. Brother selector: Syntax is$("M~N"), i.e.,Selects a class of sibling elements that follow (but not precede) the element.
4. Adjacent selector: syntax is$("M+N"), chooseTake one of the adjacent siblings of the element that follows it.

Note: the sibling selector selects is
One type ofElement, and the adjacent selector selects
A certainElements.

1.3 Property selector

An attribute selector is a way to select an element based on its attributes. Common attribute selectors look like this (E stands for Element, for element) :

Property selectors are often used for selections
The form elements.

The selector	instructions
E[attr]	Select element E, where E is the elementMust be withAttr attribute
E[attr="value"]	Select element E, where the attr attribute of element EValue is the value
E[attr!= "value"]	Select element E, where the attr attribute of element EIt’s not value
E[attr^= "value"]	Select element E, where the attr attribute of element E isBegin with the valueAny character of the
E[attr$="value"]	Select element E, where the attr attribute of element E isEnds with the valueAny character of the
E[attr*= "value"]	Select element E, where the attr attribute of element E isAny character that contains value
E[attr| = "value"]	Select element E, where the attr attribute of element E takes valueIs equal to value or begins with value
E[attr~= "value"]	Select element E, where the attr attribute of element E takes valueIs equal to value or contains value

Pseudo class selector

2.1 Location pseudo-class selector

Position pseudo-class selector: This is to select elements based on their position on the page. Common selectors are shown in the following table:

The selector	instructions
:first	Pick the first one of the elements
:last	Pick the last element of an element
:odd	Selects all elements in an element with an “odd” number. Since the number starts at 0, even rows are selected
:even	Selects all elements in an element with an “even” number. Since the number starts at 0, the odd rows are selected
:eq(n)	Take the NTH element of something, where n is an integer, starting at 0
:lt(n)	Take all of the elements in some element that are less than n, which is an integer, starting at 0
:gt(n)	Take all the elements in some element greater than n, which is an integer, starting at 0

2.2 Child element pseudo-class selector

Subclass pseudo-class selector: that is, select the children of an element, which can be divided into two major categories: location by location and location by type (the classification name itself is 😅).

The first category is shown in the following table: E represents child elements.

The selector	instructions	For example,
E:first-child	Select the first child element under the parent element	$("ul li:first-child")
E:last-child	Select the last child element under the parent element	$("ul li:last-child")
E:nth-child(n)	Select the NTH child or even element from the parent element. There are three values for n: number, odd, and even. Note:N starts at 1	slightly
E:only-child	Select the only child element under the parent element, which has only one child	slightly

The second type is shown in the table below: Again, E represents child elements.

The selector	instructions
E:first-of-type	Select the first child element of type E under the parent element
E:last-of-type	Select the last child element of type E under the parent element
E:nth-of-type(n)	Select the NTH child element of type E from the parent element, or the odd or even element. There are three values for n: number, odd, even.N starts at 1
E:only-of-type	Select the child element of type E that is unique to the parent element. Note: the parent elementYou can have multiple children

2.3 Visibility pseudo-class selector

Visibility pseudo-class selector, which selects elements based on their visibility and invisibility states.

The selector	instructions
E:visible	Select all visible elements
E:hidden	Select all invisible elements

As shown in the following example, we hide the li tag and it will be displayed when the button is clicked.

<li style="display:none;" Hidden elements > < / li > < input id = "BTN" type = "button" value = "show" > < script > $(" # BTN "). Click (function () { $("li:hidden").css("display","block"); }); </script>

2.4 Content pseudo-class selector

The selector	instructions
:contains(text)	Selects the element that contains the specified text
:has(selector)	Selects the element that contains the specified selector
:parent	selectContains text or child elements inside(read several times, attributive too many 😄)
:empty	Select an empty element, which contains no text content and has no child elements.

For example:

$("p:contains(jQuery)") $("div:has(span)"); $("td:empty") $("td:empty") $("td:parent") // Select a td element that has text or child elements inside it

2.5 Form pseudo-class selector

The form pseudo-class selector is used to manipulate form elements specifically. Commonly used ones are shown in the following table:

The selector	instructions
:input	Select all input elements
:button	Select all the normal buttons, i.e<input type="button" />
:submit	Select all the submit buttons, i.e<input type="submit" />
:reset	Select all reset buttons, i.e<input type="reset" />
:text	Select all single – line text boxes
:textarea	Select all multiline text boxes
:password	Select all password text boxes
:radio	Select all the boxes
:checkbox	Select all the check boxes
:image	Select all image fields
:file	Select all file fields

$("input:checkbox").attr("checked", "checked"); // Select all the checkboxes and set the Checked property of the checkboxes to Checked

2.6 Form property pseudo-class selector

Form attribute pseudo-class selector refers to a pseudo-class selector that is selected according to the attributes of a form element. Specific include:

The selector	instructions
:checked	Selects all selected form elements, typically a checkbox or check box
:selected	The option to select the selected form element, typically a drop-down list
:enabled	Select all available form elements
:disabled	Select all the form elements that are not available
:read-only	Select all read-only form elements
:focus	Select all the form elements that get focus

Example: Gets the value of a checked box.

<script> var result = $("input:checked").val(); < / script > < label > < input type = "checkbox" value = "apple" / > apple < / label > < label > < input type = "checkbox" value = "watermelon" Checked /> </ > > checked/> </ > > checked/> </ > > checked/> </ > > checked/> </ > > checked/> </ > > checked/> </ > > checked

2.7 Other pseudo-class selectors

As shown in the table below:

The selector	instructions
:not(selector)	Selects all elements except for a selector
:animated	Select all the elements that are being animated
:root	Select the root element of the page, the HTML element
:header	Select the header elements from h1 to h6
:target	Select the anchor element
:lang(language)	Selects language-specific elements

Example: all the other items except item 4 are selected.

<script>
    $("li:not(#select)").css("color", "red");
</script>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li id="select">jQuery</li>
    <li>Vue.js</li>
</ul>