IT education: jquery selector usage, jquery Selector

IT education: jquery selector usage, jquery Selector
JQuery selectors are a major feature of the jQuery library. They not only save tedious JavaScript writing methods, but also save time and efficiency, this makes it easier for us to operate JavaScript dom. 1. Basic selector # id matches 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 class. For example, $ (". style1"); * matches all elements. For example, $ ("*") · selector1, selector2, selectorN combines the elements matched by each selector and returns them together. 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 fields. For example, $ (": file") ·: hidden matches all invisible elements, or elements whose type is 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") ·: password Matches all password boxes. For example, $ (": password") ·: radio matches all radio buttons. For example, $ (": radio") ·: reset matches all reset buttons. For example, $ (": reset") ·: submit matches all the submit buttons. For example, $ (": submit") ·: text matches all single-row text boxes. For example, $ (": text") ·: header matches title elements such as h1, h2, and h3. For example: $ (": header" ).css ("background", "# EEE"); 3. filter condition selector 3.1. jQuery attribute selector [attribute * = value] matches a given attribute with elements that contain certain values. Example: $ ("input [name * = 'man'") · [attribute! = Value] matches all elements that contain the specified attribute but are not equal to the specified value. Example: $ (input [name! = 'Man '); · [attribute $ = value] matches an element whose given attribute ends with some values. For example, $ ("input [name $ = 'man']") · [attribute = value] matches a given attribute as an element of a specific value. For example: $ ("input [name = 'man']"); · [attribute] matches the element containing the given attribute. For example, $ ("div [id]") · [attribute ^ = value] matches the given attribute with elements starting with some values. For example, $ ("input [name ^ = 'man']") · [selector1] [selector2] [selectorN] meets multiple conditions at the same time. For example: $ ("input [id] [name $ = 'man']") ·: hidden matches all invisible elements. For example, $ ("tr: hidden") ·: visible matches all visible elements. For example: $ ("tr: visible") ·: checked matches all selected elements (check box, single-choice, etc., excluding option in select ). For example, $ ("input: checked") ·: disabled matches all unavailable elements. For example, $ ("input: disabled") ·: enabled matches all available elements. For example, $ ("input: enabled") ·: selected matches all selected option elements. For example, $ ("select option: selected") 3.2. jQuery content selector ·: contains (text) matches the elements that contain 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 containing the element matched by the selector. For example: $ ("div: has (p)"); ·: parent matches the elements that contain child elements or text. For example: $ ("td: parent") 3.3. jQuery hierarchical selector-ancestor descendant matches all descendant elements under a given ancestor element. For example, $ ("form input") · parent> child matches all child elements under a given parent element. For example, $ ("form> input") · prev + next matches all the next elements following the prev element. Example: $ ("label + input") · prev ~ The siblings matches all the siblings elements after the prev element. 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 parity element under its parent element. For example: $ ("ul li: nth-child (2)") ·: only-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 in the animation being executed. 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 index value and starts counting from 0. For example, $ ("tr: even") ·: first matches the first element found. For example, $ ("tr: first") ·: gt (index) matches all elements greater than the given index value and starts counting from 0. For example: $ ("tr: gt (0)") ·: last element found by last match. For example, $ ("tr: last") ·: lt (index) matches all elements smaller 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)") ·: odd matches all elements with an odd index value and starts counting from 0. For example: $ ("tr: odd") reprinted: http://caibaojian.com/jquery-selectors.html This article is reproduced from the needle distribution network