應用一：表格隔行變色

創(chuàng)新互聯(lián)建站專注于京山企業(yè)網(wǎng)站建設,自適應網(wǎng)站建設,商城網(wǎng)站建設。京山網(wǎng)站建設公司,為京山等地區(qū)提供建站服務。全流程定制網(wǎng)站設計，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務

1、普通的隔行變色：

需要用到的 API

$(':odd')    --> 匹配所有索引值為奇數(shù)的元素，從0開始計數(shù)

$(':even')   --> 匹配所有索引值為偶數(shù)的元素，從0開始計數(shù)

    
    
    



    篩選：


    
    
        
        
        
    
    
    
    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
    
下單時間
產(chǎn)品名稱
訂單金額
2013-04-26
海爾電冰箱
3688
2014-11-11
格力空調
5689
2015-01-14
美的電飯煲
452
2016-08-26
小米凈化器
2258
2016-12-12
蘋果6 plus
5688

頁面效果：

2、單選按鈕控制表格行高亮

需要用到的API

end( )        --> 回到最近的一個“破壞性”操作之前，即，將匹配的元素列表變?yōu)榍耙淮蔚臓顟B(tài)

:checked   --> 匹配所有選中的被選中元素（復選框、單選按鈕等，不包括select 中的option）

$( ':radio' )         --> 匹配所有單選按鈕

:has( selector )  --> 用于篩選選擇器

    
    
    



    篩選：


    
    
        
        
        
        
    
    
    
    
        
        
        
        
    
    
        
        
        
        
    
    
        
        
        
        
    
    
        
        
        
        
    
    
        
        
        
        
    
    
下單時間
產(chǎn)品名稱
訂單金額
2013-04-26
海爾電冰箱
3688
2014-11-11
格力空調
5689
2015-01-14
美的電飯煲
452
2016-08-26
小米凈化器
2258
2016-12-12
蘋果6 plus
5688

頁面效果：

3、復選框控制表格高亮

重點注意：三目運算在選擇器中的用法

    
    
    



    篩選：


    
    
        
        
        
        
    
    
    
    
        
        
        
        
    
    
        
        
        
        
    
    
        
        
        
        
    
    
        
        
        
        
    
    
        
        
        
        
    
    
下單時間
產(chǎn)品名稱
訂單金額
2013-04-26
海爾電冰箱
3688
2014-11-11
格力空調
5689
2015-01-14
美的電飯煲
452
2016-08-26
小米凈化器
2258
2016-12-12
蘋果6 plus
5688

效果：

應用二：表格展開/關閉

需要用到的API

toggleClass( )      --> 如果存在，就刪除一個類；如果不存在，就添加一個類

toggle([speed],[easing],[fn])  --> 如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。

1.9版本 .toggle() 方法刪除,jQuery Migrate（遷移）插件可以恢復此功能。

    
    
    



    篩選：


    
    
        
        
        
    
    
    
    大家電系列
    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
    小家電系列
    
        
        
        
    
    
        
        
        
    
    手機系列
    
        
        
        
    
    
        
        
        
    
    
下單時間
產(chǎn)品名稱
訂單金額
2013-04-26
海爾電冰箱
3688
2014-11-11
格力空調
5689
2015-01-14
美的電飯煲
452
2016-08-26
小米凈化器
2258
2016-06-26
九陽豆?jié){機
258
2016-12-12
蘋果6 plus
5688
2016-12-30
蘋果7 plus
7688

效果：

應用三：表格內容篩選

需要用到的API

:contains( text )       --> 匹配包含給定文本的元素

$.trim(str)                 --> 去掉字符串起始和結尾的空格

filter(expr|obj|ele|fn)    --> 篩選出與指定表達式匹配的元素集合

show([speed,[easing],[fn]])   --> 顯示隱藏的匹配元素，無論這個元素是通過 hide( ) 方法隱藏的還是在 CSS里設置了 display: none, 這個方法都有效

hide([speed,[easing],[fn]])     --> 隱藏顯示的匹配元素

keyup([[data],fn])    --> 當按鈕被松開時，發(fā)生 keyup 事件。它發(fā)生在當前獲得焦點的元素上

    
    
    



    篩選：


    
    
        
        
        
    
    
    
    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
    
下單時間
產(chǎn)品名稱
訂單金額
2013-04-26
海爾電冰箱
3688
2014-11-11
格力空調
5689
2015-01-14
美的電飯煲
452
2016-08-26
小米凈化器
2258
2016-12-12
蘋果6 plus
5688

效果：