jquery-Picker Sorting

First, the basic selector

1) ID Selector

2) Tag Selector

3) class Selector

4) Wildcard Selector

Second, level selector

1) contains selectors

2) sub-selector

3) adjacent selector

4) Brother selector

Third, simple pseudo-class selector

1) Specific position selector

2) Specify range selector

3) exclude selectors

Iv. Content-related pseudo-class selectors

1) match contains text selector

2) match contains element selector

3) match contains judgment selector

4) Parsing content filtering implementation principle

V. Pseudo-Class selectors related to element display states

Vi. pseudo-class selectors that match child elements

Vii. pseudo-class selectors related to form objects

-------------------------------------------------------------------------------------------

I. Basic selector 1, ID selector, Syntax: JQuery ("#id")

<script src= "Jquery/jquery-1.6.4.js" type= "Text/javascript" ></script><script type= "Text/javascript "> $ (function () {   $ (" #div1 "). CSS (" Background "," Red ");}) </script><title> on-Machine practice </title>


2. Tag Selector, syntax: JQuery ("element") Note: no additional prefixes (#) required
<script src= "Jquery/jquery-1.6.4.js" type= "Text/javascript" ></script><script type= "Text/javascript "> $ (function () {   $ (" div "). CSS (" Color "," red ");}) </script><title> Untitled Documents </title>


3. Class selector, Syntax: JQuery (". ClassName") ClassName is a string that represents the class attribute value of the label, the prefix symbol "." Indicates that the selector is a class selector. The return value is a jquery object that contains a matching classname element.
<script src= "Jquery/jquery-1.6.4.js" type= "Text/javascript" ></script><script type= "Text/javascript "> $ (function () {   $ (". Red "). CSS (" Color "," red ");}) </script><title> Untitled document </title>
4. Wildcard selector, Syntax: JQuery ("*") parameter "*" is a string that will match all label elements in the specified range.
<script src= "Jquery/jquery-1.6.4.js" type= "Text/javascript" ></script><script type= "Text/javascript "> $ (function () {   $ (" Body * "). CSS (" Color "," red ");}) </script><title> Untitled Document </title>


Second, level selector 1, contains selectors, syntax: JQuery ("ancestor descendant") where ancestor represents the containing selector, descendant represents the containing selector. jquery is able to filter out all the containing elements that match the ancestor selector in the elements that match the ancestor selector. eg
<script src= "Jquery/jquery-1.6.4.js" type= "Text/javascript" ></script><script type= "Text/javascript "> $ (function () {  $ (" form input "). CSS ({" Border ":" Solid 1px red "," background ":" Blue "}) </script><title> Untitled Documents </title>

2, sub-selector, Syntax: JQuery ("Parent>child") where the parent represents the parents selector, child represents the contained sub-selector, ">" is the identifier of the child selector. jquery can filter out all child elements that match the children selector in the element that the parent selector matches. eg
<script src= "Jquery/jquery-1.6.4.js" type= "Text/javascript" ></script><script type= "Text/javascript "> $ (function () {  $ (" div > img "). CSS (" border "," solid 5px Red ");}) </script><title> Untitled document </title>

3. Adjacent selector, Syntax: JQuery ("Prev+next") where Prev represents the adjacent previous selector, next represents the adjacent last selector, and "+" is the identifier of the adjacent selector. jquery can filter out all adjacent sibling elements that match the next selector after the prev selector matches the element. eg
<script src= "Jquery/jquery-1.6.4.js" type= "Text/javascript" ></script><script type= "Text/javascript "> $ (function () {  $ (" div + img "). CSS (" border "," solid 5px Red ");}) </script><title> Untitled document </title>

4, Brother selector, Syntax: JQuery ("Pre ~ siblings") where Prev represents the adjacent previous selector, siblings represents the adjacent sibling selector, "~" is the identifier of the sibling selector. jquery can filter out all sibling elements that match the siblings selector after the Prev selector matches the element/eg:
<script src= "Jquery/jquery-1.6.4.js" type= "Text/javascript" ></script><script type= "Text/javascript "> $ (function () {  $ (" div ~ img "). CSS (" border "," solid 5px Red ");}) </script><title> Untitled document </title>

5. Comprehensive application of hierarchical selector
Simple pseudo-class selectors simple pseudo-class selectors are also known as positioning filters, because they filter the elements in a particular location based on number and rank, or filter out specific elements 1, the specific position selector mainly includes  :first,: Last and: QE (index) 3 kinds. : First is able to select the 1th element in the matching set, instead: Last can select the final element in the matching set, and: EQ (index) determines the element at the specified position based on the index value. The specific user is as follows: JQuery ("Selector:first")  jquery ("Selector:last")  jquery ("Selector:eq (Index)"), index starting from 0 counts eg:
<script src= "Jquery/jquery-1.6.4.js" type= "Text/javascript" ></script><script type= "Text/javascript "> $ (function () {  $ (" Tr:first "). CSS ({" Background ":" Blue "," Color ":" White "});  $ ("TR:QE (1)"). CSS ("Background", "#F1F5FB");  $ ("Tr:last"). CSS ("Background", "#ff9"); }) </script><title> Untitled document </title>

2, the designated range selector mainly includes: even,: Odd,: GT (Index) and: LT (index) Four kinds: Even select all even line elements in the matching collection: Select all the odd line elements in the odd match collection: GT (Index) Select an element in the matching collection that is greater than the given index value: the LT (index) match collection selects an element that is less than the given index value eg:
<script src= "Jquery/jquery-1.6.4.js" type= "Text/javascript" ></script><script type= "Text/javascript  "> $ (Function () {$ (" Tr:even "). CSS (" Background "," #F1F5FB ");  $ ("tr:odd"). CSS ("Background", "#ff9"); $ ("Tr:first"). CSS ({"Background": "Blue", "Color": "White"}); }) </script><title> Untitled document </title>
3. Exclude selector Syntax: JQuery ("Selector1:not (Selector2)"), Parameters Selector1, Selector2, and not as strings, where Selector1 and selector2 represent arbitrary forms of selectors, ": "is the identifier for the pseudo-class selector, and not for the Exclude function identifier. eg
<script src= "Jquery/jquery-1.6.4.js" type= "Text/javascript" ></script><script type= "Text/javascript  "> $ (Function () {$ (" Tr:even "). CSS (" Background "," #F1F5FB ");  $ ("tr:odd"). CSS ("Background", "#ff9");  $ ("Tr:first"). CSS ({"Background": "Blue", "Color": "White"}); $ ("Tr:not (TR:LT (3))"). CSS ({"Background": "White", "Color": "Black"}); }) </script><title> Untitled document </title>
Iv. Content-related pseudo-class selectors: contains-〉 matches the element that contains the given text. For example, $ ("Div:contains (' picture ')") matches all DIV elements that contain "picture": Empty-〉 matches all null elements that do not contain child elements or text. : Has-〉 matches the element that contains the element that the selector matches. For example. $ ("Div:has (P)") matches all DIV element 1 containing the P element, matching contains text selector syntax: JQuery ("Selector:contains (text)")
<script src= "Jquery/jquery-1.6.4.js" type= "Text/javascript" ></script><script type= "Text/javascript "> $ (  function () {    $ (" dd:contains (' Jobs ') "). CSS (" text-decoration "," underline ");  }) </script><title> Untitled document </title>

2. Match contains element selector syntax: jquery ("Selector1:has (Selector2)"), 3, match contains the judgment selector syntax: jquery ("Selector:empty"); JQuery ("Selector:parent");: Empty matches elements that contain blank content: elements in the parent matching element that contain non-empty content 4, parsing content filtering implementation principle
V. Pseudo-Class selectors related to element display states: Hidden matches all invisible elements, or elements of type hidden: visible matches all visible elements
VI. Pseudo-class selector matching child elements: Nth-child matches the nth child or odd-even element under its parent element: First-child matches the first child element. : First matches only one element, whereas: The First-child selector matches one child element for each parent element: Last-child matches the last child element. : Last matches only one element, whereas: The Last-child selector will match a child element for each parent element: Only-child 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
Vii. pseudo-class selectors related to form objects: input matches all input, textarea,select, and button elements: text matches so the single-line text box: Password matches all password boxes: Radio matches all radio boxes: checkbox matches All check boxes: Submit matches all submit buttons: Image matches all image fields: Reset matches all reset buttons: Button matches all buttons: File matches All files: Hidden matches all invisible elements