The common element lookup method of jquery Selector summary _jquery

Source: Internet
Author: User
Tags prev

The selector does not have a fixed definition, and in some ways the jquery selector is very similar to the selector in the style sheet. Selectors have the following characteristics:

1. Simplifying the writing of code

2. Implicit iterations

3. No need to determine if an object exists

The JQuery selector is incredibly powerful, and here's a quick summary of common element lookup methods

$ ("#myELement") select an element with an ID value equal to MyElement, and the ID value cannot be repeated in the document only one ID value is myelement so the unique element is obtained

$ ("div") selects all div tag elements, returns an array of DIV elements
$ (". MyClass") Select all elements of a CSS that uses the MyClass class
$ ("*") Select all the elements in the document, and you can use a variety of options for joint selection: for example $ ("#myELement, Div,.myclass")
$ ("Form input") select the INPUT element in all form elements
$ ("#main > *") Select all child elements of the ID value of main
$ ("label + input") selects the next INPUT element node for all the label elements, and the test selector returns all input label elements immediately following the label label with an input label
$ ("#prev ~ div") sibling selector, which returns all the div tags that belong to the same parent element for a LABEL element with ID prev

Basic Filter Selector:

$ ("Tr:first") selects the first of all TR elements
$ ("Tr:last") selects the last of all TR elements
$ ("Input:not (: Checked) + span") filter out: All input elements of the checked selector
$ ("Tr:even") Select all TR elements of the 0,2,4 ... Element (Note: Since the selected element is an array, the ordinal number is starting at 0)
$ ("tr:odd") Select all TR elements of the 1,3,5 ... An element
$ ("Td:eq (2)") select the TD element with the serial number 2 in all TD elements
$ ("TD:GT (4)") Select all TD elements with serial number greater than 4 in TD elements
$ ("Td:ll (4)") Select all TD elements with a serial number less than 4 in the TD element
$ (": Header") Select all header elements, such as H1,h2,h3
$ ("div:animated") selects all elements that are performing an animation effect

Content Filter Selector:

$ ("Div:contains (' John ')") Select elements in all div that contain John text
$ ("Td:empty") selects all arrays of TD elements that are empty (and not including text nodes)
$ ("Div:has (P)") Select all DIV elements that contain p tags
$ ("td:parent") Select all array of elements with TD as parent node

Visual Filter Selector:

$ ("Div:hidden") Select all the hidden div elements
$ ("div:visible") Select all the visual div elements

Attribute Filter Selector:

$ ("Div[id]") Select all DIV elements that contain ID attributes
$ ("input[name= ' newsletter ']") selects all input elements that have the Name property equal to ' newsletter '
$ ("input[name!= ' newsletter ']") selects all input elements that are not equal to ' newsletter ' for all name properties
$ ("input[name^= ' News") selects all the input elements with the name attribute beginning with ' News '
$ ("input[name$= ' News '") Select all the input elements with the name attribute ending with ' news '
$ ("input[name*= ' News ')") Select all the name attributes containing the ' news ' INPUT element
$ ("input[id][name$= ' man ')" can use multiple properties for a federated selection that gets all elements with ID attributes and the name attribute ending with man

child element Filter Selector:

$ ("UL Li:nth-child (2)"), $ ("ul Li:nth-child (Odd)"), $ ("ul Li:nth-child (3n + 1)")
$ ("div span:first-child") returns the span element under all DIV elements, taking only the first
$ ("div span:last-child") returns the span element under all DIV elements, taking only the last
$ ("div button:only-child") returns an array of all the button elements under all div with only one child element

Form element selector:

$ (": Input") Select all form input elements, including input, textarea, select and button
$ (' input:text ') Select INPUT element of type text in all input elements
$ (' input:password ') Select INPUT element of type password in all input elements
$ (' input:radio ') Select INPUT element of type radio in all input elements
$ (' input:checkbox ') select INPUT element with checkbox type in all input elements
$ (' input:submit ') Select the INPUT element of type submit for all input elements
$ (' input:image ') Select INPUT element with type image in all input elements
$ (' Input:button ') Select INPUT element of type button in all input elements
$ (' input:file ') Select the INPUT element of type file in all input elements
$ ("Input:hidden") Select INPUT element of type hidden in all input elements

Form element Filter Selector:

$ (": Enabled") Select all operable form elements
$ (":d isabled") Select all of the form elements that are not operable
$ (": Checked") Select all of the checked form elements
$ ("Select Option:selected") Select the element to be selected in the child elements of all Select

The above is a small series to introduce the jquery selector summary of the common elements of the search method, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!

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.