jQuery的事件与效果

Posted 2021-01-05 time-to-despair

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" 元素首先会变为红色，然后向上滑动，再然后向下滑动：