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() 方法用于创建自定义动画.
$(selector).animate({params},speed,callback);
必需的 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" 元素首先会变为红色, 然后向上滑动, 再然后向下滑动:
来源: http://www.bubuko.com/infodetail-2761322.html