JQuery learning notes (3): Selector summary, jquery learning notes

JQuery learning notes (3): Selector summary, jquery learning notes

This section summarizes the jQuery selector in detail.

 

I. Basic Selector

$ ('# Info'); // select the element whose id is info. The id is unique in the document. Therefore, you can use this selector to obtain the unique specified element.
$ ('. Infoclass'); // select all elements whose class is infoClass
$ ('Div '); // select all the elements whose label is div.
$ ('*'); // Select all tag Elements

 

Ii. Basic Filter

The set of elements obtained by the Basic selector. The filter can be used to make the selection more accurate.

$ ('. InfoClass: first'); // select all element sets whose class is infoClass and filter the first element in the set.
$ ('. InfoClass: last'); // select all element sets whose class is infoClass and filter the last element in the set.
$ ('. InfoClass: odd'); // select a set of all elements whose class is infoClass, and filter elements whose index is odd in the set, such as 1, 3, 5.
$ ('. InfoClass: even'); // select a set of all elements whose class is infoClass, and filter elements whose index is an even number, such as, 4.
$ ('. InfoClass: eq (2)'); // select all the element sets whose class is infoClass and filter the element whose index is 2 in the set.
$ ('. InfoClass. lt (2)'); // select all the element sets whose class is infoClass, and filter the element sets whose index is smaller than 2 in the set.
$ ('. InfoClass. gt (2)'); // select all the element sets whose class is infoClass, and filter the element sets whose index is greater than 2 in the set.

 

3. Content Filter

JQery has prepared a content filter to filter the content of the selected element set.

Uniform Name:

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

$ ('Div: contains ("info") '); // select a set of all elements whose tags are div, and filter the elements whose text content contains the info Field.
$ ('Div: empty'); // select all the element sets Whose tag is div, and filter the empty elements in the set.
$ ('Div: parent'); // select a set of all elements whose tags are div, and filter all non-empty elements in the set.
$ ('Div: has (p) '); // select all the element sets Whose tag is div, and filter the elements whose descendant element contains the p tag in the set.

 

Iv. Visual Filter

JQuery also processes whether the elements are visible.

$ ('Div: visable'); // select all element sets Whose tag is div, and filter the visible elements in the set.
$ ('Div: Den den '); // select all the element sets Whose tags are div and filter the invisible elements in the set.

 

5. Attribute Filter

Different elements have different attribute parameters. jQuery allows parameter filtering.

$ ('Input [placeholder] '); // select a set of all elements whose tags are input and filter the elements that contain the placeholder attribute.
$ ('Input [placeholder = "info"] '); // select a set of all elements whose tags are input, and filter the elements whose placeholder attribute value is info.
$ ('Input [placeholder ^ = "info"] '); // select a set of all elements whose tags are input, and filter elements whose placeholder attribute values start with info.
$ ('Input [placeholder $ = "tion"] '); // select a set of all elements whose tags are input, and filter the elements whose placeholder attribute values end with tion.
$ ('Input [placeholder * = "mat"] '); // select a set of all elements labeled as input, and filter the elements whose placeholder attribute values contain the field mat.
$ ('Input [id] [placeholder * = "mat"] '); // select a set of all elements labeled as input, filter the elements that contain the id attribute and the placeholder attribute value that contain the field mat.

 

6. subelement Filter

This is confusing for comparison and summarization.

<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'background .css ('background-color', 'red'); // select the first element in the li element set under each ul label.

$ ('Ul li: first'background .css ('background-color', 'red'); // select the first li element set under all ul tags

$ ('Ul li: last-child '); // select the last element in the li element set under each ul label.

 

VII. Relationship Selector

• Peer element: that is, the current element is at the same level.
• Parent element: the upper-level element of the current element.
• Ancestor element: all upper-layer elements of the current element.
• Child element: the child element of the current element.
• Descendant element: all child layer elements of the current element.

$ ('Form input'); // select all elements whose tags are form and whose child element tags are input.
$ ('Form> input'); // select all elements whose tags are form and whose child element tags are input.
$ ('Label + input'); // select the first element in the element set whose label is the same level as the label.
$ ('Label ~ Input '); // select a set of elements whose labels are similar to labels and whose labels are input.

 

8. Form Selector

This facilitates the selection of form elements.

$ (': Input'); // select all input elements of the form, including input, textarea, and select
$ (': Text'); // select all input elements whose type is text.
$ (': Password'); // select all input elements whose type is password
$ (': Radio'); // select all input elements whose type is radio.
$ (': Checkbox'); // select all input elements whose type is checkbox.
$ (': Submit'); // select all input elements whose type is submit.
$ (': Image'); // select all input elements whose type is image.
$ (': Reset'); // select all input elements whose type is reset.
$ (': Click'); // select all input elements whose type is button.
$ (': File'); // select all input elements whose type is file.
$ (': Den den'); // select the hidden fields of all input elements or forms of the hidden type.

Form element filter

$ (': Enabled'); // select all operable form elements $ (': disabled'); // select all unoperable form elements $ (': checked '); // select all the checked form elements $ ('select option: selected'); // select the elements selected from all the select sub-elements

 

IX. comparison summary

To facilitate memory, we will summarize the function-related selectors:

1. $ ('# id') and $ ('. calss ')

$ ('# Id'); // select an element based on the id $ ('. class'); // select an element based on the class

 

2. $ ('div: first ') and $ ('div: la ')

$ ('Div: first '); // select the first $ ('div: la') in the div Element Set; // select the last element in the div element set.

 

3. $ ('div: odd') and $ ('div: even ')

$ ('Div: odd'); // select an odd number of elements in the div element set $ ('div: even'); // select an even number of elements in the div Element Set

 

4. $ ('div: gt (I) ') and $ ('div: lt (I )')

$ ('Div: gt (I) '); // select the element whose index is greater than I in the div element set $ ('div: lt (I )'); // select the element whose index is smaller than I in the div Element Set

 

5. $ ('div: empty') and $ ('div: parent ')

$ ('Div: empty'); // select an empty element in the div element set $ ('div: parent'); // select a non-empty element in the div Element Set

 

6. $ ('div: visable') and $ ('div: Den den ')

$ ('Div: visable'); // select the visible element in the div element set $ ('div: Den den '); // select the hidden element in the div element set.

 

7. $ ('ul li: first ') and $ ('ul li: first-child ')

$ ('Ul li: first '); // select the first element in the li Element Set of all ul descendants
$ ('Ul li: first-child '); // select the first element in the li Element Set of each ul descendant

 

8. $ (': disable') and $ (': enable ')

$ (': Disable'); // select all form elements that can be operated $ (': enabled'); // select all form elements that cannot be operated