首页 > 其他分享 >前端——jQuery中的事件与动画

前端——jQuery中的事件与动画

时间:2024-07-31 10:58:23浏览次数:9  
标签:jQuery 动画 鼠标 前端 元素 事件 speed 选择器 fn

jQuery 事件


事件组成


在 jQuery 中,一个事件由事件主体、事件类型、事件处理函数三个部分组成。
// 实现事件
$("#button").click(function(){
//...

})
// 调用事件
$("#button").click();


鼠标事件


常用的鼠标事件方法

方法                                                                           描述
click()                        鼠标单击时执行。
mouseover()             鼠标指针移入时执行。会产生事件冒泡,会从最具体的元素向上级元素触                                       发。
mouseout()               鼠标指针移出时执行。会产生事件冒泡,会从最具体的元素向上级元素触                                       发,
mouseenter()         鼠标指针进入时执行。会产生事件捕获,会先在父元素上触发,然后向下传播

                                 到子元素。
mouseleave()         鼠标指针离开时执行。会产生事件捕获,会先在父元素上触发,然后向下传播到子元素

键盘事件


常见的键盘事件方法
方法                             描述
keydown()        键盘按下按键时执行
keyup()             键盘按键释放时执行。
keypress()        产生可打印的字符(如字母、数字、符号等)时执行。

表单事件


常见的表单事件方法
方法                                描述
focus()                 元素获得焦点时执行
blur ()                   元素失去焦点时执行
change()              元素的值发生改变时执行
submit()               <form>表单提交时执行
 

绑定事件


on()方法用于为指定元素绑定一个或多个事件处理程序。bind()方法也可以用于绑定事件,但在 jQuery 3.x中已经被官方废除。

绑定事件的基本用法
$(选择器).on(绑定的事件名称,事件处理函数

移除事件


off()方法用于从指定元素上移除一个或多个事件处理程序unbind()方法也可以用于移除事件,但在 jQuery 3.x中已经被官方移除

移除事件的基本用法
$(选择器).off(移除的事件名称)


复合事件


hover ()是一个复合事件方法,用于模拟鼠标指针进入和离开事件,相当于 mouseenter 和mouseleave事件的组公体。

复合事件的基本用法
$(选择器).hover(鼠标进入时执行函数,鼠标移出时执行函数)

jQuery 动画


控制元素显示和隐藏


show()方法用于控制元素的显示,hide()方法用于控制元素的隐藏。

元素的显示和隐藏,实际上是操作元素的 display 样式属性。

控制元素显示和隐藏的基本用法
//显示
$(选择器).show([speed][,easing][,fn])
// 隐藏
$(选择器).hide([speed][,easing][,fn])
参数                                                                      描述
speed        可选参数,规定显示效果的速度数值:单位为毫秒。slow 慢速、normal正常、fast 快速:
easing       可选参数,规定在动画的不同点上元素的速度,swing:默认值,在开头/结尾慢,在中间

                  快。linear;匀速运动。
fn               可选参数,规定动画完成之后要执行的方法


改变元素透明度


fadeIn()方法和 fade0ut()方法可以通过改变元素的透明度实现淡入淡出效果。

改变元素透明度的基本用法
// 淡入
$("选择器").fadeIn([speed][,easing][,fn]);
D// 淡出
$("选择器").fadeout([speed][,easing][,fn]);

改变元素高度


slideDown()方法用于让元素的高度逐步延伸显示,

slideUp()方法用于让元素的高度逐步缩短直至隐藏。

改变元素高度的基本用法
// 展开
$("选择器").slideDown([speed][,easing][,fn]);
//收缩
$("选择器").slideup([speed][,easing][,fn]);

自定义动画


animate()方法用于创建自定义动画。
自定义动画的基本用法
$(选择器).animate({params}[,speed][,fn]);
animate()方法常见的参数
参数                              描述
params        定义形成动画的CSS属性对象
speed          可选参数,规定动画效果的时长
fn                 可选参数,动画完成后执行的函数。

标签:jQuery,动画,鼠标,前端,元素,事件,speed,选择器,fn
From: https://blog.csdn.net/m0_74098588/article/details/140816756

相关文章

  • 沙雕动画制作技术与创意表达研究
    摘要:沙雕动画作为一种新兴的动画形式,以其幽默、调侃的特点受到广泛关注。本文旨在探讨沙雕动画的制作技术、创意表达及其在不同领域的应用。1.沙雕动画概述:沙雕动画是一种利用表情包式人物制作的动画,通过搞笑、幽默的表现形式传达轻松愉快的情绪。2.沙雕动画的应用领域:......
  • 这本vue3编译原理开源电子书,初中级前端竟然都能看懂
    前言众所周知vue提供了很多黑魔法,比如单文件组件(SFC)、指令、宏函数、cssscoped等。这些都是vue提供的开箱即用的功能,大家平时用这些黑魔法的时候有没有疑惑过一些疑问呢。我们每天写的vue代码一般都是写在*.vue文件中,但是浏览器却只认识html、css、js等文件类型,明显是不认......
  • Nginx部署前端环境(Mac)
    Nginx部署前端环境(Mac)常用命令#启动nginxsudonginx#检查nginx是否已经启动成功ps-ef|grepnginx#如果显示有以下内容,说明启动成功nginx:masterprocessnginx:workerprocess#查看端口号占用lsof-i:端口号#如果什么都没显示,说明端口没有被占用#查看nginx.......
  • 前端练习<Html&CSS>——照片墙(附完整代码及实现效果)
    这个小练习也来源于b站up小K师兄,大家可以通过下面的链接学习哦~up讲的非常详细。纯CSS写一个简单酷炫的照片墙效果~先看一下这个照片墙的效果:1.鼠标没有放到图片上时,照片同比例,每张照片都有倒影的效果。2.然后是鼠标放置图片上的效果,图片被放大,其他照片旋转缩放,这里需要注......
  • 微信小程序开发中的动画效果和页面过渡
    微信小程序的动画效果和页面过渡可以通过使用wx.createAnimation()方法来实现。wx.createAnimation()可以创建一个Animation对象,然后我们可以通过该对象调用不同的方法来控制动画的效果和过渡。下面我将详细介绍动画效果和页面过渡的常用方法和案例代码。在开始之前,请确保已经......
  • 利用DYNAMIXEL智能伺服舵机从《传送门2》中打造一个更优质的动画机器人小麦克利(Wheatl
    原文链接:https://www.youtube.com/watch?v=OEn9hZ-Tw1E   这段视频由ROBOTIS提供!大家好,我想给大家推荐一个精彩视频,在视频中展示了如何制作《传送门2》中的动画机器人小麦克利(Wheatley)。看看是如何利用DYNAMIXEL智能伺服系统让小麦克利活起来的。  对于那些可能想设......
  • unity2D游戏开发16弹弓动画
    清理动画器选中PlayerObject,打开Animator,删除原来的四个状态右键选择CreateState|fromNewBlendTree;冲命名为WalkTree双击WalkTree查看BlendTreeGraph设置属性为2DSimpleDirectional,再点击加号选择AddMotionField添加四个,如图点击BaseLayer......
  • 【Vue3】前端使用JWT令牌技术的实践方案
    目录技术介绍简单介绍:详细介绍:操作流程1.后端在登录响应里返回jwt2.前端将该变量存入浏览器当中3.前端使用jwt请求的时候作为请求头解码令牌内信息技术介绍简单介绍:        JWT令牌是一种用户校验机制,在登录后服务器会返回用户一个JWT令牌(相当于门票),用......
  • 上传多个图像时 React 前端和 Flask 后端出现 CORS 策略错误
    实际上,我已经在reactJs中制作了前端,在pythonFlask中制作了后端(使用cnn模型进行一些预测)。当我按照我的请求发送5到6张图像时,它工作正常,但是当我发送10到15张图像和一些时间时令人筋疲力尽,然后它给出了类似的错误,尽管我在下面给出的代码中设置了Cors:192.168.151.24/:1Accesst......
  • 前端Vue组件化实践:打造灵活可维护的地址管理组件
    随着前端技术的不断演进,复杂度和开发难度也随之上升。传统的一体化开发模式使得每次小小的修改或功能增加都可能牵一发而动全身,严重影响了开发效率和维护成本。组件化开发作为一种解决方案,通过模块化、独立化的开发方式,实现了单独开发、单独维护,并允许组件间的自由组合,从而极大......