jquery selector Daquan

Selectors are the most basic of jquery, the selectors listed in this article basically include all jquery selectors, perhaps you can deepen the understanding of the jquery selector through this article, they are very simple to use, I would like it to improve the performance of the individual jquery code ...

Selectors are the most basic of jquery, the selectors listed in this article basically include all jquery selectors, perhaps you can deepen the understanding of the jquery selector through this article, they are very simple to use, What I want more is that it can improve the efficiency of writing jquery code for individuals. This article introduces all jquery selectors in conjunction with code and simple generalizations, and also lists some areas that need to be noticed and differentiated.

First, the basic selector 1. ID selector (Specify ID Element)

Sets the element background color of id= "one" to black. (ID selector returned to a single element)

$ (document). Ready (function () {        $ (' #one '). CSS (' background ', ' #000 ');    });

2. Class selector (Traverse CSS class Element)

Sets the element background color of class= "Cube" to Black

$ (document). Ready (function () {        $ ('. Cube '). CSS (' background ', ' #000 ');    });

3. Element selector (traverse HTML element)

Set 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 is not part of the div's generation of child elements, the colors remain unchanged.

<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 with the class item    $ ('. Item + div '). css (' color ', ' #FF0000 ');    Equivalent code    //$ ('. Item '). Next (' div '). css (' color ', ' #FF0000 ');});

The following code, only 123 and 789 will change color

<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 the div-sibling elements after class inside (    '. Inside ~ 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>

Third, filter selector 1. Basic Filter Selector

--1.1 : First and :last (whichever element or final element is taken)

$ (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, be aware of the following code:

<div>    G1    <div class= "Wrap" >G2</div></div>

G1 and G2 change color when G1 div and G2 div are parent-child relationships.

--1.3 : Even and : Odd(with 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)( elements 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

2. Content Filter Selector
--2.1 : Contains (text)(takes the element containing text)
$ (document). Ready (The function () {            //DD element contains "jquery" text that will change color            $ (' Dd:contains ("" jquery "). CSS (' color ', ' #FF0000 ') );        });
The following code, the first DD will change color
<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 elements that do not contain child elements or empty text)
$ (document). Ready (function () {            $ (' dd:empty '). HTML (' no content ');});
The third DD above will show "no content" text
--2.3 : Has (selector) ( takes selector matching element)
$ (document). Ready (function () {            //) Add a border            $ (' Div:has (span) ') to the div that contains the span element. CSS (' border ', ' 1px solid #000 ');        });
Even if span is not a direct sub-element of a DIV, it will take effect
<div>    
--2.4 :p arent(takes elements that contain child elements or text)
$ (document). Ready (function () {            $ (' ol li:parent '). CSS (' border ', ' 1px solid #000 ');        });
The following code, where a and D are located, have a border
<ol>    <li></li>    <li>A</li>    <li></li>    <li>d</ Li></ol>
3. Visibility Filter Selector
--3.1 : Hidden(take invisible elements)
jquery to 1.3.2: The hidden selector matches only the elements of Display:none or <input type= "hidden", not the/> or visibility:hidden elements. 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 pops up the "Hello" dialog box, and then Hid-1 will show that hid-2 is still not visible.
--3.2 :visible (see Element)
The following code, the last div will have a background color
<script type= "Text/javascript" >    $ (document). Ready (function () {        $ (' div:visible '). CSS (' background ', ' #EEADBB ');    }); </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. Attribute Filter Selector
--4.1 [attribute](takes the element that owns the attribute property)
The following code, the last a tag does not have a title property, so it will still be underlined
<script type= "Text/javascript" > $ (document). Ready (function () {$ (' a[title] '). css       (' text-decoration ', ' 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] (takes an element with a attribute attribute value equal to or not equal to value)
Specify text color for a-label class= "Item" and Class!=item, respectively
jquery selector Daquan