在1.7之前的版本中jQuery处理事件有多个方法, (google 搜索: jquery live bind degelate)作用各不相同,后来统一的使用on/off方法
参数复杂,我们先解析各个参数,[]里面的参数是可选的
参数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)
})
同 on,绑定事件,但只执行一次
移除一个事件处理函数
$('.box li').off('click')
用代码触发 所匹配元素的 绑定的事件类型对应的处理程序,个人理解是用代码触发本应该行动click触发的事件处理函数
$('#foo').on('click', function() {
console.log($(this).text())
});
$('#foo').trigger('click')
用于隐藏元素,没有参数的时候等同于直接设置display属性=none
参数1:动画时长的毫秒数值(如:1000),可以用预设的三种速度("slow","normal", or "fast")表示
参数2:一个字符串,指示转换使用哪个缓动函数。jQuery提供"linear(线性)" 和 "swing(旋转)"
参数3:完成后执行的函数
$('.target').hide();
$('#book').hide(300, 'linear', function() {
alert('Animation complete.');
})
用于显示元素,用法和hide类似
用来切换元素的隐藏、显示!用法和show、hide类似
通过淡入的方式显示匹配元素,
通过淡出的方式隐藏匹配元素
用下滑动画显示一个匹配元素
用上滑动动画隐藏一个匹配元素,
用滑动动画显示或隐藏一个匹配元素
动画执行是异步的操作,比如以下代码不会等到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提供了自定义动画行为的方法
官方文档
参数一:properties是组包含作为动画属性和终值的样式属性和及其值的集合,动画将根据这组对象移动。
参数二/三/四同上
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
清除动画队列中未执行的动画
停止当前动画,并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态
停止当前正在运行的动画
clearQueue(default: false)
jumpToEnd(default: false) 跑到当前执行动画的最后一帧的最终状态
.stop( true , true )//停止当前动画,并清除未执行的动画队列,并且展现当前执行动画的最后一帧的最终状态
.stop(false,false) //默认,停止当前动画,继续以下的动画
.stop(true,false) //停止当前动画,并清除未执行的动画队列
18 天前