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

Source: Internet
Author: User
Tags prev tag name

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


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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.