A small summary of jquery selectors

This section summarizes the jquery selector in detail.

First, the basic selector

$ (' #info ');  Select an element with ID info, and the ID is unique in document, so you can get a unique specified element through the selector $ ('. Infoclass ');  Select all elements of Class Infoclass $ (' div ');  Select all the elements of the tag named Div for $ (' * ');   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 ');    Select the collection of all elements of class Infoclass and filter the first element in the collection $ ('. Infoclass:last ');     Select the collection of all elements of class Infoclass and filter the last element in the collection $ ('. infoclass:odd ');      Select all the elements of the class Infoclass, and filter the elements in the collection that are indexed to odd numbers, such as 1,3,5 $ ('. Infoclass:even ');     Select all the elements of the class that are infoclass, and filter the elements in the collection that are indexed to even numbers, such as 0,2,4 $ ('. INFOCLASS:EQ (2) ');    Select all the elements of the class as Infoclass and filter the elements indexed in the collection to $2 ('. infoclass.lt (2) ');    Select the collection of all elements of class infoclass, and filter the collection of elements in the set that are less than 2 ('. 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 ') ');     Select the tag as a div for all elements of the collection and filter the contents of the collection to contain the info field's element $ (' div:empty ');                Selects all the elements of the set labeled Div, and filters all empty elements in the collection by $ (' div:parent ');              Selects all elements of the collection labeled Div, and filters all non-empty elements in the collection by $ (' 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 visible elements in the collection by $ (' 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] ');               Select the collection of elements that are labeled input and filter the element containing the placeholder attribute $ (' input[placeholder= "info"]);        Select all the elements that are tagged as input and filter the placeholder attribute value to info $ (' input[placeholder^= "info"]);       Select all the elements that are tagged as input and filter the placeholder attribute value to the element starting with info $ (' input[placeholder$= "tion"] ');       Select all the elements that are tagged as input and filter the placeholder attribute value to tion the end of the element $ (' input[placeholder*= "mat"] ');        Select all elements that are tagged as input and filter the element containing the field mat in the Placeholder property value $ (' 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 in the LI element 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 ');           Select all the elements labeled as form, and the descendant element tag is the element of input $ (' form>input ');           Select all the elements labeled as form, and the child element tag is the element of input $ (' label+input ');          Select the first $ (' Label~input ') in the element collection labeled input for all sibling elements labeled as label;          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 ');                 Select all the type input elements of text $ (':p assword ');             Select all the type input elements for password $ (': Radio ');                Select all the type input elements for radio  $ (': CheckBox ');             Select all the type input elements for the checkbox  $ (': Submit ');               Select all the type to submit the INPUT element  $ (': Image ');                Select all the type of the input element for image  $ (': Reset ');                Select all the type of the INPUT element for reset  $ (': Button ');               Select all the type for the INPUT element of the button  $ (': file ');                 Select all the type input elements for 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 elements by ID $ ('. class ');   // Select elements according to 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 the 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 with index less than I in the DIV element collection   

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

$ (' div:empty ');        // Select 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 ');       // Select to hide elements in the div element collection   

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

$ (' ul Li:first ');             // Select all UL descendant elements in the Li element collection for the first $ (' ul Li:first-child ');       // Select 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 $ (': Enable ');              // Select all table cells that cannot be manipulated   

A small summary of jquery selectors