jQuery中的事件与动画

Posted 2020-07-11 cnsdhzzl

加载DOM：

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

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

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

事件的绑定:

bind(type,[data],fn)

绑定元素的事件,type为html事件类型（blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mouseover、mousemove、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、errror）,js的形式(去除on),data为传递的参数(可选),fu为监听的函数

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

 

实例

 

当点击鼠标时，隐藏或显示 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‘
  });
});