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) //停止当前动画,并清除未执行的动画队列

5、举个例子

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券