【学习笔记】锋利的jQuery（三）事件和动画

一、jQuery事件

1，加载事件

$(document).ready(function(){...}) //等同于$(function(){..})
$(window).load(function(){...})    //等同于window.onload = fn

2，基本事件绑定

bind(type,[.data],fn)  //可绑定多个事件：bind("mouseover mouseout",fn)
unbind(type,fn)        //解除绑定
one(type,[.data],fn)   //绑定的事件只执行一次

//简写绑定
click(fn)/dblclick(fn)
mouseover(fn)/mouseout(fn)
mouseenter(fn)/mouseleave(fn) //不包括移出元素内部的子元素
scroll(fn)

//常用表单事件
focus(fn)/blur(fn)
keyup(fn)/keydown(fn) //按下和松下按键
keypress(fn)   //按了个键值时候
change(fn)     //表单文本域(input:text,textarea,select)值改变时触发

//合成事件
hover(fn1,fn2)  //相当于bind("mouseenter")和bind("mouseleave")
toggle(fn1,fn2,fn3...)  //连续单击事件，轮番调用多个函数

trigger(type)  //触发对应type的事件，会执行浏览器默认操作，type可为自定义名称
triggerHandler(type)  //绑定type事件，且阻止浏览器默认操作  

3，事件的命名空间

bind("click.name",fn);
bind("mouseover.name",fn);
bind("click",fn);

unbind(".name");     //命名空间解绑
trigger("click!");   //匹配不包含命名空间的click，即第三个

4，event事件对象

bind(type,function(event){....})  //添加事件对象参数，推荐命名为event或e，原理上可随便命名

//event属性
event.type  
event.target   
event.relatedTarget      //触发事件的相关元素
event.pageX/event.pageY  //相对于页面的x和y坐标

event.which   //键盘事件:返回按键的ASCALL码，点击事件:1(左)2(中)3(右)。jq中整合了keyCode和charCode的兼容及鼠标事件
event.keyCode //返回按键的ASCALL码，建议用which//event方法，两个同时使用，相当于事件里边添加"return false;"
event.stopPropagation();  //阻止冒泡
event.preventDefault();   //阻止浏览器事件默认行为

 注意：jQuery中，获取和设置类似disabled和checked属性时，用prop()方法代替attr()，只有true/false值。

 

二、jQuery动画

/*
 *params：动画的最终样式或值的效果，如{left:"+=500px"}，left会进行累加
 *speed：动画时间，单位ms。slow为600，normal为400，fast为200
 *callback：动画完成后执行的回调函数
 */
animate(params,speed,callback);
$div.animate().animate()... //按顺序执行动画
.stop([clearQueue],[goEnd]) //两个布尔值参数可选，无参数仅停止当前动画
.delay()  //推迟执行

//动画简写
hide()/show()   //相当于css("display":"none/block/inline")
slideUp()/slideDown() //通过高度上下拉伸隐藏
fadeIn()/fadeOut()    //淡进、淡出
fadeTo(speed,0~1)     //渐进方式调到指定透明度

//组合动画
toggle()
slideToggle()
fadeToggle()

//animate(params,500)，常用的params
{scrollTop:"-=50"}
{height:"+=50"} 

转载于:https://www.cnblogs.com/xinghh/p/3979230.html