学步园

1：选择器一般前面是$(something),$()内部会自动使用loop寻找参数指定的元素

Selector type　　   CSS　　　　　　   jQuery　　　        　     What it does

  Tag name　　　　   p{}　　　　　    　$('p')　　　　       selects all 'p' in the document

　 　ID　　　    #some-id {}　　   $('#some-id')　　       selects the single element in the document that has as ID of some-id

  　Class　    .some-class {}　 $('.some-class')　       selects all elements in the document that have a class of some-class

2:CSS selectors:

$('#some-ID')

$('.some-Class')

$('selected-plays > li').addClass('horizontal')

$('#selected-plays li:not(.horizontal)').addClass('sub-level')

3：Attribute selector:

$('img[alt]') 

$('a[href^="mailto"]').addClass('mailto')

$('a[href$=".pdf"]').addClass('pdflink')

$('a[href^="http"] [href*="henry"]')

4：Custom selector: high draw call

• eq， nthchild， first-chile， contains

$('div.horizontal:eq(1)') 

//这个是JS选择器，所以select the second item from a set of <div> elements with class of horizontal 
//JS selector is zero-based, CSS selector is one-based
$('div:nth-child(1)')
//这个是css选择器，所以Select all div selectors that are the first child of their parent
$('div:first-child')
//可以用JS选择器代替

$('td:contains(Henry)').addClass('highlight');
//contains() selector 是case sensitive

• odd & even:

 <h2>Shakespeare's Plays</h2>
            <table>
                <tr>
                    <td>As You Like It</td>
                    <td>Comedy</td>
                    <td> </td>
                </tr>
                <tr>
                    <td>All's Well that Ends Well</td>
                    <td>Comedy</td>
                    <td>1601</td>
                </tr>
                <tr>
                    <td>Hamlet</td>
                    <td>Tragedy</td>
                    <td>1604</td>
                </tr>
                <tr>
                    <td>Macbeth</td>
                    <td>Tragedy</td>
                    <td>1606</td>
                </tr>
                <tr>
                    <td>Romeo and Juliet</td>
                    <td>Tragedy</td>
                    <td>1595</td>
                </tr>
                <tr>
                    <td>Henry IV, Part I</td>
                    <td>History</td>
                    <td>1596</td>
                </tr>
                <tr>
                    <td>Henry V</td>
                    <td>History</td>
                    <td>1599</td>
                </tr>
            </table>
            <h2>Shakespeare's Sonnets</h2>
            <table>
                <tr>
                    <td>The Fair Youth</td>
                    <td>1–126</td>
                </tr>
                <tr>
                    <td>The Dark Lady</td>
                    <td>127–152</td>
                </tr>
                <tr>
                    <td>The Rival Poet</td>
                    <td>78–86</td>
                </tr>
            </table>

$('tr:even').addClass('alt');

 

$('tr:even')一般用于table，按基偶格来选择，注意JS是zero-base的，所以选择器写even（偶数），实际上选择了table的基数行，因为第一行在JS中是0，第二行实际是1。

发现上面的tr选择在第二段（Shakespeare）不对，所有的行都按照一个顺序下来，这里用tr:nth-child(odd)来代替，记得nth-child是CSS选择器，这里要换成odd

 6：Form selector:

当对form进行选择的时候JQuery提供给我们更直接的选择器

Selector　　　　　　Match

:input　　　　　　Input, textarea, select

:button　　　　　Button elements and input elements with type attribute equal to button

:enabled　　　　Form elemnts that are enabled

:disabled　　　　Form elemnts that are disabled

:checked　　　　Radio buttons or checkboxed that are checked

:selected　　　　Option elements that are selected

 

$('input[type="radio"] ： checked')
//select all checked radio buttons but not checkboxes
$('input[type="password"], input[type="text"] : disabled')
//select all password input and disabled text input

  7：DOM traversal methords:

• .filter()

$('tr').filter(':even').addClass('alt');

$('a').filter(function(){
  return this.hostname && this.hostname != location.hostname;
}).addClass('external');
//filter the a tag
//must have href attribute with a domain name(this.hostname)
//the domain name that they link to must not match the domian name of the current page(location.hostname)

• .next(), .nextAll(), .prev(), .prevAll()

$('td:contains(Henry)').next().next().addClass('highlight');//后面的后面

$('td:contains(Henry)').nextAll().addClass('highlight');　　//全部Herny后面的cell

$('td:contains(Henry)').next().addClass('highlight');//only very next sibling

• .siblings()

select all other elments at same DOM level, regardless of whether they come before or after the previously elected element

选中同一排cell的方法

$('td:contains(Henry)').nextAll().andSelf().addClass('highlight');
//select all nextAll of Herny tag and itself
//mean all the row

$('td:contain(Henry)').parent().children().addClass('highlight');
//select every cell in each row where at least one of the cells contains Henry