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这种方法会刷新和重新赋予绑定操作，所以一定程度上更为全面。

参考文章：

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()。

参考文章：

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模态框的使用

参考文档： bootstrap对于模态框提供了，一些方法，属性和触发事件。典型的方法有 modal(‘show’)、modal(‘hide’)等 例子中的hide.bs.modal 事件是当调用hide实例方法时触发。其他三个事件为：show.bs.modal、shown.bs.modal和hidden.bs.modal