jquery selector Daquan

First, the basic selector 1. The ID selector (the specified ID element) sets the element background color of id= "one" to black.    (ID selector returns a single element) $ (document). Ready (function () {$ (' #one '). CSS (' background ', ' #000 '); }); 2.    The class selector (traversing the CSS class element) sets the element background color of class= "cube" to Black $ (document). Ready (function () {$ ('. Cube '). CSS (' background ', ' #000 '); }); 3.    The element selector (traversing the HTML element) sets the text size of the P element to 12px$ (document). Ready (function () {$ (' P '). css (' font-size ', ' 12px '); }); 4.     * Selector (Traverse all elements) $ (document). Ready (function () {//walk through all the elements under the form and set the font color to Red $ (' form * '). CSS (' color ', ' #FF0000 '); }); 5.  Parallel selector $ (document). Ready (function () {//) set the margin of P element and DIV element to 0 $ (' P, div '). css (' margin ', ' 0 '); }); second, level selector 1. Parent > child (direct Element) $ (document). Ready (function () {//Select the first-generation span element under the DIV and set the font color to Red $ (' div > span '). CSS (' Color '  , ' #FF0000 '); }); The following code, only the first span will change color, the second span does not belong to the div's generation of child elements, the color remains the same. <div> <span>123</span> <p> <span>456</span> </p></div>2. Prev + next (next sibling element, equivalent to Next () method) $ (document). Ready (function () { Select the next div sibling element for item $ ('. Item + div '). css (' color ', ' #FF0000 '); Equivalent code//$ ('. Item '). Next (' div '). css (' color ', ' #FF0000 ');}); The following code, only 123 and 789 will discolor <p class= "Item" ></p><div>123</div><div>456</div><span Class= "Item" ></span><div>789</div>3. Prev ~ siblings (all sibling elements of the Prev element, equivalent to the Nextall () method) $ (document). Ready (function () {//Select all div sibling elements after class is inside $ ('. Insid    E ~ div '). css (' color ', ' #FF0000 '); Equivalent code//$ ('. Inside '). Nextall (' div '). css (' color ', ' #FF0000 ');}); The following code, G2 and G4 will change color <div class= "Inside" >G1</div><div>G2</div><span>G3</span>< Div>g4</div> three, filter selector 1. Basic Filter Selector--1.1:first and: Last (take first element or final element) $ (document). Ready (function () {$ (' Span:first '). CSS (' color ', ' #FF0000 ')            ;        $ (' Span:last '). CSS (' color ', ' #FF0000 '); }); The following code, G1 (first element) and G3 (last element) will change color <span>g1</span><span>g2</span><span>g3</ Span>--1.2:not (take non-Element) $ (document). ReaDY (function () {$ (' div:not (. Wrap) '). CSS (' color ', ' #FF0000 '); }); The following code, G1 will change color <div>g1</div><div class= "Wrap" >G2</div> However, please note the following code:<div> G1 <div class= "Wrap" >G2</div></div> G1 and G2 will change color when G1 div and G2 div are parent-child relationships. --1.3:even and: Odd (take even or odd indexed elements, index starting at 0, even for even, odd for odd numbers)

$ (document). Ready (function () {            $ (' Tr:even '). CSS (' background ', ' #EEE ');//even Line Color            $ (' tr:odd '). CSS (' Background ', ' #DADADA '); Odd row Color        }); A, c row Color #eee (the first row index is 0), B, D row Color #dadada

<table width= "cellpadding=" 0 "cellspacing=" 0 ">    <tbody>        <tr><td>A</td> </tr>        <tr><td>B</td></tr>        <tr><td>C</td></tr>        <tr><td>D</td></tr>    </tbody></table>--1.4:eq (x) (takes the element of the specified index)

$ (document). Ready (function () {            $ (' Tr:eq (2) '). CSS (' background ', ' #FF0000 ');        }); Change the background color of the third row, in the above code, the background of C will discolor. --1.5:GT (x) and: LT (x) (takes an element greater than x index or less than x index) $ (document). Ready (function () {            $ (' ul li:gt (2) '). CSS (' color ', ' #FF0000 ');            $ (' ul li:lt (2) '). CSS (' color ', ' #0000FF ');        }); L4 and L5 will be red, L1 and L2 will be blue, L3 is the default color

<ul>    <li>L1</li>    <li>L2</li>    <li>L3</li>    <li> L4</li>    <li>l5</li></ul>--1.6:header (take H1~h6 title Element) $ (document). Ready (function () {            $ (': Header '). css (' background ', ' #EFEFEF ');        }); In the following code, the background color of H1~H6 will change

<dl>    <dt> Technology </dt>    <dd>jquery,. NET, clr</dd>    <dt>seo</dt >    <dd> keyword ranking </dd>    <dt> other </dt>    <dd></dd></dl>--2.2: Empty (takes an element that contains no child elements or text that is empty) $ (document). Ready (function () {            $ (' dd:empty '). HTML (' no content ');});
The third DD above displays the "no content" text--2.3:has (selector) (the element to which the selector matches) $ (document). Ready (function () {            //) Add a border for the div containing the span element            $ (' Div:has (span) '). CSS (' border ', ' 1px solid #000 ');        }); Even if span is not a direct sub-element of a DIV, it will take effect
<div>    
<ol>    <li></li>    <li>A</li>    <li></li>    <li>d </li></ol>3. Visibility Filter Selector--3.1:hidden (take invisible Element) after jquery to 1.3.2: The hidden selector matches only the elements of Display:none or <input type= "hidden"/>, And does not match elements of Visibility:hidden or opacity:0. This also means that hidden matches only those elements that are "hidden" and do not occupy space, and elements like Visibility:hidden or opactity:0 occupy space and are excluded. Reference: Http://www.jquerysdk.com/api/hidden-selector The following code, the first pop-up "Hello" dialog box, and then Hid-1 will show that hid-2 is still not visible.
 
 <script type= "Text/javascript" > $ (document). Ready (function () {$ (' div:visible '). CSS (' background ', ' #E    EADBB '); }); </script><div class= "hid-1" >display:none</div><div class= "Hid-2" >visibility:hidden </div><input type= "hidden" value= "Hello"/><div> jquery selector Daquan </div>4. The property filter selector--4.1 [attribute] (takes the element that owns the attribute attribute), and the last a tag does not have the title property, so it will still be underlined 
 <script type= "Text/javascript" > $ (document). Ready (function () {$ (' a[title] '). CSS (' Text-decora       tion ', ' none ');    }); </script> <ul> <li><a href= "#" title= "Dom object and jquery Object" class= "item" >dom object and jquery Object </a></li> <li><a href= "#" title= "jquery selector Daquan" class= "item-selected" >jquery selector Daquan </a>& Lt;/li> <li><a href= "#" title= "jquery events Daquan" class= "item" >jquery events Daquan </a></li> <l I><a href= "#" title= "jquery-based plug-in development" class= "item" > jquery-based plug-in development </a></li> <li><a href= " # "title=" Wordpress & JQuery "class=" Item ">wordpress & jquery</a></li> <li><a href= "#" class= "item" > Other </a></li> </ul>--4.2 [attribute = value] and [attribute! = value] (Take an element with the attribute attribute value equal to value or not equal to value) to specify the text color for the A-label of class= "item" and Class!=item, respectively 
 <script type= "Text/javascript" > $ (document). Ready (function () {$ (' a[class=item] '). CSS (' Color ',           ' #FF99CC ');       $ (' a[class!=item] '). CSS (' color ', ' #FF6600 '); }); </script>--4.3 [attribute ^= value], [attribute $= value] and [attribute *= value] (attribute attribute value begins with value, ends with value, or contain value) in the property selector, the ^$ symbol and the start end symbol of the regular expression represent the same meaning, * fuzzy matching, similar to the like '%str% ' in SQL. 
<script type= "Text/javascript" >//Identify case, input string can be entered in quotation marks, [title^=jquery] and [title^= "JQuery"] is the same $ (' a[title^=    JQuery]. css (' font-weight ', ' bold ');    $ (' a[title$=jquery] '). CSS (' font-size ', ' 24px '); $ (' a[title*=jquery] '). CSS (' text-decoration ', ' Line-through '); </script>--4.4 [Selector1][selector2] (Composite attribute filter, which satisfies multiple conditions) will title start with "jquery", and class= "item" A tag is hidden, then <a href= "#" title= "JQuery event Daquan" class= "Item" > jquery Event Encyclopedia </a> will be hidden <script type= "Text/javascript" > $ (document). Ready (function () {$ (' a[title^        =jquery][class=item] '). Hide ();    }); </script>5. The child element filter selector--5.1:first-child and: Last-child:first-child represents the first child element: Last-child represents the last child element. It is important to note that: Fisrst and: Last return is a single element, and: First-child and: Last-child returns a collection element. For example: Div:first returns the first DIV element in the entire DOM document, while Div:first-child returns the merged collection of the first element under all DIV elements. Here's a question: If an element has no child elements: First-child and: Last-child returns null? Take a look at the following code: 
--5.2:only-child When an element has and only one child element, the only-child takes effect. 
--5.3:nth-child See this is remembered in English words, fourth, fifth, Sixth......,nth represents nth,: Nth-child represents the nth child element. Note that the n here is not like EQ (x), GT (x) or LT (x) is starting from 0, it is starting from 1, there seems to be no zeroth such an ordinal word in English. : Nth-child There are three ways to use: 1): Nth-child (x), get the X child element 2): Nth-child (even) and: Nth-child (odd), starting with 1, get the number of elements or odd elements 3): Nth-child (xn +y), x>=0,y>=0. For example, x = 3, y = 0 o'clock is 3n, which means take the first 3n element (n>=0). In fact, the xn+y is the above two kinds of the general formula. (when x=0,y>=0, equivalent to: Hth-child (x), when x=2,y=0, equal to Nth-child (even), when X=2,y=1, equivalent to: Nth-child (odd)), the following two examples are for 2) and 3), 1) I will not enumerate the examples. Example 2: 
 <script type= "Text/javascript" > $ (document). Ready (function () {$ (' Tr:nth-child (3n) '). CSS (' background ')    , ' #0000FF '); }); </script>6. Form Object Properties Filter selector--6.1:enabled and: Disabled (take available or unavailable elements): The matching range of enabled and: diabled includes input, select, textarea. 
 <script type= "Text/javascript" > $ (document). Ready (function () {$ (': Enabled '). CSS (' border ', ' 1            px solid #FF0000 ');        $ (':d isabled '). CSS (' border ', ' 1px solid #0000FF ');    }); </script> <div> <input type= "text" value= "available textbox"/> </div> <div> < Input type= "text" disabled= "Disabled" value= "Unavailable text box"/> </div> <div> <textarea disabled= "            Disabled "> Unavailable text fields </textarea> </div> <div> <select disabled=" Disabled "> <option>English</option> <option> Simplified Chinese </option> </select> </div>-- 6.2:checked (check box or checkbox element) the following code, changing the border or background color only works under IE, Chrome and Firefox will not change, but alert will pop out. 
 <script type= "Text/javascript" > $ (document). Ready (function () {$ (': Checked '). CSS (' background ', ' #FF00        (). each (function () {alert (.). Val ());    }); });</script><div> <input type= "checkbox" checked= "checked" value= "must"/> must be checked </div><div > You are now working in the enterprise belongs to: <input type= "Radio" name= "Radio" checked= "Checked" value= "foreign enterprise"/> Foreign company <input type= "Radio" name= "Radio" value= "state-owned enterprises"/> State-owned enterprises <input type= "Radio" name= "Radio" value= "private enterprises"/> Private Enterprises </div>--6.3: Selected (removes the selected element from the Pull list) 
 <script type= "Text/javascript" > $ (document). Ready (function () {Alert ($ (': Selected '). Val ()); });</script><select> <option value= "foreign enterprises" > Foreign companies </option> <option value= "SOEs" > SOEs </option > <option value= "Private Enterprise" > Private enterprise </option></select> Four, form selector 1. : Input (takes the Input,textarea,select,button element): The input element is no longer spoken here, and some of the previous examples have been included. 2.: text (take single line text box element) and: Password (take password box element) These two selectors are equivalent to the attribute selector $ (' input[type=text] '), $ (' Input[type=password] ') respectively. 
<script type= "Text/javascript" > $ (document). Ready (function () {$ (': Text '). CSS (' border ', ' 1px solid #FF0000 '        );        $ (':p assword '). CSS (' border ', ' 1px solid #0000FF ');        Equivalent code//$ (' Input[type=text] '). CSS (' border ', ' 1px solid #FF0000 ');   $ (' Input[type=password] '). CSS (' border ', ' 1px solid #0000FF '); }); </script><fieldset style= "width:300px;"     > <legend> Account Login </legend> <div> <label> user name: </label><input type= "text"/> </div> <div> <label> Password: </label><input type= "password"/> </div></ Fieldset>3. : Radio (take single MARQUEE Element): Radio Selector and property selector $ (' input[type=radio] ') equals <script type= "Text/javascript" > $ (document). Ready (        Function () {$ (': Radio '). each (function () {alert ((). Val ());        });        Equivalent code *//$ (' input[type=radio] '). each (function () {alert ((). Val ());        }); */}); </script> The enterprise you are working for is: <input type= "Radio" name= "Radio" checked= "Checked" value= "foreign enterprise"/> Foreign company <input type= "Radio" name= " Radio "Value=" state-owned Enterprises/> State-owned enterprises <input type= "Radio" name= "Radio" value= "private enterprises"/> Private enterprises 4. : CheckBox (Take check box Element): CheckBox Selector and Property selector $ (' input[type=checkbox] ') equals <script type= "Text/javascript" > $ (document).        Ready (function () {$ (': CheckBox '). each (function () {alert ((). Val ());        });        Equivalent code *//$ (' input[type=checkbox] '). each (function () {alert ((). Val ());        });  */});</script> your interests: <input type= "checkbox"/> Swimming <input type= "checkbox"/> Reading <input type= "checkbox" checked= "Checked" value= "play basketball"/> Play basketball <input type= "checkbox" checked= "Checked" value= "computer game"/> The code above the computer game will output the value of all the checkboxes. If you want to select the selected item, there are three ways to do it: $ (': checkbox:checked '). each (function () {alert (*). Val ());}); $ (' input[type=checkbox][checked] '). each (function () {alert (.). Val ());}); $ (': checked'). each (function () {Alert ($ (this). Val ());}); 5.: Submit (Take the submit button Element): The submit selector and the property selector $ (' input[type=submit] ') equals 6. : Reset (take reset button Element): Reset Selector and Property selector $ (' input[type=reset] ') equals 7. : button (take buttons Element): Button Selector and property selector $ (' Input[type=button] ') equals 8. : File (take upload domain Element): File selector and Property selector $ (' input[type=file] ') equals 9. : Hidden (take invisible Element): Hidden selector and Property selector $ (' input[type=hidden] ') equals
jquery selector Daquan