[分享]jquery的事件&动画

一、事件

在1.7之前的版本中jQuery处理事件有多个方法， (google 搜索: jquery live bind degelate)作用各不相同，后来统一的使用on/off方法

1、.on( events [,selector ] [,data ], handler(eventObject) )

参数复杂，我们先解析各个参数，[]里面的参数是可选的

参数1events：事件类型或者是可选的命名空间比如"click", "click.name1", 或者 ".myname"
参数2selector：一个选择器字符串，用于过滤和选中能触发事件的后代元素
参数3data：当一个事件被触发时，要传递给事件处理函数的event.data
参数4handler(eventObject)：事件被触发时，执行的函数

举个例子
html代码

<div class="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
<input id="ipt" type="text"> <button id="btn">添加</button>
<div id="wrap">
</div>

js代码
场景1，点击li展示在wrap内展示对应的内容

$('.box li').on('click', function(){
  var str = $(this).text()
  $('#wrap').text(str)
})

换个写法，简写如下，但不规范

$('.box>ul>li').click(function(){
  var str = $(this).text()
  $('#wrap').text(str)
})

增加一个命名空间，方便删除对应的事件，所谓的命名空间就相当于给这个事件命名，我删除事件的时候就只删除对应这个，不会误伤这个事件类型的其他事件

$('.box li').on('click.hello', function(){
  var str = $(this).text()
  $('#wrap').text(str)
})
//命名空间没什么特别的作用，只不过在解绑事件时便于区分绑定的事件
$('.box li').off('click.hello')

场景2，加需求：点击button，把input的值当成li加入ul内

$('.box li').on('click', function(){
  var str = $(this).text();
  $('#wrap').text(str);
});

$('#btn').on('click', function(){
  var value = $('#ipt').val()
  $('.box>ul').append('<li>'+value+'</li>')
})

最大的问题是，后面新增的元素没有绑定click显示值的事件，需要使用事件代理解决这个问题

$('.box li').on('click', function(){
  var str = $(this).text();
  $('#wrap').text(str);
});

$('.box ul').on('click', 'li', function(){
  var str = $(this).text()
  $('#wrap').text(str)
}) //this代表的是触发事件的元素li

场景三：传递消息给事件处理函数

//绑定事件的时候我们也可以给事件附带些数据，只不过这种用法很少见
$('.box').on('click', {name: 'hunger'}, function(e){
    console.log(e.data)
})

2、.one( events [, selector ] [, data ], handler(eventObject) )

同 on，绑定事件，但只执行一次

3、.off( events [, selector ] [, handler ] )

移除一个事件处理函数

$('.box li').off('click')

4、.trigger( eventType [, extraParameters ] )

用代码触发 所匹配元素的 绑定的事件类型对应的处理程序，个人理解是用代码触发本应该行动click触发的事件处理函数

$('#foo').on('click', function() {
  console.log($(this).text())
});
$('#foo').trigger('click')

5、其他常见事件

二、动画

1、.hide([duration ] [,easing ] [,complete ])

用于隐藏元素，没有参数的时候等同于直接设置display属性=none
参数1：动画时长的毫秒数值(如：1000)，可以用预设的三种速度("slow","normal", or "fast")表示

参数2：一个字符串，指示转换使用哪个缓动函数。jQuery提供"linear(线性)" 和 "swing（旋转）"

参数3：完成后执行的函数

$('.target').hide();

  $('#book').hide(300, 'linear', function() {
    alert('Animation complete.');
  })

2、.show( [duration ] [, easing ] [, complete ] )

用于显示元素，用法和hide类似

3、.toggle( [duration ] [, easing ] [, complete ] )

用来切换元素的隐藏、显示！用法和show、hide类似

4、fadeIn( [duration ] [, easing ] [, complete ] )

通过淡入的方式显示匹配元素，

5、.fadeOut( [duration ] [, easing ] [, complete ] )

通过淡出的方式隐藏匹配元素

6、.slideDown( [duration ] [, easing ] [, complete ] )

用下滑动画显示一个匹配元素

7、.slideUp( [duration ] [, easing ] [, complete ] )

用上滑动动画隐藏一个匹配元素，

8、.slideToggle( [duration ] [, easing ] [, complete ] )

用滑动动画显示或隐藏一个匹配元素

9、动画序列

动画执行是异步的操作，比如以下代码不会等到show动画4000ms完成后，再输出'hahh'的。他们是异步的操作

$('#btn-box1').on('click', function(){
      $('.box').show(4000)
       console.log('hahh')
    })

但如果我们有必须等动画完成了，才能执行的代码。我们可以把代码放在动画show的回调函数里面，他就会等动画完成后执行了。比如像以下写法

 $('#action').on('click', function(){
      var $box = $('.box')
      $box.hide(1000, function(){
         $box.show(1000, function(){
           $box.fadeOut('slow',function(){
             $box.fadeIn('slow',function(){
               $box.slideUp(function(){
                 $box.slideDown(function(){
                   console.log('动画执行完毕')
                 })
               })
             })
           })
         })
      })
          console.log('动画完毕了吗')
    })

但这样写也很麻烦，jquery有动画队列，所以等价于

$box.hide(4000)
    .show(3000)
    .fadeOut()
    .fadeIn
    .slideUp()
    .slideDown(function(){
    console.log('动画完毕')})
    

三、自定义动画

上面几个简单的动画不能满足需求的时候，jquery提供了自定义动画行为的方法

1、.animate( properties [, duration ] [, easing ] [, complete ] )

官方文档

参数一：properties是组包含作为动画属性和终值的样式属性和及其值的集合,动画将根据这组对象移动。
参数二/三/四同上
$('#clickme').click(function() {
$('#book').animate({

opacity: 0.25,
left: '+=50',
height: 'toggle'

}, 5000, function() {

// Animation complete.

});
});

2、.clearQueue

清除动画队列中未执行的动画

3、.finish

停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态

4、.stop( [clearQueue ] [, jumpToEnd ] )

停止当前正在运行的动画

clearQueue(default: false)
jumpToEnd(default: false) 跑到当前执行动画的最后一帧的最终状态
.stop( true , true )//停止当前动画，并清除未执行的动画队列，并且展现当前执行动画的最后一帧的最终状态
.stop(false,false) //默认，停止当前动画，继续以下的动画
.stop(true,false) //停止当前动画，并清除未执行的动画队列