小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
接前文继续来学习 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
})