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