效果：

2、滾動(dòng)條高度變化

有一些網(wǎng)站的評(píng)論框上面有“+”和“-”按鈕，它們的功能就是用來(lái)控制評(píng)論框的高度。例如單擊“-”按鈕，評(píng)論框的高度將會(huì)縮小。

需要用到的 API

scrollTop( [val] )--> 獲取匹配元素相對(duì)滾動(dòng)條頂部的偏移，此方法對(duì)可見(jiàn)和隱藏元素都有效

    
    
    



    
        
            向上
            向下
        
        
            
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus fuga quae soluta vel. Ab accusamus blanditiis dolorum ea eaque libero mollitia numquam officia veniam. Assumenda distinctio molestias necessitatibus sed. Eius.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi cum error esse tempora vel! Accusantium aliquid eveniet impedit nisi numquam odit possimus provident quas reprehenderit ut? Doloremque praesentium quisquam voluptatum!
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto aut corporis cupiditate dicta ducimus facere, fugiat, fugit impedit inventore maxime, mollitia nesciunt pariatur praesentium quaerat quidem ratione repudiandae voluptas.
            
        
    

效果：

應(yīng)用三：復(fù)選框應(yīng)用 

1、用按鈕控制 全選/反選/取消全選

需要用到的 API

[attribute = value]   --> 匹配給定的屬性是某個(gè)特定值的元素

    
    
    



    
你喜歡的運(yùn)動(dòng)是：
    
         足球
    
    
         籃球
    
    
         羽毛球
    
    
         乒乓球
    
    
        
        
        
        
    

效果：

2、用復(fù)選框控制 全選/取消全選

需要用到的 API

[attribute = value]   --> 匹配給定的屬性是某個(gè)特定值的元素

    
    
    



    
你喜歡的運(yùn)動(dòng)是：
        
             全選/取消全選
        
    
    
         足球
    
    
         籃球
    
    
         羽毛球
    
    
         乒乓球
    
    
        
    

效果：

仔細(xì)觀察一下，其實(shí)上面的操作是有 bug的，當(dāng)選中控制全選的復(fù)選框，選項(xiàng)組里面只有部分選中時(shí)，這個(gè)還是全選嗎？顯然不是，我們期望只有部分選項(xiàng)組選中時(shí)，去掉全選框的鉤子。如下圖

所以還需要一段代碼來(lái)對(duì)復(fù)選框組進(jìn)行操作，以通過(guò)它們來(lái)控制 id 為“checkAll”的復(fù)選框，思路如下：

（1）、對(duì)復(fù)選框組綁定單擊事件

（2）、定義一個(gè) flag 變量，默認(rèn)為 true

（3）、循環(huán)復(fù)選框組，當(dāng)有沒(méi)被選中的選項(xiàng)時(shí)，則把變量 flag 的值設(shè)置為 false

（4）、根據(jù)變量 flag 的值來(lái)設(shè)置 id 為“checkAll”復(fù)選框是否選中

   >、如果 flag 為 true，說(shuō)明復(fù)選框組都被選中

   >、如果 flag 為 false，說(shuō)明復(fù)選框組至少有一個(gè)沒(méi)有被選中

$('[name=items]:checkbox').click(function(){ //給復(fù)選框組點(diǎn)擊單擊事件
    var flag = true;
    $(this).each(function(){  //遍歷每一個(gè)復(fù)選框按鈕
        if(!this.checked){ //如果當(dāng)前復(fù)選框按鈕的checked屬性為false，也就是沒(méi)有被選中
            flag = false;
        }
    });
    $('#checkAll').attr('checked', flag); //只要有一個(gè)復(fù)選框沒(méi)有被選中，就把 #checked 變?yōu)閒alse
});

除了上述思路以外，還可以用下面的方法：

（1）、對(duì)復(fù)選框組綁定單擊事件

（2）、判斷復(fù)選框的總數(shù)是否與選中的復(fù)選框數(shù)量相等

（3）、如果相等，則說(shuō)明全部選中了，id 為“checkAll”復(fù)選框應(yīng)當(dāng)處于選中狀態(tài)，否則處于不選中

$('[name=items]:checkbox').click(function(){
    //$(this) 復(fù)選框組
    //$(this).length   復(fù)選框的個(gè)數(shù)
    //$(this).filter(':checked')  被選中的復(fù)選框
    $('#checkAll').attr('checked', $(this).length==$(this).filter(':checked').length);
});

效果：

應(yīng)用四：下拉框應(yīng)用 

需要用到的 API

$(A).append(B)   --> 把A追加到B中

dblclick([[data],fn])  --> 當(dāng)雙擊元素時(shí)，會(huì)發(fā)生 dblclick 事件

如上圖，需要實(shí)現(xiàn)的功能如下：

（1）、將選中的選項(xiàng)添加給對(duì)方

（2）、將全部選項(xiàng)添加給對(duì)方

（3）、雙擊某個(gè)選項(xiàng)將其添加給對(duì)方

    
    
    



    
        選項(xiàng)1
        選項(xiàng)2
        選項(xiàng)3
        選項(xiàng)4
        選項(xiàng)5
        選項(xiàng)6
        選項(xiàng)7
    
    

        選中添加到右邊>>
        全部添加到右邊>>
    



    
        選項(xiàng)8
    
    

        <<選中刪除到左邊
        <<全部刪除到左邊
    

效果：

應(yīng)用五：表單驗(yàn)證

需要用到的 API

trigger(type,[data])   --> 在每一個(gè)匹配的元素上觸發(fā)某類事件

triggerHandler(type,[data])  --> 這個(gè)特別的方法將會(huì)觸發(fā)指定的事件類型上所有綁定的處理函數(shù)。但不會(huì)執(zhí)行瀏覽器默認(rèn)動(dòng)作，也不會(huì)產(chǎn)生事件冒泡。

這個(gè)方法的行為表現(xiàn)與trigger類似，但有以下三個(gè)主要區(qū)別： 

* 第一，他不會(huì)觸發(fā)瀏覽器默認(rèn)事件。

* 第二，只觸發(fā)jQuery對(duì)象集合中第一個(gè)元素的事件處理函數(shù)。

* 第三，這個(gè)方法的返回的是事件處理函數(shù)的返回值，而不是據(jù)有可鏈性的jQuery對(duì)象。此外，如果最開(kāi)始的jQuery對(duì)象集合為空，則這個(gè)方法返回 undefined 。

有這樣一個(gè)簡(jiǎn)單的表單頁(yè)面：

class為required 的文本框是必須填寫的，加一個(gè) *用以區(qū)別

// class為required 的文本框是必須填寫的，加一個(gè) *用以區(qū)別
$('form :input.required').each(function(){
    //創(chuàng)建元素
    var required = $(' *');
    //將它追加到文檔中
    $(this).parent().append( required );
});

驗(yàn)證表單元素步驟如下：

（1）、判斷當(dāng)前失去焦點(diǎn)的元素是“用戶名”還是“郵箱”，然后分別處理

（2）、如果是“用戶名”，判斷元素值的長(zhǎng)度是否小于6，如果小于6，則用紅色提醒用戶輸入不正確；反之，則用綠色提醒用戶輸入正確

（3）、如果是“郵箱”，判斷元素的值是否符合郵箱的格式，如果不符合，則用紅色提醒用戶輸入不正確；反之，則用綠色提醒用戶輸入不正確

（4）、將提醒信息追加到當(dāng)前元素的父元素之后

//文本框失去焦點(diǎn)后
$('form :input').blur(function(){ //為表單元素添加失去焦點(diǎn)事件
    var parent = $(this).parent();
    //去掉先前的提醒,否則提示消息會(huì)一直疊加
    parent.find(".formtips").remove(); 
    //驗(yàn)證用戶名
    if($(this).is('#username')){
        if(this.value == '' || this.value.length<6){
            var errorMsg = '請(qǐng)輸入至少6位的用戶名';
            parent.append(''+errorMsg+'');
        }else{
            var okMsg = '輸入正確';
            parent.append(''+okMsg+'');
        }
    }
    //驗(yàn)證郵箱
    if($(this).is('#email')){
        if(this.value=='' || ( this.value!='' && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
            var errorMsg = '請(qǐng)輸入正確的E-Mail地址';
            parent.append(''+errorMsg+'');
        }else{
            var okMsg = '輸入正確';
            parent.append(''+okMsg+'');
        }
    }
});

代碼總覽

    
    
    



    
        用戶名:
        
    
    
        郵箱:
        
    
    
        個(gè)人資料:
        
    
    
        
    

應(yīng)用六：切換選項(xiàng)卡

需要用到的 API

eq(index|-index)   --> 獲取第N個(gè)元素 （index從0開(kāi)始）

    
    
    



    
        

            時(shí)事
            
體育
            
娛樂(lè)
        
    
    
        
時(shí)事
        體育
        娛樂(lè)
    

效果：