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