jquery Selector Categories: Basic selector, hierarchy selector, filter selector, form selector.

Basic Selector

Description: Find DOM elements by element ID, class, tag name, etc.

1.id selector: $ ("#test");//select element with ID Test 2. Class Selector: $ (". Test");//Select all elements of class test, other: $ (' Div.mini ') 3. Tag Selector: $ ("div");// Select all <div> elements 4. Group selector: $ ("p,div,.test");//Select All <P>,<div> and a set of elements with class test 5. Wildcard selector: $ ("*"); A wildcard selector that matches all elements of the page

Hierarchy Selector

Description: Gets specific elements, such as descendant elements, child elements, adjacent elements, sibling elements, through a hierarchical relationship between DOM elements

1.$ ("div span");//Select all <span> element 2.$ ("Div>span") in <div>, and//select <div> Sub-element 3.$ (') under the element name <span>. One+div ');//Select Class as one's next <div> element (adjacent Element) 4.$ (' #two ~div ');//Select the element with ID of "all" after all <div> sibling elements

Attention:

The equivalence relationship between the $ (' prev+next ') selector and the next () method

$ ('. One+div ') is equivalent to $ (". One"). Next ("div")

The equivalence relationship between the $ (' prev~siblings ') selector and the Nextall () method

$ ('. One~div ') is equivalent to $ (". One"). Nextall ("div")

Form Selector

1. Form object property Filter Selector

1.1:$ ("#form1: Enabled");//Select all available elements 1.2:$ ("#form1:d isabled") in the form with the id "Form1", or select all the unavailable elements in the form with the id "Form1" 1.3:$ (" Input:checked ");//Select all selected <input> elements 1.4:$ (" select:selected ");//Select all selected option elements

2. Form object property Filtering example

2.1:$ (": Input");//Select All <input>, <textarea>, <select>, and <button> element 2.2:$ (": Text");// Select all single-line text 2.3:$ (": password");//Select all the password boxes 2.4:$ (": Radio"),//Select all the Checkboxes 2.5:$ (": checkbox");//Select all the multi-box 2.6:$ (": Submit") ;//Select all the Submit buttons 2.7:$ (": Image"),//Select all the image buttons 2.8:$ (": Reset"),//Select all the Reset buttons 2.9:$ (": Button");//Select All buttons 2.10:$ (: file);// Select all the upload fields 2.11:$ (": Hidden");//Select all invisible elements

Filter Selector

Description: Filters out the required DOM elements primarily through a specific filter selector rule, with the selector beginning with a colon (:)

1. Basic Filter Selector:

1.1:$ ("Div:first");//Select all <div> elements in the first <div> element 1.2: $ ("div:last");//Select all <div> elements in the last <div> Element 1.3: $ ("Input:not (. myClass)");//Select Class is not MyClass <input> element 1.4: $ ("Input:even");//Select index is even <input> Element 1.5: $ ("input:odd");//Select index is odd <input> element 1.6: $ ("Input:eq (1)";//Select the <input> element with index 1 1.7: $ ("INPUT:GT (1)") ;//Select the <input> element with index greater than 1 (note: greater than 1, not including 1) 1.8: $ ("input:lt (1)");//Select the <input> element with index less than 1 (note: Less than 1, not including 1) 1.9: $ (": //Select all

2. Content Filter Selector:

2.1:$ ("Div:contains");//Select the <div> element 2.2:$ ("Div:empty") that contains the text "I";//Select the <div> empty element 2.3:$ that does not contain child elements (including text elements) ( "Div:has (P)");//Select the <div> element 2.4:$ ("Div:parent") that contains the <p> element;//Select <div> elements that have child elements (including text elements)

3. Visibility Filter Selector:

3.1:$ (": Hidden");//Select all elements that are not visible.

Includes <input type= "hidden" >,<div style= "disply:none;> and <div style=" Visibility:hidden; " > and other elements. If you want to select only the <input> element, you can use $ ("Input:hidden")

3.2:$ ("div:visible");//Select all visible <div> elements

4. Attribute Filter Selector

4.1:$ ("Div[id]");//Select the element that has the attribute ID 4.2:$ ("div[title=test]"), or select the <div> element 4.3:$ ("Div[title!=test") with the property title "Test" ")///select attribute title not equal to ' test ' <div> element (note: The <div> element of the title without the attribute will also be selected) 4.4:$ (" div[title^=test] ");//Select the property title to" Test "Start <div> element 4.5:$ (" div[title$=test] ");//Select the property title" Test "to end the <div> element 4.6:$ (" div[title*=test] "); Select the attribute title contains the "Test" of the <div> element 4.7:$ ("div[id][title$= ' Tets ')");//Select the Owning property ID, and the property title ends with "test" <div> element

5. Child element Filter Selector

5.1---: eq (index) matches only one element, while: Nth-child will match child elements for each parent element, and: The Index of Nth-child (index) starts at 1, and: EQ (index) is the 5.2---from 0: First returns only a single element, whereas: The First-child selector matches each parent element 5.3 The---: Last returns only a single element, whereas: The Last-child selector matches each parent element to the final child element

jquery Selector Categories: Basic selector, hierarchy selector, filter selector, form selector.