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 条评论
登录 后参与评论

相关文章

  • css基础样式2

    本文设计到的css属性有background、inline-block、line-height

    bamboo
  • js 数据类型笔记

    这篇文章主要是对阮一峰老师javascript教程中数据类型和运算的笔记,方便记忆。 有需要的朋友建议直接观看阮一峰老师javascript教程,写得更详细

    bamboo
  • css 定位

    position: relative 相对默认的布局位置进行定位,也就是相对自己应该在的位置来定位。

    bamboo
  • iOS动画-CALayer隐式动画原理与特性

    Core Animation的一个非常显著的特性是就是实现动画,而且它支持隐式动画和显式动画两种形式,本篇我们主要从隐式动画说起;

    梧雨北辰
  • Android Animations动画使用详解

    Android的animation由四种类型组成:alpha、scale、translate、rotate

    阳光岛主
  • Activity转场动画

    Activity作为Android系统中参与用户交互的重要组件,在日常开发过程中,我们经常需要定义Activity跳转动画以便为用户提供更好的体验,那么怎么设置...

    小海编码日记
  • Android动画入门教程之kotlin

    Google在今年的IO大会上宣布,将Android开发的官方语言更换为Kotlin,作为跟着Google玩儿Android的人,我们必须尽快了解和使用Kotl...

    砸漏
  • iOS开发CoreAnimation解读之五——高级动画技巧

            CoreAnimation中还有一个非常重要的类:CATransaction事物类,这个可以同时设置多个layer层的动画效果。可以通过隐式和显...

    珲少
  • 英伟达、AMD强敌在侧,英特尔如何打赢数据中心业务这场战争?

    大数据文摘
  • 《碟中谍5》的科幻场景变为现实,银河水滴要用步态识别实现身份认证

    不知道看过《碟中谍5》的朋友对其中一个场景是否还有印象:阿汤哥的搭档在破解了指纹解锁、三重物理旋转密码锁挑战后,迎来了“步态识别锁”。这项挑战无疑是对生物体的身...

    AiTechYun

扫码关注云+社区

领取腾讯云代金券