JavaScript必备小知识-(四)事件绑定

103 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

接前文继续来学习 jquery 学习小结, 本文来学习 jq的事件, 相对比较重要

1、梳理知识点

jquery 的动画

基本动画 : 

show()   没有参数   等价   css:display:block

  • 可以有三个参数

    • 第一个参数 :动画执行的时间
    • 第二个参数 : 动画执行方法
    • 第三个参数 :动画完成后的回调函数

hide()     隐藏

toggle()   切换 显示 / 隐藏

上拉/下拉 :

slideDown()   通过高度的改变 显示 某个元素

slideUp()    通过高度的改变 隐藏 某个元素

slideToggle() 切换

透明度 :

  • fadeIn(1000,function() {   })   淡入   通过透明度的改变   显示 某个元素

  • fadeOut()      隐藏

  • fadeToggle()    切换

  • fadeTo()     调整某个元素的透明度

    • 第一个参数 : 时间  (不能省略)   时间为 0   也要写出来
    • 第二个参数 : 透明度值

自定义动画 :animate 

对象.animate( {  } , 时间 , 回调函数 ) stop()   停止当前正在运行的动画   其余动画继续执行

jquery 中的事件

mouseover 和 mouseenter 区别 :

mouseover 会产生冒泡现象   只要焦点发生改变就会触发该事件 mouseenter 不会冒泡  (项目中使用)

$().事件(function () {
  /// 函数操作方法
})

事件绑定 : bind() 用法 :     对象.bind("事件",function(){  })


    对象.bind({
        事件 : function(){},
        事件 : function(){},
        .....
    })

unbind() 解除绑定

事件委托 delegate:  对象.delegate("事件源",事件,function(){

}) 取消委托 : undelegate

事件绑定 + 事件委托 :  on    ----  off 事件绑定 用法 和 bind() 事件委托 用法 :      对象.on(事件 , "事件源" , function(){

})

事件切换  hover   用法 :

对象.hover(function(){
        mouseenter
    },function(){
        mouseleave
    })