jQuery中的事件与动画

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/ChenBiZ/article/details/80814841

本章目标

使用常用简单事件制作网页特效
使用鼠标事件制作主导航特效
使用hover( )方法制作下拉菜单特效

使用鼠标事件及动画制作页面特效

网页中的事件

和WinForm一样，在网页中的交互也是需要事件来实现的，例如tab切换效果，可以通过鼠标单击事件来实现

jQuery中的事件

基础事件
    鼠标事件
    键盘事件
    window事件

    表单事件

复合事件
    鼠标光标悬停

    鼠标连续点击

鼠标事件

条件	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件
mouseover( )	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseout( )	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时
mouseenter( )	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入
mouseleave( )	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

示例：

//使用mouseover事件给导航项目改变背景颜色
$(".nav-ul a").mouseover(function() {
       $(this).css("background-color","#f01e28");
   })

//使用mouseout事件给导航项目还原背景颜色
$(".nav-ul a").mouseout(function(){
   $(this).css("background-color","#ff2832");
})

鼠标事件方法的区别

方法	相同点	不同点
mouseover( ) mouseenter( )	鼠标进入被选元素时会触发	鼠标在其被选元素的子元素上来回进入时： 触发mouseover( ) 不触发mouseenter
mouseout( )  mouseleave( )	鼠标离开被选元素时会触发	鼠标在其被选元素的子元素上来回离开时： 触发mouseout 不触发mouseleave

键盘事件

方法	描述	执行时机
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress( )	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

示例：

$(document).ready(function () {
   $("[type=password]").keydown(function(){
      //append方法是在被选元素内部插入指定内容
      $("#events").append("keydown")
   }).keyup(function() {
      $("#events").append("keyup")
   }).keypress(function(){
      $("#events").append("keypress")
   })

$(document).keydown(function(event) {
console.log(event);

  <span style="color: rgb(0, 0, 128); --darkreader-inline-color:#000073;" data-darkreader-inline-color=""><strong>if</strong></span>(event.<span style="color: rgb(102, 14, 122); --darkreader-inline-color:#5c0d6e;" data-darkreader-inline-color=""><strong>keyCode </strong></span>== <span style="color: rgb(0, 0, 255); --darkreader-inline-color:#0000e6;" data-darkreader-inline-color="">13</span>) {
           <span style="color: rgb(122, 122, 67); --darkreader-inline-color:#545556;" data-darkreader-inline-color="">alert </span>(<span style="color: rgb(0, 128, 0); --darkreader-inline-color:#007300;" data-darkreader-inline-color=""><strong>"确认要提交吗？"</strong></span>)
  }

})
});

浏览器事件

语法：KaTeX parse error: Expected 'EOF', got '&' at position 105: …="font-family: &̲quot;宋体"; …(document).ready(function(){
KaTeX parse error: Expected '}', got 'EOF' at end of input: …pre;"> </span>(".topDown").show();
});
});

绑定多个事件

示例：

KaTeX parse error: Expected '}', got 'EOF' at end of input: …pre;"> </span>(".topDown").show();
},
mouseout:function(){
KaTeX parse error: Expected 'EOF', got '}' at position 64: …:pre;"> </span>}̲<br>});</span><…(".topDown").show();
          },
         function(){
KaTeX parse error: Expected 'EOF', got '&' at position 25: …n").hide();<br>&̲nbsp; &nbsp; &n…(“input”).toggle(
        function(){KaTeX parse error: Expected 'EOF', got '#' at position 28: …("background","#̲ff0000");},<br>…(“body”).css(“background”,"#00ff00");},
        function(){KaTeX parse error: Expected 'EOF', got '#' at position 28: …("background","#̲0000ff");}<br>&…(“input”).click(function(){KaTeX parse error: Expected 'EOF', got '}' at position 26: …leClass("red");}̲)</span></stron…(selector).show([speed],[callback])
   KaTeX parse error: Expected 'EOF', got '&' at position 333: …="font-family: &̲quot;宋体&quot;; …(selector).fadeIn([speed],[callback])
   KaTeX parse error: Expected 'EOF', got '&' at position 152: …="font-family: &̲quot;宋体&quot;; …(selector).slideUp ([speed],[callback])
`  $(selector).slideDown([speed],[callback])</span></strong></p><pstyle="font-family{:}^{\prime }宋{体}^{\prime };"><spanstyle="font-size:16px;"><strong>示例：</strong></span></p><pstyle="font-family{:}^{\prime }宋{体}^{\prime };"><spanstyle="font-size:16px;"><strong>$(document).ready(function() {
       $(“h2”).click(function(){
  $(".txt").slideUp(“slow”);
  KaTeX parse error: Expected 'EOF', got '&' at position 32: …wn("slow");<br>&̲nbsp; &nbsp; &n…(selector). animate({params},speed,callback)

params:必须，定义形成动画的css属性

speed:可选,规定效果时长，取值：毫秒、fast、slow

callback:可选，滑动完成后执行的函数名称

总结：