jquery Selector Summary

This section summarizes the jquery selector in detail.

First, the basic selector

$ (' #info ');  Select the element with ID info, which is unique in document, so that a unique specified element can be obtained from the selector
$ ('. Infoclass ');  Select all elements of class Infoclass
$ (' div ');  Select all elements with a tag named Div　　　　
$ (' * ');   Select all Label elements

Second, basic filter

The basic selector gets a collection of elements, filtered by filters, to make the selection more precise.

$ ('. Infoclass:first ');    Selects all elements of the class as Infoclass, and filters the first element in the collection
$ ('. Infoclass:last ');     Selects all elements of the class as Infoclass, and filters the last element in the collection
$ ('. infoclass:odd ');      Selects all elements of the class as Infoclass, and filters the elements in the collection that are indexed to odd numbers, such as 1,3,5
$ ('. Infoclass:even ');     Selects all the elements of the class as Infoclass, and filters the elements in the collection that are indexed to even numbers, such as 0,2,4
$ ('. INFOCLASS:EQ (2) ');    Selects all elements of the class as Infoclass and filters the elements indexed to 2 in the collection
$ ('. infoclass.lt (2) ');    Selects all elements of the class Infoclass collection and filters the collection of elements in the collection that are less than 2 indexed
$ ('. INFOCLASS.GT (2) ');    Selects all elements of the class Infoclass, and filters the collection of elements in the collection that are greater than 2

Third, Content filter

Jqery prepared a content filter to filter the contents of the selected element collection.

Unified Name:

• Empty element: An element that does not contain any descendant elements or text content, such as <div></div>
• Non-empty elements: elements that contain descendant elements or contain textual content

$ (' Div:contains (' info ') ');     Selects all elements of the collection labeled Div, and filters the elements of the collection containing the Info field in the Chinese text
$ (' div:empty ');                Selects all elements of the collection labeled Div, and filters all empty elements in the collection
$ (' div:parent ');              Selects all elements of the collection labeled Div, and filters all non-empty elements in the collection
$ (' Div:has (P) ');               Selects all elements of the collection labeled Div, and filters the elements of the collection that have the P tag in the descendant elements

Iv. Visualization Filters

jquery is also handled for elements that are visible.

$ (' div:visible ');            Selects all elements of the collection labeled Div, and filters the elements that are visible in the collection
$ (' Div:hidden ');             Selects all elements of the collection labeled Div, and filters elements that are not visible in the collection

Five, attribute filter

There are different attribute parameters between different elements, and jquery allows filtering by parameters.

$ (' input[placeholder] ');               Selects all elements that are tagged as input and filters the elements that contain the placeholder attribute
$ (' input[placeholder= ' info "]);        Select all element collection labeled input and filter the element with the placeholder property value of info
$ (' input[placeholder^= ' info "]);       Selects all elements that are tagged as input and filters the elements that begin with the placeholder property value in info
$ (' input[placeholder$= ' tion "]);       Selects all elements that are tagged as input and filters the placeholder property value to tion the end of the element
$ (' input[placeholder*= ' mat "]);        Selects all elements that are tagged as input and filters the elements of the placeholder property value that contain the field mat
$ (' input[id][placeholder*= ' mat "]);    Select all elements that are labeled input and filter the element that contains the id attribute and the Placeholder property value that contains the field mat

Six, sub-element filter

This is easier to confuse, to compare and summarize.

<ul>  <li>John</li>  <li>Karl</li>  <li>brandon</li></ul ><ul>  <li>Glen</li>  <li>Tane</li>  <li>ralph</li></ Ul>

$ (' ul li:first-child '). CSS (' background-color ', ' red ');   Select the first of the LI elements collection under each UL tag

$ (' ul Li:first '). CSS (' background-color ', ' red ');   Select the first of the LI elements collection under all UL tags

$ (' ul Li:last-child ');   Select the last one in the Li element collection under each UL tag

Vii. Relationship Selector

• Sibling element: That is, the current element is at the same level.
• Parent element: The immediate upper-level element of the current element.
• Ancestor element: That is, all the upper elements of the current element.
• Child element: The immediate child-level element of the current element.
• Descendant elements: That is, all child layer elements of the current element.

$ (' form input ');           Selects all elements labeled as form in the element with the descendant element label as input
$ (' form>input ');           Select all elements labeled as form, child element labeled as INPUT element
$ (' label+input ');          Selects all of the sibling elements labeled as label, the first in the collection of elements with the label input
$ (' label~input ');          Selects all elements of a sibling labeled as label, with the element collection labeled input

Eight, form selector

Facilitates the selection of form elements.

$ (': input ');                Select all form input elements, including input,textarea,select
$ (': Text ');                 Selects all input elements of type text
$ (':p assword ');             Selects all input elements of type password
$ (': Radio ');                
$ (': CheckBox ');             
$ (': Submit ');               
$ (': Image ');                
$ (': Reset ');                
$ (': Button ');               
$ (': file ');                 
$ (': Hidden ');               

Form element Filter

$ (': Enabled ');                  Select all the actionable form elements $ (':d isabled ');                 Select all the non-operational form elements $ (': checked ');                  Select all of the checked form elements $ (' select option:selected ');    

Ix. Comparison and summary

To facilitate memory, the function-related selectors are summarized:

1. $ (' #id ') with $ ('. Calss ')

$ (' #id ');  Select the element by ID $ ('. class ');   Select elements by Class　　

2.$ (' Div:first ') with $ (' div:last ')

$ (' Div:first ');     Select the first  $ (' div:last ') in the div element collection;      Select the last one in the DIV element collection

3.$ (' Div:odd ') with $ (' Div:even ')

$ (' div:odd ');       Select an odd number of elements in the DIV element collection  $ (' Div:even ');      Select an even number of elements in a DIV element collection

4.$ (' Div:gt (i) ') and $ (' Div:lt (i) ')

$ (' Div:gt (i) ');       Select the element in the DIV element collection that has an index greater than I  (' Div:lt (i) ');       Select an element in the DIV element collection that has an index less than I

5.$ (' Div:empty ') with $ (' div:parent ')

$ (' div:empty ');        Select the div element set hollow element $ (' div:parent ');       Select non-empty elements in the DIV element collection

6.$ (' div:visible ') with $ (' Div:hidden ')

$ (' div:visible ');      Select the visible element in the DIV element collection $ (' Div:hidden ');       To select a hidden element in the DIV element collection

7.$ (' ul Li:first ') with $ (' ul Li:first-child ')

$ (' ul Li:first ');             Select all UL descendant elements the first of the LI element collection
$ (' ul Li:first-child ');       Selects the first of each UL descendant element in the LI element collection

8.$ (':d isable ') with $ (': Enable ')

$ (':d isable ');             Select all the form elements that can be manipulated by $ (': Enable ');              Select all form elements that cannot be manipulated

-Reprint

jquery Selector Summary