前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery(事件和动画-基础事件、复合事件)

jQuery(事件和动画-基础事件、复合事件)

作者头像
全栈开发日记
发布2022-05-12 21:00:15
1.4K0
发布2022-05-12 21:00:15
举报
文章被收录于专栏:全栈开发日记全栈开发日记

基础事件

click

对应 onclick 鼠标单击事件

dbclick

对应ondbclick 鼠标双击事件

mouseover

对应 onmouseover 鼠标移入事件

mouseout

对应 onmouseout 鼠标移出事件

mouseenter

对应onmouseenter鼠标进入事件

mouseleave

对应 onmouseleave鼠标离开事件

keyup

对应onkeyup 键盘弹起

keydown

对应onkeydown 键盘按下触发

keypress

对应onkeypress 鼠标产生可打印的字符时触发

$(window).resize()

窗口大小调整时触发的事件

注意:

mourseover和mourseenter都是鼠标移入元素时触发,不同点:mourseover无论鼠标移入被选元素 还是被选元素的子元素都会触发。mourseenter只有移入被选元素才会触发;

mourseout和mourseleave都是鼠标移除元素时触发。不同点:mourseout在移除被选元素的子元素 时也会被触发。mourseleave只有移出被选元素才会被触发。

复合事件

显示与隐藏

show

show(speed|function);

作用:将隐藏元素变为可见的(将display:none-->display:block),从左上角开始显示。

参数也可以直接写时间,单位是毫秒,不需要引号。

参数speed:定义显示的速度。

参数各属性:

slow慢慢的显示;

normal正常的显示;

fast快速的显示;

参数function:回调函数,当目标 元素全部显示完成后触发。

jQuery代码书写示例:

代码语言:javascript
复制
//慢慢的显示
function fun1() {
   $("#a").show("slow",function () {
       alert("显示完成了")
   });
}

hide

hide(speed|function);

与上一个show正好相反,将元素隐藏。

可参考show;

fadeIn

fadeIn(speed|function);

作用:将隐藏元素变为可见的(将display:none-->display:block),不同的是它通过调整透明度由浅变深来显示;

参数也可以直接写时间,单位是毫秒,不需要引号。

参数speed:定义显示的速度。

speed参数各属性:

slow慢慢的显示;

normal正常的显示;

fast快速的显示;

参数function:回调函数,当目标元素全部显示完成后触发。

代码参考上面show的代码。

fadeOut

fadeOut(speed|function);

通过调整透明度,隐藏元素。

与上一个fadeIn正好相反。可参考fadeIn;

slideDown

slideDown(speed|function)

作用:将隐藏元素变为可见的(将display:none-->display:block),通过调 整高度来显示

定义显示的速度,slow,normal,fast。function是回调函数,当目标 元素全部显示完成后触发。

代码参考上述例子。

slideUp

slideUp(speed|function);

通过调整高度来隐藏元素;

与上一个正好相反。

事件切换

hover

hover(over,out);

作用:一个模仿悬停事件(鼠标移动到一个对象上方及移出这个对象)的方法。这是一 个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。

当鼠标移出这个元素时,会触发 指定的第二个函数。

而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一 个常见错误)。

代码示例:

代码语言:javascript
复制
$(function(){
     $("#div0").hover(function(){
     alert('over');
},function(){
     alert('out');
  });
});
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-04-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 全栈开发日记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 基础事件
    • 注意:
    • 复合事件
      • 显示与隐藏
        • 事件切换
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档