Minute hand Net-daily share: The use of jquery selectors

Source: Internet
Author: User
Tags jquery library

jquery selectors are a feature of the jquery library, which not only eliminates tedious javascript writing, but also saves time and efficiency, and it's the jquery selectors that make it easier to manipulate the DOM of JavaScript. 1. Basic selector• #id match an element based on the given ID. For example: $ ("#id") element matches all elements according to the given element name. For example: $ ("div") ·. class matches elements based on the given classes. For example: $ (". Style1"); * matches all elements. For example: $ ("*") Selector1,selector2,selectorn the elements that match each selector to be returned together after merging. For example: $ ("#id, Div,.style1")2. Form selector:button matches all buttons. For example: $ (": Button"):checkbox matches all check boxes. For example: $ (": checkbox"):file matches all file domains. For example: $ (": File"):hidden matches all invisible elements, or the type is an element of hidden. For example: $ ("Input:hidden"):image matches all image fields. For example: $ (": Image"):input matches all input, textarea, select, and button elements. For example: $ (": input") •:p assword matches all password boxes. For example: $ (":p assword"):radio matches all radio buttons. For example: $ (": Radio"):reset matches all reset buttons. For example: $ (": Reset"):submit matches all submit buttons. For example: $ (": Submit"):text matches all single-line text boxes. For example: $ (": Text"):header matches header elements such as H1, H2, H3, and so on. For example: $ (": Header"). CSS ("Background", "#EEE");3. Filter criteria Selector3.1. jquery Property Selector· [Attribute*=value] matches the given attribute to an element that contains some value. For example: $ ("input[name*= ' Man '") [ Attribute!=value] matches all elements that contain the specified attribute, but the attribute is not equal to a particular value. For example: $ (input[name!= ' man '); [ Attribute$=value] matches a given property is an element that ends with some value. For example: $ ("input[name$= ' Man ']") • [Attribute=value] matches the element of a given property that is a specific value. For example: $ ("Input[name= ' Man ']"); [attribute] matches the element that contains the given property. For example: $ ("div[id]") · [Attribute^=value] matches a given property is an element that starts with some value. For example: $ ("input[name^= ' Man ']") • [Selector1] [Selector2] [Selectorn] satisfies multiple conditions at the same time. For example: $ ("input[id][name$= ' Man ')"):hidden matches all the invisible elements. For example: $ ("Tr:hidden"):visible matches all visible elements. For example: $ ("tr:visible"):checked matches all selected selected elements (Checkboxes, radio boxes, etc., excluding option in select). For example: $ ("input:checked") •:d isabled matches all the unavailable elements. For example: $ ("input:disabled"):enabled matches all available elements. For example: $ ("input:enabled"):selected matches all of the selected option elements. For example: $ ("select option:selected")3.2. jquery content Selector:contains (text) matches the element that contains the given text. For example: $ ("Div:contains (' John ')"):empty matches all empty elements that do not contain child elements or text. For example: $ ("Td:empty"):has (selector) matches the element that contains the element that the selector matches. For example: $ ("Div:has (P)"); •:p arent matches elements that contain child elements or text. For example: $ ("td:parent")3.3. jquery Hierarchy Selectorancestor descendant matches all descendant elements under a given ancestor element. For example: $ ("form input") parent > Child matches all sub-elements under the given parent element. For example: $ ("form > Input") prev + next matches all next elements immediately following the Prev element. For example: $ ("label + input") prev ~ Siblings matches all siblings elements after the Prev element. For example: $ ("form ~ input"):first-child matches the first child element. For example: $ ("ul Li:first-child"):last-child matches the last child element. For example: $ ("ul Li:last-child"):nth-child (index/even/odd/equation) matches the nth child or odd-even element under its parent element. For example: $ ("ul Li:nth-child (2)"):o Nly-child If an element is the only child element in the parent element, it will be matched. For example: $ ("ul Li:only-child")3.4.jQuery Method Selector:animated matches all elements that are performing animation effects. For example: $ ("div:animated");:eq (index) matches an element of a given index value. For example: $ ("Tr:eq (1)"):even matches all elements with an even number of index values, counting from 0. For example: $ ("Tr:even"):first matches the first element found. For example: $ ("Tr:first"):gt (index) matches all elements that are greater than the given index value, counting from 0 onwards. For example: $ ("tr:gt (0)"):last matches the last element found. For example: $ ("Tr:last"):lt (index) matches all elements that are less than the given index value. For example: $ ("Tr:lt (2)"):not (selector) removes all elements that match the given selector. For example: $ ("Input:not (: Checked)"):o DD matches all elements with an odd index value, counting from 0 onwards. For example: $ ("tr:odd") reprint: http://caibaojian.com/jquery-selectors.htmlThis article reproduced from the minute hand netwant to learn more it knowledge can Dabigatran: 272292492

Minute hand Net-daily share: The use of jquery selectors

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.