jQuery中的事件与动画

Posted cnsdhzzl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery中的事件与动画相关的知识,希望对你有一定的参考价值。

加载DOM

$(document).ready()方法,可以缩写成$(function(){}),$(document)也可以简写成$() 与传统的window.onload有所不同

1: onload方法将会在网页中所有元素被加载到浏览器后才执行 .ready方法将会在dom完全就绪时就可以被调用,并不等于所有元素关联的文件已经下载完毕

2: onload函数只能保存一个对函数的引用,ready可以保存多个引用

事件的绑定:

bind(type,[data],fn)

绑定元素的事件,typehtml事件类型(blurfocusloadresizescrollunloadclickdbclickmousedownmouseupmouseovermousemovemouseoutmouseentermouseleavechangeselectsubmitkeydownkeypresskeyuperrror,js的形式(去除on),data为传递的参数(可选),fu为监听的函数

注意data需要使用[]进行包装,在监听函数中使用一个参数进行捕获,e.data获取数组形式后,进行访问,也可以使用简写的进行绑定事件(像clickmouseovermouseout这类事件,程序中常会用到)

 

实例

 

当点击鼠标时,隐藏或显示 p 元素:

$("button").bind("click",function(){
  $("p").slideToggle();
});

同时绑定多个事件的方法:

$(function () {
                $("li").bind("mouseover", function() {
                    $(this).css("background", "pink");
                }).bind("mouseout", function() {
                    $(this).css("background", "");
                });
$("li").hover(
            function () {  //mouseover
                          $(this).css("background", "pink");
                     },
                      function () { //mouseout
                         $(this).css("background", "");
                     }
                );

 

参数描述
event

必需。规定添加到元素的一个或多个事件。

由空格分隔多个事件。必须是有效的事件。

data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。

 

 

 

 

 

 

 

移除绑定:

 

unbind([type],[fn]) 移除元素上指定类型的事件,也可以不带参数,移除该元素所有的事件.也可以带两个参数,移除指定事件 ,类型上,不同的监听函数(一个事件可以有多个监听函数获取监听事件函数的方法,在开启监听时: $("btn").bind("click",myfun=function(){....}); //移除时,就可以使用myfun进行移除

 

实例

 

移除所有 p 元素的事件处理器:

 

$("button").click(function(){
  $("p").unbind();
});


如果没有规定参数,unbind() 方法会删除指定元素的所有事件处理程序。

 

one(...) 类似bind的使用,指定监听的事件类型,已经对于的函数,区别在于one只会触发一次后,就被自动移除

实例

当点击 p 元素时,增加该元素的文本大小:

 

$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});

 

控制元素显示和隐藏

动画

show([speed,[easing],[fn]])

这个就是 ‘show( speed, [callback] )‘ 无动画的版本。如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有,show()等同于$(selector).css("display","block"),除了可以控制元素的显示外,它还能定义显示元素时的效果,如显示速度。

 

hide([speed,[easing],[fn]])

隐藏显示的元素

这个就是 ‘hide( speed, [callback] )‘ 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西。

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"

fn:在动画完成时执行的函数,每个元素执行一次。

 

animate

用于创建自定义动画的函数。

animate(params,[speed],[easing],[fn])

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

fn:在动画完成时执行的函数,每个元素执行一次。

语法:

$(selector).animate({params},speed,callback);

jQuery animate() - 操作多个属性

请注意,生成动画的过程中可同时使用多个属性:

实例

$("button").click(function(){
  $("div").animate({
    left:‘250px‘,
    opacity:‘0.5‘,
    height:‘150px‘,
    width:‘150px‘
  });
}); 

 

 

 

以上是关于jQuery中的事件与动画的主要内容,如果未能解决你的问题,请参考以下文章

jquery中的事件与动画

jQuery中的事件与动画 (你的明天Via Via)

jQuery中的事件与动画

jQuery中的事件与动画

Jquery中的事件与动画

jQuery中的事件与动画