【jQuery基础学习】03 jQuery中的事件与动画

关于jQuery中的事件

js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。

jQuery增加并扩展了基本的事件处理机制，jQuery不仅提供了更加优雅的事件处理方法，而且极大地增强了事件处理能力。

$(document).ready()只需要等文档结构加载完就能执行，而window.onload还要等到文档元素所关联的元素（比如图片）加载完才行。

而因为图片未加载完时ready()事件就执行了，因此图片的长宽属性未必有效，要想解决这个问题可以用$(document).load()方法，其等价于window.onload。

jQuery的事件可以多次使用，而window.onload只能使用一次。

$(document)也可以简写为$()

$().load(){
  alert("Hello world!");  
}

事件绑定

也就是bind()方法，有三个参数，调用格式：bind(type[,data],fn).

type参数：

表示事件类型。类型包括：blur，focus，load，resize，scroll，unload，click，dbclick，mousedown，mouseup，mousemove，mouseover，mouseout，mouseenter，mouseleave，change，select，submit，keydown，keypress，keyup，和error等，当然也可以自定义名称。

data参数：

作为event的属性值传递给事件对象的额外数据对象，为可选值。

fn参数:

用来绑定的处理函数

举个使用例子：

$(function(){
    $("#myDiv").bind("click",function(){
        $(this).hide();//这里this表示绑定了此行为的元素，即Id为mydiv的元素
    })
})

当然像一些经常用到的比如click,mouseover这类事件，在程序里经常会使用到，所以jQuery提供了一套简写的方法。

$(function(){
    $("#myDiv").click(function(){
        $(this).hide();//这里this表示绑定了此行为的元素，即Id为mydiv的元素
    });
})

合成事件

jQuery有两个合成事件：hover()和toggle().好吧，你可以理解为又封装了一层.

前面已经讲过toggle()了，相当于一个开关。这里的hover()差不多，相当于同时运用了mouseenter和mouseleave。

$("#myDiv").hover(function(){
    $(this).next.show();
},function(){
    $(this).next.hide();
})

而toggle类似的用法，懒得讲了。不过toggle还有另一种玩法，如下：

$("#myDiv").toggle(function(){
    $(this).next.toggle();//如果元素隐藏，调用toggle()就显示
},function(){
    $(this).next.toggle();//如果元素显示，调用toggle()就隐藏
})

事件冒泡

在页面上可以有多个事件，也可以在多个元素上响应同一事件。

那么现在比如一个div里嵌套了一个span，这两个同时都有click事件，那么当你点击了span的同时，div上的click事件也会在span的点击事件执行之后被执行。

而之所以把这种情况称为事件冒泡，就是因为事件会按照DOM的层次结构像水泡一样不断向上，直到顶端。

• 关于事件对象的使用

  $(function(){
      $("#headDiv").click(function(event){
          alert(event.pageX);//event只有事件处理函数能够访问到，事件处理函数执行完毕，此对象被销毁
      })
  })

• 关于停止事件冒泡（简单来说就是我点了span请不要触发div的点击事件）。

  $(function(){
      $("#headDiv").click(function(event){
          event.stopPropagation();//阻止事件冒泡，也可以用return false;这种方法阻止，虽然js也有这个方法，但是js的在IE里无效，而jQuery封装了的这个兼容IE
      })
  })

• 阻止默认行为，默认行为包括单击链接会跳转，单击提交按钮表单会提交。

  $(function(){
      $("a").click(function(event){
          event.preventDefault();//阻止默认行为，虽然js也有这个方法，但是js的在IE里无效，而jQuery封装了的这个兼容IE
           //return false;//也可以用这种方法阻止
      })
  })

  看到了吧，阻止事件冒泡和阻止默认行为都可以用return false;来解决，所以记住return false就好了。

• 事件捕获，并非所有浏览器都支持事件捕获，所以jQuery也不支持。只能用JS实现，然而我的意思是算了吧，我选择不知道。就知道事件捕获的顺序和冒泡顺序相反就好了。

事件对象的属性

• event.type                          会得到事件的类型，比如click会得到“click”
• event.preventDefault()         阻止默认行为
• event.stopPropagation()       阻止冒泡
• event.target                       获取触发事件的元素
• event.relatedTarget             触发事件的元素的相关元素，比如mouseover的之前的元素，mouseout之后的元素
• event.pageX和event.pageY   获取光标相对于页面的X坐标和Y坐标
• event.which                        在鼠标单击事件中获取鼠标的左、中、右键

  $("a").mousedown(function(e){
    alert(e.which);//1=左键，2为中键，3为右键
  })

• event.metaKey                   获取ctrl键是否按下

移除事件

• unbind() 移除按钮元素上以前注册的事件

  $(function(){
      $("div").click(function(event){
        $("#btn").unbind("click");//移除btn上绑定的click事件，如果不带参数，那么就移除btn上所有的事件。如果把绑定的事件函数对象当做第二个参数传入，那么就只删除这个事件函数
      });
  })

• one()  绑定事件函数，当处理函数触发一次后，立即被删除

  $(function(){
      $("div").one("click",function(){
          alert("one的用法和bind一样");
      });
  })

模拟操作

以上的事件例子多半是用户操作去触发事件，但是有时我们自己也会去模拟用户操作以达到相同效果。

在jQuery中，可以使用trigger方法完成模拟操作。

$("$btn").trigger("click");//模拟操作
$("$btn").click();//效果同上

当然trigger也可以触发自己定义的事件

$(function(){
    $("div").bind("troyClick",function(){
        alert("我是自定义事件");
    });
    $("div").trigger("troyClick");
})

trigger方法的第二个参数为数组类型，加上后表示传递的参数数组

$(function(){
    $("div").bind("troyClick",function(event,msg1,msg2){
        alert("我是自定义事件，我的参数为："+msg1+","+msg2);
    });
    $("div").trigger("troyClick",["参数1","参数2"]);
})

trigger方法触发事件后，会执行浏览器默认操作。如：$("input").trigger("focus")后不仅仅会执行focus操作，还会执行input本身的获取焦点操作。那么这个时候用triggerHandler就只触发focus操作，不执行获取焦点的默认操作。

其他玩法

一次性绑多个事件：

 $("div").bind("mouseover mouseout",function(){
        $(this).toggleClass("over");
 });

添加事件命名空间，利于管理：

    $("div").bind("click.myNamespace",function(){
        alert("1");
    });
    $("div").bind("dbclick.myNamespace",function(){
        alert("2");
    });
    $("div").unbind(".myNamespace");//执行后上面两个事件都被解绑了

相同事件名称，不同命名空间执行方法：

$("div").bind("click.myNamespace",function(){
    alert("1");
});
$("div").bind("click",function(){
    alert("2");
});
$("div").trigger("click!");//感叹号的作用是匹配所有不包含在命名控件中的click方法

关于jQuery中的动画

• show()和hide()    显隐操作，改变元素高宽和不透明度

  $("#mydiv").show(1000);//div会在一秒之类慢慢显示出来

• fadeIn()和fadeOut()  改变元素透明度

  $("#headDiv").click(function(){
      $(this).next().fadeOut();//逐渐消失
  });

   

• slideUp()和slideDown  改变元素高度

  $("#headDiv").click(function(){
      $(this).next().slideDown();//元素由上向下显示，
  });

• animate()   自定义简单动画，语法结构为animate(params,speed,callback)
  • params：一个包含样式的对象
    • height高度
    • opacity透明度
    • left移动
    • 其它的类推吧
  • speed：速度参数
  • callback：在动画完后执行的函数
  • 上例子

    $(function(){
        $("myDiv").click(function(){//点击div后
             $(this).animate({left:"500px"},3000);//3秒内div右移动500像素，看好了，写着left，实际是向右。如果改成：+=500px就是当前位置向右500px，-=500px就是当前位置向左500px
        })
    });
    //这里要注意，myDiv要加position:relative;这个样式，要不然可动不起来

  • 多重动画就是在params里传多个样式就好
  • 按顺序动画可以通过链式操作完成，因为只要是链式操作的animate都会进入动画队列，而如果动画队列后有个函数，那么这个函数反而直接在动画开始时就执行了。
  • animate动画方法，可以替代所有其它的动画方法
  • stop():停止元素上的动画。stop可以传两个参数，都是可选参数，第一个参数会把当前元素接下来尚未执行的动画全部清空，第二个参数可以让正在执行的动画直接到达结束时刻的状态。
  • 判断元素是否处于动画状态来解决动画累积，即只有在元素未处于动画状态时才添加新的动画，否则不添加。

    if(!$(element).is(":animated")){//判断元素是否处于动画状态
       //如果没有则添加新的动画
    }

  • delay()对动画进行延迟操作，加在动画队列中，如delay(3000)这样。
• 专门用于交互的动画方法
  • toggle
    • 总是这位仁兄，toggle。但是在这里参数不同的话，效果也不同，在前面说过他可以切换元素的可见状态
    • 还可以传两个参数进去，第一个参数为速度，第二个为回调函数
  • slideToggle
    • 这个动画效果只调整元素高度，相当于slideup和slidedown的切换
  • fadeTo
    • 把元素的透明度调整为指定的值，第一个参数传速度参数，第二个传指定的透明度0~1之间。
  • fadeToggle
    • 这个动画效果只调整元素透明度，相当于fadeout和fadeIn的切换