jQuery事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。例如： "当您按下按键时触发 keypress 事件"。
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$("div").click(function(){ ???// 动作触发后执行的代码!!});当div元素被点击时将会发生function函数中写入的动作。
常用的jQuery事件有click：
当p元素被点击时，将该p元素隐藏
$("p").click(function(){ ?$(this).hide();});dblclick()
当p元素被双击时，p元素隐藏
$("p").dblclick(function(){ ?$(this).hide();});mouseenter()
该事件为鼠标指针穿过元素时才会出现，而mousehover则是鼠标移上该元素的任何一个子元素都会出现事件。
$("#p1").mouseenter(function(){ ???alert(‘您的鼠标移到了 id="p1" 的元素上!‘);});focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
$("input").focus(function(){ ?$(this).css("background-color","#cccccc");});blur()
当元素失去焦点时，发生 blur 事件。
$("input").blur(function(){ ?$(this).css("background-color","#ffffff");});jQuery有显示、隐藏、切换，滑动，淡入淡出，动画等。
显示与隐藏
.show与.hide
$("#hide").click(function(){ ?$("p").hide(1000);//其中1000为速度，1000毫秒}); $("#show").click(function(){ ?$("p").show(fast); //速度});使用.show( )与.hide( ) 来将p元素实现显示与隐藏。
toggle( )可以切换显示与隐藏效果。
$("button").click(function(){ ?$("p").toggle(slow);});jQuery 拥有下面四种 fade 方法：
fade in ( ) 淡入
$("button").click(function(){ ?$("#div1").fadeIn(); ?$("#div2").fadeIn("slow"); ?$("#div3").fadeIn(3000);});fade out( ) 淡出
$("button").click(function(){ ?$("#div1").fadeOut(); ?$("#div2").fadeOut("slow"); ?$("#div3").fadeOut(3000);});fade toggle ( ) 切换淡入淡出效果
$("button").click(function(){ ?$("#div1").fadeToggle(); ?$("#div2").fadeToggle("slow"); ?$("#div3").fadeToggle(3000);});fade to ( )
jQuery fade to ( ) 允许渐变给不同的透明度 （0~1）。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间 ，可取0，但不可以取1）。
$("button").click(function(){ ?$("#div1").fadeTo("slow",0.15); ?$("#div2").fadeTo("slow",0.4); ?$("#div3").fadeTo("slow",0.7);});jQuery 拥有以下滑动方法：
slideDown()
jQuery slideDown() 方法用于向下滑动元素。
$("#flip").click(function(){ ?$("#panel").slideDown();});点击id为flip的div将id为panel的div划出
slideUp()
jQuery slideDown() 方法用于向上滑动元素。
$("#flip").click(function(){ ?$("#panel").slideUp();});slideToggle()
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
$("#flip").click(function(){ ?$("#panel").slideToggle();});jQuery animate() 方法用于创建自定义动画。
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
$(document).ready(function(){ ?$("button").click(function(){ ???$("div").animate({ ?????left:‘250px‘, ?????opacity:‘0.5‘, ?????height:‘150px‘, ?????width:‘150px‘ ???}); ?});});jQuery animate( ) 也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
$("button").click(function(){ ?$("div").animate({ ???left:‘250px‘, ???height:‘+=150px‘, ???width:‘+=150px‘ ?});});jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
$("#stop").click(function(){ ?$("#panel").stop();});Callback 函数在当前动画 100% 完成之后执行。
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
例子：$("p").hide("slow")
speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。
例：在隐藏效果结束后实现回调函数。
$("button").click(function(){ ?$("p").hide("slow",function(){ ???alert("段落现在被隐藏了"); ?});});若没有回调函数，则在隐藏效果开始前就弹出。
jQuery链
通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);上面将css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：
jQuery的事件与效果
原文地址：https://www.cnblogs.com/time-to-despair/p/9612907.html