✿✿✿JavaScript --- jQuery框架二

  目   录  

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=&#