1.jQuery事件是对JavaScript事件的封装

2.基础事件分为鼠标事件、键盘事件、window事件、表单事件

复合事件：鼠标光标悬停、鼠标连续点击

1）鼠标事件：

当用户在文档上移动或单击鼠标时而产生的事件

常用的鼠标事件：

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

鼠标事件方法的区别

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

2）键盘事件：

用户每次按下或者释放键盘上的键时都会产生事件

常用的键盘事件：

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

3）绑定事件：

使用bind（）方法

语法：bind(type,[data],fn);

绑定单个事件

$(document).ready(function(){
         $(".on").bind("mouseover",function(){
                      $(".topDown").show();
        });
});

同时绑定多个事件

$(".top-m .on").bind({
     mouseover:function(){
          $(".topDown").show();
},
mouseout:function(){
    $(".topDown").hide();
}
});

移除事件使用unbind（）方法

语法：unbind([type],[fn])

当unbind()不带参数时，表示移除所绑定的全部事件

示例：

$("#del").click(function(){
        $("#nav li:first").unbind("click", content1)
});

4）复合事件

hover( ) 可以理解为mouseover与mouseout事件的组合

语法：hover（enter，leave）；

$(".top-m .on").hover(function(){
    $(".topDown").show();
          },
         function(){
     $(".topDown").hide();
         }
);

toggle( ) 不带参数时，相当于show( )和hide( )方法的作用

toggle( )方法用于模拟鼠标连续click事件

语法：toggle(fn1,fn2,...,fnN)

$("input").toggle(
        function(){$("body").css("background","#ff0000");},
         function(){$("body").css("background","#00ff00");},
          function(){$("body").css("background","#0000ff");}
    )

hover( )方法相当于mouseover与mouseout事件的组合

toggle( )方法用于模拟鼠标连续click事件

toggleClass（）可以对样式进行切换

3.toggle( )和toggleClass( )总结

toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定click事件

toggle( )实现对象在显示和隐藏状态之间切换

toggleClass( )实现对象在添加样式和移除样式之间切换

jQuery动画效果

1.控制元素的显示和隐藏

show()控制元素的显示，hide()控制元素的隐藏

语法$(seleector).show(参数，执行函数)；

$(sleector).hide(参数，执行函数)；执行函数根据需要添加，参数以毫秒为单位，可以写slow，normal，fast

2.改变元素的透明度

其实也就是淡出淡入的时间控制，

语法：
$(selector).fadeIn(参数，执行参数)；

$(selector).fadeOut(参数，执行参数)；执行函数根据需要添加，参数以毫秒为单位，可以写slow，normal，fast

3.改变元素的高度

slideDown()可以使元素逐步延伸显示

slideUp()可以使元素缩短直到隐藏

语法

$(selector).slideUp ([speed],[callback]);

$(selector).slideDown ([speed],[callback]);

4.自定义动画

这个其实就是通过一个特定的语法使一个东西动起来，它的语法是

$(selector).animate({params,speed,callback});

5.对比fadeIn()与show(),slideDown()的区别

.show('duration')和.hide('duration') 是长度、宽度、透明度三个属性一起变化；

fadeIn()/fodeOut是设置好了盒子的尺寸，变化透明度(所以用户看到页面会跳一下)；

slideDown()/slideUp() 仅改变元素的高度；（过渡自然）

hide()隐藏区域块
show()隐藏区域块    
slideUp()通过高度变化（向上减小）来动态地隐藏区域块    
slideDown()通过高度变化（向下增大）来动态地显示区域块  
slideToggle()通过高度变化来切换区域块的可见性   
fadeOut()通过不透明度的变化来实现淡出块    
fadeIn()通过不透明度的变化来实现淡入块   
fadeToggle()通过不透明度的变化淡入和淡出块  
fadeTo()通过不透明度以渐进方式调整块到指定的不透明度（0.4）    
animate()通过制定自定义动画操作

6.show()和hide()方法用于显示或隐藏页面中的元素

格式：$(selector).hide(speed,[callback])和$(selector).show(speed,[callback]

参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名，同时，如果添加了方法的回调函数，它将在显示或隐藏执行成功后被调用。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>鼠标滑过</title>
  <style>
    *{margin:0;padding:0;}    
    body { font-size: 13px; line-height: 130%; padding: 20px }
    #panel { width: 300px; border: 1px solid #0050D0 }
    .head { height:30px;line-height:30px;text-indent:10px;background: #daa520; cursor: pointer;width:100%;color: #fff; }
    .content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block;display:none; }
  </style>
 </head>
 <body>
    <div id="panel">
        <h5 class="head">什么是jQuery?</h5>
        <div class="content">
            jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
        </div>
    </div>
    <script src="js/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#panel .head").mouseover(function(){
                 $(this).next().show(1600);
            })
            $("#panel .head").mouseout(function(){
                 $(this).next().hide(2600);
            })
        })
    </script>
 </body>
</html>

7.mouseover和mouseenter的区别

mouseover事件会冒泡，这意味着，鼠标移到其后代元素上时会触发。

mouseenter事件不冒泡，这意味着，鼠标移到其后代元素上时不会触发

8.mouseover和mousemove的区别

一般情况下mouseover即可，特殊情况才用mousemove，mousemove更耗资源，比如要监控鼠标坐标的变化等。

posted on 2020-06-29 19:38 中国姑娘F 阅读(128) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

公告