目 录
1.高级事件
(1)浏览器一打开自动触发我们绑定的事件
(2) Trigger 传递数据
(3)自定义事件
(4)trigger 简写方案
(5)triggerHandler()
(6)trigger和triggerHandler的区别
(7)on off one
2.动画
(1)显示 隐藏 动画
(2)队列动画
(3)下滑 上卷
(4)淡入淡出
(5)自定义动画 animate()
(6)自定义动画之队列动画
(7)队列动画方法 queue()
1.高级事件
(1)浏览器一打开自动触发我们绑定的事件
$(function() {
$('button').bind('click', function() {
alert("点击了");
});
$(‘button’).trigger(‘click’); //浏览器一打开自动触发该点击事件
以上两步可以合写在一起如下
/*
$('button').bind('click', function() {
alert("点击了");
}).trigger('click');
*/
});
(2) Trigger 传递数据
注意：bind在绑定事件的时候也能传递数据，这里要跟trigger传递的数据区分一下。如果是bind传递的数据我们用事件对象e中的data属性取数据。
$('button').bind('click', function(e,data1,data2,data3) {
alert("取出trigger传过来的数据"+data1+"和"+data2[0]+"和"+data3.name);
}).trigger('click',['abc',[2,3],{name:'hello'}]);
//注意多个数据用[ ] 括起来,data1 ,data2,data3 指的就是[ ]中的数据
$('button').bind('click',{age:'23'},function(e,data1,data2,data3) {
alert("取出trigger传过来的数据"+data1+"和"+data2[0]+"和"+data3.name+"和bind中传递的数据要用事件对象e中的data属性去取"+e.data.age);
}).trigger('click',['abc',[2,3],{name:'hello'}]);
(3)自定义事件
$('button').bind('myEvent',function(){
alert('自定义事件');
}).trigger('myEvent');(4)trigger 简写方案
.trigger()方法提供了简写方案，只要想让某个事件执行模拟用户行为，直接再调用一个空的同名事件即可。这种便捷的方法，jQuery 几乎所有常用的事件都提供了。
$('button').bind('click', function() {
alert("点击了");
}).trigger('click');
//上面的可以简写为如下的:
$('input').click(function () {
alert('我的第一次点击来自模拟！');
}).click(); //空的 click()执行的是 trigger()
(5)triggerHandler()
jQuery 还提供了另外一个模拟用户行为的方法：.triggerHandler()；这个方法的使用 和.trigger()方法一样。
$('input').click(function () {
alert('我的第一次点击来自模拟！');
}).triggerHandler('click');在常规的使用情况下，两者几乎没有区别，都是模拟用户行为，也可以可以传递额外参 数。但在某些特殊情况下，就产生了差异!
(6)trigger和triggerHandler的区别
区别一：.triggerHandler()方法并不会触发事件的默认行为，而.trigger()会。
<form action="123.html" method="get">
<input type="submit" value="提交" />
</form>
$('form').trigger('submit'); //模拟用户执行提交，并跳转到执行页面
$('form').triggerHandler('submit'); //模拟用户执行提交，并阻止的默认行为
//如果我们希望使用.trigger()来模拟用户提交，并且阻止事件的默认行为，则需要这么写：
$('form').submit(function (e) {
e.preventDefault(); //阻止默认行为
}).trigger('submit');区别二：.triggerHandler()方法只会影响第一个匹配到的元素，而.trigger()会影响所有。例如:我给三个按钮都设置了点击事件 用trigger会弹三次 用triggerHandler只弹一次。
<body>
<button>一个按钮</button>
<button>一个按钮</button>
<button>一个按钮</button>
</body>
$('button').bind('click',function(){
alert(‘弹了’);//弹三次
}).trigger('click');
$('button').bind('click',function(){
alert(‘弹了’); //弹一次
}). triggerHandler('click');
区别三：.triggerHandler()方法会返回当前事件执行的返回值，如果没有返回值，则返回 undefined；而.trigger()则返回当前包含事件触发元素的 jQuery 对象(方便链式连缀调用)。
$('button').bind('click',function(){
alert("弹了");
}).trigger(‘click’).css({‘background’:‘red’}); //返回的是这个按钮对象可以连调
alert($('input').click(function () {
return 123;
}).triggerHandler('click')); //返回 123，没有 return 返回区别四：.trigger()在创建事件的时候，会冒泡。但这种冒泡是自定义事件才能体现出来，是 jQuery 扩展于 DOM 的机制，并非 DOM 特性。而.triggerHandler()不会冒泡。
<body>
<div>
<div>一个按钮</div>
</div>
</body>
$('div').bind('myEvent', function() {
alert(“div弹了”); //不会冒泡弹一次
}).triggerHandler('myEvent');
$(function() {
$('div').bind('myEvent', function() {
alert(“div弹了”); //会冒泡 弹三次
}).trigger('myEvent');
});
(7)on off one
目前绑定事件和解绑的方法 在 jQuery1.7 以后推出了.on()和.off()方法彻底摒弃bind()和unbind()。以后推荐使用新方式来绑定和解绑事件。One 表示事件执行一次
- 老方式 绑定事件 bind() ----> 新方式 on()
- 老方式 解绑事件 unbind() ----> 新方式 off()
//替代.bind()方式
$('.button').on('click', function () {
alert('替代.bind()');
});
//替代.bind()方式，并使用额外数据和事件对象
$('.button').on('click', {user : 'Lee'}, function (e) {
alert('替代.bind()' + e.data.user);
});
//替代.bind()方式，并绑定多个事件
$('.button').on('mouseover mouseout', function () {
alert('替代.bind()移入移出！');
});
//替代.bind()方式，以对象模式绑定多个事件
$('.button').on({
mouseover : function () {
alert('替代.bind()移入！');
},
mouseout : function () {
alert('替代.bind()移出！');
}
});
//类似于.bind()只触发一次
$('.button').one('click', function () {
alert('one 仅触发一次！');
});例子:事件委托 給button的父元素 设置点击事件,让里面动态生成的子元素也具有点击事件
<div id="box">
<button>一个按钮</button>
</div>
//on普通事件委托
$('#box').on('click', 'button', function () {
$(this).clone().appendTo('#box');
});
//取消事件委托
$('#box').off('click', 'button');
2.动画
(1)显示 隐藏 动画
jQuery 中显示方法为：.show()，隐藏方法为：.hide()。在无参数的时候，只是硬性的显 示内容和隐藏内容。
$('.show').click(function () { //显示
$('#box').show();
});
$('.hide').click(function () { //隐藏
$('#box').hide();
});在.show()和.hide()方法可以传递一个参数，这个参数以毫秒(1000 毫秒等于 1 秒钟)来控 制速度。并且里面富含了匀速变大变小，以及透明度变换。
$('.show').click(function () {
$('#box').show(1000); //显示用了 1 秒
});
$('.hide').click(function () {
$('#box').hide(1000); //隐藏用了 1 秒
});
除了直接使用毫秒来控制速度外，jQuery 还提供了三种预设速度参数字符串：slow、 normal 和 fast，分别对应 600 毫秒、400 毫秒和 200 毫秒。
$('.show').click(function () {
$('#box').show('fast'); //200 毫秒
});使用.show()和.hide()的回调函数，可以实现列队动画效果。我们在使用.show()和.hide()的时候，如果需要一个按钮切换操作，需要进行一些条件判断。而 jQuery 提供给我们一个类似功能的独立方法：.toggle()。
/使用.show()和.hide()的回调函数，可以实现列队动画效果。
$('.show').click(function () {
$('#box').show('slow', function () {
alert('动画持续完毕后，执行我！');
});
});
//隐藏显示的切换
$('.toggle').click(function () {
$(this).toggle('slow');
});
(2)队列动画
<body>
<div class="box">我</div>
<div class="box">爱</div>
<div class="box">你</div>
<button class='showdiv'>显示</button>
<button class='hiddendiv'>隐藏</button>
</body>
逐个显示 和 逐个隐藏
$('.showdiv').click(function(){
$('.box').first().show(1000,function myshow(){
//this 当前的对象
$(this).next().show(1000,myshow);//递归调用 myshow这个函数
});
});
//逐个隐藏
$('.hiddendiv').click(function(){
$('.box').last().hide(1000,function myshow(){
$(this).prev().hide(1000,myshow);
});
});
(3)下滑 上卷
jQuery 提供了一组改变元素高度的方法：.slideUp()、.slideDown()和.slideToggle()。顾名 思义，向上收缩(卷动)和向下展开(滑动)。注意：滑动、卷动效果和显示、隐藏效果一样，具有相同的参数。
$('.down').click(function () {
$('#box').slideDown();
});
$('.up').click(function () {
$('#box').slideUp();
});
$('.toggle').click(function () {
$('#box').slideToggle()
});(4)淡入淡出
jQuery 提供了一组专门用于透明度变化的方法：.fadeIn()和.fadeOut()，分别表示淡入、 淡出，当然还有一个自动切换的方法：.fadeToggle()。
$('.in').click(function () {
$('#box').fadeIn('slow');
});
$('.out').click(function () {
$('#box').fadeOut('slow');
});
$('.toggle').click(function () {
$('#box').fadeToggle();
});上面三个透明度方法只能是从 0 到 100，或者从 100 到 0，如果我们想设置指定值就没 有办法了。而 jQuery 为了解决这个问题提供了.fadeTo()方法。
$('.toggle').click(function () {
$('#box').fadeTo('slow', 0.33); //0.33 表示值为 33
});注意：淡入、淡出效果和显示、隐藏效果一样，具有相同的参数。对于.fadeTo()方法， 如果本身透明度大于指定值，会淡出，否则相反。
(5)自定义动画 animate()
到目前位置， 我们都是创建的固定位置不动的动画。 如果想要实现运动状态的位移动画， 那就必须使用自定义动画，并且结合 CSS 的绝对定位功能。
$(‘.animate’).click(function () {
$(‘#box’).animate({ //我们把CSS属性放到JSON对象中作为animate方法的参数 这个是必须参数
‘top’ : ‘300px’, //先必须设置 CSS 绝对定位
‘left’ : ‘200px’
});
});在animaie()方法中除了一个必要参数 还有3个可选参数 一个是时间,一个是运动方式 swing(缓动)、 linear(匀速)，默认为 swing。一个是回调函数。
$('.animate').click(function () {
$('#box').animate({
'width' : '300px',
'height' : '200px'
}, 1000, ‘linear’,function () {
alert('动画执行完毕执行我！');
});
});自定义动画中，每次开始运动都必须是初始位置或初始状态，而有时我们想通过当前位 置或状态下再进行动画。jQuery 提供了自定义动画的累加、累减功能。
$(‘.animate’).click(function () {
$(‘#box’).animate({
‘left’ : ‘+=100px’, //每点一次 在原来的基础上再移动100像素
});
});(6)自定义动画之队列动画
自定义实现列队动画的方式，有两种：1.在回调函数中再执行一个动画；2.通过连缀或顺序来实现列队动画。
//通过回调函数实现列队动画
$('.animate').click(function () {
$('#box').animate({
'left' : '100px'
}, function () {
$('#box').animate({
'top' : '100px'
}, function () {
$('#box').animate({
'width' : '300px'
});
});
});
});
//通过依次顺序实现列队动画
$('.animate').click(function () {
$('#box').animate({'left' : '100px'});
$('#box').animate({'top' : '100px'});
$('#box').animate({'width' : '300px'});
});
//注意：如果不是同一个元素，就会实现同步动画
//通过连缀实现列队动画
$('.animate').click(function () {
$('#box').animate({
'left' : '100px'
}).animate({
'top' : '100px'
}).animate({
'width' : '300px'
});
});
(7)队列动画方法 queue()
我们已经可以实现列队动画了，如果是同一个元素，可以依次顺序或连缀调用。 如 果是不同元素，可以使用回调函数。但有时列队动画太多，回调函数的可读性大大降低。 为此，jQuery 提供了一组专门用于列队动画的方法。
//连缀无法实现按顺序列队
$('#box').slideUp('slow').slideDown('slow').css('background', 'orange');
注意：如果动画方法，连缀可以实依次列队，而.css()方法不是动画方法，会在一开始 传入列队之前。那么，可以采用动画方法的回调函数来解决。
//使用回调函数，强行将.css()方法排队到.slideDown()之后
$('#box').slideUp('slow').slideDown('slow', function () {
$(this).css('background', 'orange');
});但如果这样的话，当列队动画繁多的时候，可读性不但下降，而原本的动画方法不够清 晰。所以，我们的想法是每个操作都是自己独立的方法。那么 jQuery 提供了一个类似于回 调函数的方法：.queue()。
//使用.queue()方法模拟动画方法跟随动画方法之后
$('#box').slideUp('slow').slideDown('slow').queue(function () {
$(this).css('background', 'orange');
});
(小编也在努力学习更多哟!以后再慢慢分享的啦!)
希望对友友们有所帮助!!!!
