JQuery的事件处理和动画效果

1.jQuery的事件处理

1.1.文档加载事件

.ready(fn)
$(document).ready(function(){
//编写代码
});

与window.onload方法的区别

执行时间

window.onload方法是在页面中所有的DOM元素（包括元素的所有关联文件）完全加载到浏览器后才执行。

通过$(document).ready()方法注册的事件处理函数，只要DOM元素加载完成就可以执行，不管元素所关联的文件是否加载完成。

多次使用

Window.onload事件只能添加一个回调函数。原因是JavaScript的onload事件一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数（相当于重新赋值），因此不能在现有的行为上添加新的行为。

Window.onload = function(){
alert(“two”); //不会执行
};
Window.onload = function(){
alert(“two”); //会执行
}

简写形式

$(function(){
//编写代码
});

()。当$()不带参数时，默认参数就是“document”，因此可以简写为：

$().ready(function(){
//编写代码
});

1.2.绑定事件处理函数

on()

将一个或多个事件的处理方法绑定到被选择的元素上。on()方法适用于当前或未来的元素，如用脚本创建的新元素。

参数说明:

events：字符串，一个或多个用空格分隔的事件类型。

selector：字符串，选择器

data：对象，传递给事件处理函数的数据，作为event.data的属性值存在。

handler：函数，事件处理函数。

用法一：on( events [, selector ] [, data ], handler )

用法二：on( events [, selector ] [, data ] )

$("a").on("click", {
      "food":"haha"
     }, function(event) {
       $("p").text(event.data.food);
})
one()

给元素注册只监听一次的事件处理函数。一旦事件处理函数执行后，就会自动删除。

参数说明:

events：字符串，一个或多个用空格分隔的事件类型。

selector：字符串，选择器

data：对象，传递给事件处理函数的数据，作为event.data的属性值存在。

handler：函数，事件处理函数。

用法一：one( events [, data ], handler ) 用法二：one( events [, selector ] [, data ], handler ) 用法三：one( events [, selector ] [, data ] )

支持多少事件名称

事件                  

blur    keydown    click    load      

focus    keypress    dblclick    unload      

focusin    keyup    mousedown    resize      

focusout        mouseup    scroll      

submit        mousemove    error      

change        mouseover          

select        mouseout          

       mouseenter          

       mouseleave        

1.3.解绑事件处理函数

off()

移除事件处理函数。

参数说明：

events：字符串，一个或多个以空格分隔的事件名称（想要移除的事件名称）。

selector：字符串，选择要移除哪些元素上的事件处理函数(必须和传入的DOM节点一致)。

handler：函数，想要移除的事件处理函数。

用法一：off( events [, selector ] [, handler ] ) 用法一：off( events [, selector ] ) 用法一：off( events ) 用法一：off()

$('p').off(); // 移除所有
$('p').off('click'); // 移除点击事件（而不会移除其他的事件）
$('body').off('click', $('p')，f1); // 移除点击事件,而且是p标签的，同时会移除f1函数（而不会移除其他的事件）

1.4.触发事件

trigger(eventType, extraParameters)

eventType：字符串，指定要模拟的事件名称。 extraParameters：数组或对象，传递给事件处理函数的附加参数。

$("#btn").click(function(){
    alert("xxx");
}).trigger("click");

1.5.键盘事件

keydown(Function)

功能描述：给键盘按下事件绑定处理函数。 参数说明： Function: 表示键盘按下时要执行的函数。

keypress(Function)

功能描述：给键盘被按着不放的事件绑定处理函数。 参数说明： Function: 表示键盘被按着不放时要执行的函数。

keyup(Function)

功能描述：给键盘弹起事件绑定处理函数。 参数说明： Function: 表示键盘弹起时要执行的函数。

$("input:eq(0)").keydown(function (event) {
  $(this).css("background-color", "red");
});
$("input:eq(1)").keypress(function (event) {
  $(this).css("background-color", "green");
});
$("input:eq(2)").keyup(function (event) {
  $(this).css("background-color", "blue");
});

1.6.鼠标事件

click(Function)

功能描述：给鼠标单击事件绑定处理函数。 参数说明： Function: 表示鼠标单击要执行的函数。

$("#box1").click(function (event) {
   console.log(event.type);
});
dblclick(Function)

功能描述：给鼠标双击事件绑定处理函数。 参数说明： Function: 表示鼠标双击要执行的函数。

$("#box1").dblclick(function (event) {
  console.log(event.type);
});
mousedown(Function)

功能描述：给鼠标按下的事件绑定处理函数。 参数说明： Function: 表示鼠标按下后要执行的函数。

$("#box1").mousedown(function (event) {
  console.log(event.type);
});
mouseup()

功能描述：给鼠标弹起的事件绑定处理函数。 参数说明： Function: 表示鼠标弹起后要执行的函数。

$("#box1").mouseup(function (event) {
   console.log(event.type);
});
mouseenter()

功能描述：给鼠标进入事件绑定处理函数。 参数说明： Function: 表示鼠标进入元素时要执行的函数。

$("#box1").mouseenter(function (event) {
  console.log(event.type+"我进了边界！");
});
mouseover()

功能描述：给鼠标进入到元素上的事件绑定处理函数。 参数说明： Function: 表示鼠标进入到元素上时要执行的函数。

$("#box1").mouseover(function (event) {
  console.log(event.type+"我在元素上了！");
});
mouseleave()

功能描述：给鼠标离开事件绑定处理函数。 参数说明： Function: 表示鼠标离开元素时要执行的函数。

$("#box1").mouseleave(function (event) {
  console.log(event.type+"我出了边界！");
});
mouseout()

功能描述：给鼠标离开后的事件绑定处理函数。 参数说明： Function: 表示鼠标离开元素后要执行的函数。

$("#box1").mouseout(function (event) {
   console.log(event.type+"我在元素外面了！");
});
mousemove()

功能描述：给鼠标在元素上移动的事件绑定处理函数。 参数说明： Function: 表示鼠标在元素上移动时要执行的函数。

$("#box1").mousemove(function (event) {
   console.log(event.type+"我在元素上移动了！");
});
hover(inFunction, outFunction)

功能描述：该事件是mouseenter()和mouseout()方法的简写形式。

参数说明：

inFunction: 表示鼠标刚进入元素边界时要执行的函数。

outFunction: 表示鼠标刚离开元素边界时要执行的函数。

$("#box1").hover(function (event) {
     console.log(event.type+"我进了边界！");
  },function (event) {
     console.log(event.type+"我出了边界！");
});

1.7. 表单事件

blur()
change()
focus()
focusin()
focusout()
select()
$('#uname').focusin(function(event){
console.log(event.type) // 焦点刚进入时触发
})
.focus(function(event){
console.log(event.type) // 已经获取焦点时触发
})
.focusout(function(event){
console.log(event.type) // 焦点刚要失去时触发
})
.blur(function(event){
console.log(event.type) // 失去焦点时触发
})
.change(function(event){
console.log(event.type) // 当输入框中的内容发生改变时，并失去焦点后触发
})
.select(function(){
console.log(event.type) // 当输入框中的内容被选中时触发
})
submit()
表单提交时会触发的事件
$('#main').submit(function(event){
console.log(event.type)
event.preventDefault();
// return false;
});

2.jQuery的动画效果

2.1.显示与隐藏效果

show(speed, easing, callback)

功能描述：显示隐藏的匹配元素

参数说明：

speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

callback: 可选。表示动画执行完毕后的回调函数

$("div").show(3000);
hide(speed, easing, callback)

功能描述：隐藏显示的元素

参数说明：

speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

callback: 可选。表示动画执行完毕后的回调函数

$("div").hide(3000, function(){
  alert("xxx");
});
toggle(speed, easing, callback)

功能描述：在被选元素上进行 hide() 和 show() 之间的切换。

参数说明：

speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

callback: 可选。表示动画执行完毕后的回调函数

$("div").toggle("slow", function() {
  console.log("切换完成");
});

2.2.自定义动画效果

animate(properties,speed, easing, callback)

properties: 必须。设置相关动画需要的CSS的属性内容。

speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

callback: 可选。表示动画执行完毕后的回调函数

$("div").animate({
    width : 100,
    height : 100,
    top : 500,
    left : 500
    },3000,function(){
    alert("xxx");
});

注意：有些CSS的属性不能使用

backgroundColor

borderBottomColor

borderLeftColor

borderRightColor

borderTopColor

color

outlineColor

2.3.淡入淡出效果

fadeIn(speed, easing, callback)

淡入 （隐藏）

speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

callback: 可选。表示动画执行完毕后的回调函数

$("div").fadeIn(3000);

fadeOut(speed, easing, callback)

淡出

speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

callback: 可选。表示动画执行完毕后的回调函数

$("div").fadeOut(3000);
fadeTo(speed, opacity, easing, callback)

将被选元素的透明度逐渐地改变为指定的值

speed: 必需。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

opacity: 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字

easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

callback: 可选。表示动画执行完毕后的回调函数

$("div").fadeTo('slow', 0.5);
fadeToggle(speed, easing, callback)

功能描述：在fadeIn()和fadeOut()两个方法之间切换。 参数说明：

speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

callback: 可选。表示动画执行完毕后的回调函数

2.4.滑动效果

slideDown(speed, easing, callback)

向下展开动态显示元素。

参数说明：

speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

callback: 可选。表示动画执行完毕后的回调函数

slideUp(speed, easing, callback)

向上关闭隐藏元素。

参数说明：

speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

callback: 可选。表示动画执行完毕后的回调函数

slideToggle(speed, easing, callback)

功能描述：在关闭和展开之间切换。

参数说明：

speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

callback: 可选。表示动画执行完毕后的回调函数