Common selectors in jquery

Source: Internet
Author: User

Property Selector

1> [attribute] Overview: Matches the element that contains the given property. Example JQuery code: $ ("div[id]") Description: Find all DIV elements that contain ID attributes

2> [Attribute=value] Overview: Matching a given property is an element of a particular value

3> [Attribute!=value] Overview: Matches all elements that do not contain the specified attribute, or that the property is not equal to a specific value.

4> [Attribute^=value] Overview: Matching a given property is an element that starts with some value

5> [Attribute$=value] Overview: Matching a given property is an element that ends with some value

6> [Attribute*=value] Overview: Matches a given property to an element that contains some value

The 7> [Selector1][selector2][selectorn] Composite Property selector is used when multiple conditions need to be met.

Base Filter Selector

1.: First usage: $ ("Tr:first"); Returns the value of a single element that consists of a collection description: matches the first element found

2,: Last Usage: $ ("Tr:last") return value Collection element Description: Matches the final element found. Corresponds to: First

3: Not (selector) Usage: $ ("Input:not (: Checked)") return value Collection element Description: Removes all elements that match the given selector. A bit similar to "non", meaning that there is no selected input (when input is type= " CheckBox ").

4,: Even usage: $ ("Tr:even") return value Collection element Description: Matches all elements with an even number of index values, counting from 0. The array of JS is counted from 0. For example, to select rows in table because they are counted from 0, So the first TR in table is even 0.

5,: Odd usage: $ ("tr:odd") return value Collection element Description: Matches all elements with an odd index value, and: even corresponds, counting starting from 0.

6.: EQ (Index) Usage: $ ("tr:eq (0)") return value Collection element Description: Matches an element of a given index value. EQ (0) is the first TR element. The parentheses are the index values, not the number of element permutations.

7: GT (Index) Usage: $ ("tr:gt (0)") return value Collection element Description: Matches all elements that are greater than the given index value.

8: LT (index) Usage: $ ("Tr:lt (2)") return value Collection element Description: Matches all elements that are less than the given index value.

9.: Header (fixed notation) usage: $ ("header"). CSS ("Background", "#EEE") The return value collection element Description: Matches a CAPTION element such as H1, H2, H3, and so on. This is a TITLE element specifically used to get h1,h2.

10,: Animated (fixed notation) return value collection element Description: Matches all elements that are performing an animation effect

Content Filter Selector

The filtering rules of the Content filter selector are mainly embodied in the child elements and the text content.

1.: Contains (text) Usage: $ ("Div:contains (' John's)") return value Collection element Description: Matches the element that contains the given text. This selector is useful, and when we're not going to choose a DOM tag element, it comes in handy, Its function is to find whether the text content that is labeled "enclosed" conforms to the specified content.

2,: Empty usage: $ ("Td:empty") return value Collection element Description: Matches all empty elements that do not contain child elements or text

3: Has (selector) Usage: $ ("Div:has (P)") return value Collection element Description: Matches the element that contains the element that the selector matches. (Example of a div that matches a P element)

4,:p arent usage: $ ("td:parent") return value Collection element Description: Matches elements that contain child elements or text. Note: This is ":p arent", not ". Parent" Oh! With the above ": Empty" form an antonym.

Visibility Filter Selector

The Visibility filter selector selects the appropriate element based on the visible and invisible state of the element

1.: Hidden usage: $ ("Tr:hidden") return value Collection element Description: Matches all invisible elements, and the INPUT element's type attribute is "hidden", which is also matched to. "Display:none and input type= in CSS" Hidden "will be matched to. Again, the colon": "and the" dot "will be completely divided in your mind. and the comma "," the difference.

2.: Visible Usage: $ ("tr:visible") return value Collection element Description: matches all visible elements.

Attribute Filter Selector

The filter rule for a property filter selector is to get the corresponding element through the attributes of the element

1. [Attribute] Usage: $ ("div[id]"); The return value collection element Description: Matches the element that contains the given property. In the example, all div tags with the "id" attribute are selected.

2. [Attribute=value] Usage: $ ("input[name= ' newsletter ')"). attr ("Checked", true); The return value collection element Description: Matches a given attribute is an element of a particular value. The example selects all the name attributes as input elements of the newsletter.

3. [Attribute!=value] Usage: $ ("input[name!= ' newsletter ')"). attr ("Checked", true); The return value collection element Description: Matches all elements that do not contain the specified attribute, or the attribute is not equal to a specific value. This selector is equivalent to: not ([Attr=value]), to match an element that contains a specific attribute but not equal to a specific value, use [Attr]:not ([Attr=value]) What you've seen before: The not is in handy.

4, [Attribute^=value] Usage: $ ("input[name^= ' News") return value Collection element Description: Matches a given property is an element that starts with some value. We've seen these symbols similar to regular matches. You can't forget it now, do you?

child element Filter Selector

1: Nth-child (index/even/odd/equation) Usage: $ ("ul Li:nth-child (2)") return value Collection element Description: Matches the nth child or odd-even element under its parent element. This selector and previously said the basic filter in the EQ () Somewhat similar, the difference is that the former is starting from 0 and the latter is starting from 1. Eg:2 | | even | | Odd | | 3n | | 3n+1

2,: First-child Usage: $ ("ul Li:first-child") return value Collection element Description: Matches the first child element. ': Primary ' matches only one element, and this selector will match one child element for each parent element. Here's a special point to remember the difference.

3,: Last-child Usage: $ ("ul Li:last-child") return value Collection element Description: Matches the last child element. ': ' matches only one element, and this selector will match one child element for each parent element.

4,: Only-child Usage: $ ("ul Li:only-child") return value Collection element Description: If an element is the only child element in the parent element, it will be matched. If the parent element contains other elements, it will not be matched. Meaning: Only one child element will be matched !

Form Selector

1.: Input usage: $ (": input"); Return value Collection element Description: Matches all input, textarea, select, and button elements

2.: Text usage: $ (": text"); The return value collection element Description: Matches all single-line text boxes.

3,:p Assword usage: $ (":p assword"); The return value collection element Description: Matches all password boxes.

4,: Radio Usage: $ (": Radio"); The return value collection element Description: Matches all radio buttons.

5.: CheckBox Usage: $ (": checkbox"); Return value Collection element Description: Match all check boxes

6.: Submit Usage: $ (": Submit"); The return value collection element Description: Matches all submit buttons.

7.: Image usage: $ (": Image") return value Collection element Description: Matches all image fields.

8.: RESET Usage: $ (": Reset"); The return value collection element Description: Matches all reset buttons.

9,: Button usage: $ (": Button"); The return value collection element Description: Matches all buttons. This includes the direct write element button.

10,: File Usage: $ (": File"); The return value collection element Description: Matches all file domains.

Common selectors in jquery

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.