JS切換卡效果

JS實現動畫切換效果，大致實現效果爲五個頁面，依次觸發相應按鈕，類比輪播圖進行相應頁面效果的切換和替換。

參考某源碼進行學習，以下：

//配置嚮導
    $(document).delegate('.tab-content>.tab-pane .operation .next', 'click', function(ev){
        $(this).closest('.tab-pane').removeClass('active').next().addClass('active');
        $('.events .wizard-item.active').next().addClass('active');
        return false;
    })
    .delegate('.tab-content>.tab-pane .operation .prev', 'click', function(ev){
        $(this).closest('.tab-pane').removeClass('active').prev().addClass('active');
          $('.events .wizard-item.active').last().removeClass('active');
        return false;
    })
    .delegate('form[name="setclusterConfigStep5"] .operation .finish', 'click', function(ev){
        $('#clusterConfigModal').modal('hide');
        return false;
    });
    $('#clusterConfigModal').on('hide.bs.modal', function () {
      //恢復最初始狀態
       $('.events .wizard-item').removeClass('active').first().addClass('active');
       $('.tab-content .tab-pane').removeClass('active').first().addClass('active');
    });

知識點：
1： $(document)是一個選擇器，選中的是整個html全部元素的集合

問題1.1：
(document).on(‘click′,′className′,function()); (‘className’).on(‘click’,function(){});
二者都是給‘className’綁定事件，有何區別？

答： (document).on是把事件委託到document上， (‘className’).on是把事件綁定到.className元素上。效率方面，直接綁定在元素上會更爲高效，綁定在document上，每次document有點擊動做，瀏覽器都會判斷當前點擊的對象，若是匹配，再決定要不要執行，多了一個判斷的環節。但在目前開發中，JS渲染效率很高，因此此異同基本能夠忽略不計。此外，針對委託document的觸發特色，延伸一下， ("className").on爲onclick綁定，只有在頁面onload的時候執行一次，當頁面刷新後，新加載的具備className的元素便沒有事件綁定到上面了，相反 (document).on這種方法會刷新和從新賦予綁定操做，因此必定程度上更爲全面。

參考文章：http://bbs.csdn.net/topics/390663982/
2：delegate：給某元素A綁定觸發事件，規定選擇器選擇的元素B執行某函數

①：$(「#id」).delegate 綁定一個事件，調用相應的函數
②：一個事件綁定多個函數

.delegate("#id",function(){
     function A(){}
     function B(){}....
})

③：給元素A綁定多個觸發事件

$("table").delegate("td","click mouseover mouseout mousedown", function(e){
     //當多個事件執行的不爲同一個函數時，用type判斷事件類型
    var type= e.type;
    if (e.type=="click")

    else if

    else if

    else

});

④：selector選擇器一次性綁定多個元素。

.delegate('form[name="setclusterConfigStep5"] .operation .finish',cancel, 'click', function(ev){
        $('#clusterConfigModal').modal('hide');
        return false;
    });
//該例經過多元素選擇器爲多個元素綁定事件

⑤：鏈式寫法，一次性委託多個delegate(on)。—待補充

$(document).delegate().delegate().delegate();

JQuery1.7後 delegate()被替換成了 on()，傳遞和處理事件數據的方式是同樣的。取消delegate的事件 .undelegate()方法. .on()的取消事件.off()。
參考文章：http://www.css88.com/jqapi-1.9/delegate/

3：this在函數中的用法之一

$(document).delegate('.tab-content>.tab-pane .operation .next', 'click', function(ev){
        $(this).closest('.tab-pane').removeClass('active').next().addClass('active');
        $('.events .wizard-item.active').next().addClass('active');
        return false;
    })
//.next()內不包含選擇器的時候，默認選中下一個緊鄰的同胞元素

code翻譯：給全部.next 按鈕綁定 click 事件，執行的函數內容爲：經過this選擇器選擇到最近的tab-pane元素，移除active樣式，並經過鏈式寫法，用next()方法搜索到下一個tab-pane元素，給予其active樣式
在這裏插入另外一個知識點，上例中一共進行2次的選擇器搜索，在途中沒有被中斷其搜索狀態，即從this–closest的tab-pane–next()，邏輯等同於：

$(this).closest('.tab-pane').removeClass('active');
$(this).closest('.tab-pane').next().addClass('active');
//等同於下列代碼
$(this).closest('.tab-pane').removeClass('active').end().closest('tab-pane').next().addClass('active');

.end()方法結束當前鏈條中的最近的篩選條件，並將匹配元素集還原爲以前的狀態.

下例爲end()中斷過的狀況：

$ (this).find ("div").css ("background", "red").end().siblings ().find ("div").css ("background", "green");

4：bootstrap模態框的使用
參考文檔：http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html bootstrap對於模態框提供了，一些方法，屬性和觸發事件。典型的方法有 modal(‘show’)、modal(‘hide’)等 例子中的hide.bs.modal 事件是當調用hide實例方法時觸發。其餘三個事件爲：show.bs.modal、shown.bs.modal和hidden.bs.modal