03- jQuery事件处理和动画效果

1. jQuery的事件处理

1.1 绑定事件处理函数

on()

将一个或多个事件的处理方法绑定到被选择的元素上。on()方法适用于当前或未来的元素，如用脚本创建的新元素。

$(selector).on(event,childSelector,data,function)
参数描述
event必需。规定要从被选元素添加的一个或多个事件或命名空间。 由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身）。
data可选。规定传递到函数的额外数据。
function可选。规定当事件发生时运行的函数。

one()

给元素注册只监听一次的事件处理函数。一旦事件处理函数执行后，就会自动删除。

回忆事件绑定

鼠标事件键盘事件表单事件页面事件
clickkeydownblurload
dblclickkeypressfocusunload(页面关闭)
mousedownkeyupsubmitresize
mouseupchangescroll
mousemoveinput
mouseover
mouseout
mouseenter(不支持冒泡)
mouseleave(不支持冒泡)

1.2 解绑事件处理函数

off()

移除事件处理函数。

1.3 触发事件

trigger( type)

type： 一个事件对象或者要触发的事件类型。

$("#btn").click(function(){alert("xxx");
}).trigger("click");

1.4 鼠标事件

支持鼠标事件事件语法
click$(selector).click(function)
dblclick$(selector).dblclick(function)
mousedown$(selector).mousedown(function)
mouseup$(selector).mouseup(function)
mousemove$(selector).mousemove(function)
mouseover$(selector).mouseover(function)
mouseout$(selector).mouseout(function)
mouseenter(不支持冒泡)$(selector).mouseenter(function)
mouseleave(不支持冒泡)$(selector).mouseleave(function)
hover$(selector).hover(inFunction, outFunction)

hover(inFunction, outFunction)

功能描述：该事件是mouseenter()和mouseleave()方法的简写形式。

参数说明：

  • inFunction: 表示鼠标刚进入元素边界时要执行的函数。

  • outFunction: 表示鼠标刚离开元素边界时要执行的函数。

$("#box1").hover(function (event) {console.log(event.type+"我进了边界！");},function (event) {console.log(event.type+"我出了边界！");
});

1.5 键盘事件

支持鼠标事件事件语法
keydown$(selector).keydown(function)
keypress$(selector).keypress(function)
keyup$(selector).keyup(function)

1.6 表单事件

支持表单事件事件语法
focus$(selector).focus(function)
blur$(selector).blur(function)
change$(selector).change(function)
submit$(selector).submit(function)

注意:不支持input事件等

1.7 窗口事件

支持窗口事件事件语法
load$(selector).load(function)
unload$(selector).unload(function)
resize$(selector).resize(function)
scroll$(selector).scroll(function)

2. jQuery的动画效果

2.1 显示与隐藏效果

show(speed, easing, callback)

功能描述：显示隐藏的匹配元素

参数说明：

  • speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”(600)、“fast(200)”。

  • easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

  • callback: 可选。表示动画执行完毕后的回调函数

$("div").show(3000);

hide(speed, easing, callback)

功能描述：隐藏显示的元素

参数说明：

  • speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

  • easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

  • callback: 可选。表示动画执行完毕后的回调函数

$("div").hide(3000, function(){alert("xxx");
});

toggle(speed, easing, callback)

功能描述：在被选元素上进行 hide() 和 show() 之间的切换。

参数说明：

  • speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

  • easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

  • callback: 可选。表示动画执行完毕后的回调函数

$("div").toggle("slow", function() {console.log("切换完成");
});

2.2 淡入淡出效果

fadeIn(speed, easing, callback)

淡入

  • speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

  • easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

  • callback: 可选。表示动画执行完毕后的回调函数

$("div").fadeIn(3000);

fadeOut(speed, easing, callback)

淡出

  • speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

  • easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

  • callback: 可选。表示动画执行完毕后的回调函数

$("div").fadeOut(3000);

fadeTo(speed, opacity, easing, callback)

将被选元素的透明度逐渐地改变为指定的值

  • speed: 必需。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

  • opacity: 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字

  • easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

  • callback: 可选。表示动画执行完毕后的回调函数

$("div").fadeTo('slow', 0.5);

fadeToggle(speed, easing, callback)

功能描述：在fadeIn()和fadeOut()两个方法之间切换。 参数说明：

  • speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

  • easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

  • callback: 可选。表示动画执行完毕后的回调函数

2.3 滑动效果

slideDown(speed, easing, callback)

向下展开动态显示元素。

参数说明：

  • speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

  • easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

  • callback: 可选。表示动画执行完毕后的回调函数

slideUp(speed, easing, callback)

向上关闭隐藏元素。

参数说明：

  • speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

  • easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

  • callback: 可选。表示动画执行完毕后的回调函数

slideToggle(speed, easing, callback)

功能描述：在关闭和展开之间切换。

参数说明：

  • speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

  • easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

  • callback: 可选。表示动画执行完毕后的回调函数

2.4 自定义动画效果

animate(properties,speed, easing, callback)

  • properties: 必须。设置相关动画需要的CSS的属性内容。

  • speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、 ("slow","normal", or "fast"。

  • easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

  • callback: 可选。表示动画执行完毕后的回调函数

$("div").animate({width : 100,height : 100,top : 500,left : 500},3000,function(){alert("xxx");
});

注意：有些CSS的属性不能使用

  • backgroundColor

  • borderColor

  • color

  • outlineColor

2.5 停止动画排队

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。 停止动画排队的方法为：stop() ;

  • stop() 方法用于停止动画或效果。

  • stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

    总结: 每次使用动画之前，先调用 stop() ,再调用动画。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/29510.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

计算机毕业设计Python+Flask弹幕情感分析 B站视频数据可视化 B站爬虫 机器学习 深度学习 人工智能 NLP文本分类 数据可视化 大数据毕业设计

计算机毕业设计Python+Flask弹幕情感分析 B站视频数据可视化 B站爬虫 机器学习 深度学习 人工智能 NLP文本分类 数据可视化 大数据毕业设计

首先安装需要的python库， 安装完之后利用navicat导入数据库文件bili100.sql到mysql中， 再在pycharm编译器中连接mysql数据库，并在设置文件中将密码修改成你的数据库密码。最后运行app.py，打开链接，即可运行。 B站爬虫数…
阅读更多...
大学物理实验分析

大学物理实验分析

终于整理完了 测量误差分类 天平未校准引起的误差 天平设计、制造、使用或环境因素引起偏差属于系统误差应定期校准天平 游标卡尺测量物体长度 读取主尺整毫米数读取副尺小数部分相加得出测量结果记录测量结果时保留适当小数位数可通过多次测量取平均值提高精确度注明单位…
阅读更多...
防泄密解决方案

防泄密解决方案

防泄密解决方案是一个系统性的策略，旨在保护敏感信息不被非法获取、泄露或滥用。以下是一个结构清晰、分点表示的防泄密解决方案，结合了参考文章中的关键信息和建议： 一、策略制定与政策明确 明确数据分类：将数据分为公开、内部…
阅读更多...
私有化地图离线部署方案之基础地图服务

私有化地图离线部署方案之基础地图服务

私有化地图离线部署整体解决方案，除硬件之外，一般主要由基础地图服务、地理逆编码服务、离线路径规划服务和海拔高程检索服务构成。 现在先为你分享基础地图服务，它是私有化地图离线部署的基础。 基础地图服务 基础地图服务是私有化离线部…
阅读更多...
升级gradle8.x无法编译aar上传maven without declaring an explit or implicit dependency

升级gradle8.x无法编译aar上传maven without declaring an explit or implicit dependency

修改好的代码maven-publish.gradle文件： apply plugin: maven-publish //上一层目录创建local.properties，里面放 //usernamexxxx //passwordxxxx//上一层目录创建或者已有gradle.properties，里面添加 //myGroup.idcom.xxx.android //mave…
阅读更多...
06文件和文件夹的操作

06文件和文件夹的操作

授课进程 一、文件操作 在操作的时候尽量选择Linux下面的/opt目录 使用ls -l 命令，相对简化的命令ll 在Linux中，ls -l是一个常用的命令，用于列出文件和目录的详细信息。下面是ls -l命令的一些常见选项和输出示例： ​ - 使用ls -…
阅读更多...
SQL Server入门-SSMS简单使用(2008R2版)-2

SQL Server入门-SSMS简单使用(2008R2版)-2

环境： win10，SQL Server 2008 R2 参考： SQL Server 管理套件（SSMS）_w3cschool https://www.w3cschool.cn/sqlserver/sqlserver-oe8928ks.html SQL Server存储过程_w3cschool https://www.w3cschool.cn/sqlserver/sql…
阅读更多...
2025年计算机毕业设计题目参考-简单容易

2025年计算机毕业设计题目参考-简单容易

2025年最新计算机毕业设计题目参考-第二批 以下可以参考 企业员工薪酬关系系统的设计 基于SpringBoot在线远程考试系统 SpringBootVue的乡政府管理系统 springboot青年公寓服务平台 springboot大学生就业需求分析系统 基于Spring Boot的疗养院管理系统 基于SpringBoot的房屋交…
阅读更多...
vue3实现div盒子的内容hover上去时样式改变及部分元素的显隐

vue3实现div盒子的内容hover上去时样式改变及部分元素的显隐

样式&#xff1a; hover后的样式&#xff1a; 整体盒子的背景颜色发生了改变&#xff0c;盒子内边距发生了改变&#xff0c;右下侧的箭头出现 实现方式&#xff1a; 利用mouseover和mouseout并结合css样式实现 template中&#xff1a; <divclass"new-item"v-f…
阅读更多...
动手学深度学习（Pytorch版）代码实践 -深度学习基础-13Kaggle竞赛：2020加州房价预测

动手学深度学习（Pytorch版）代码实践 -深度学习基础-13Kaggle竞赛：2020加州房价预测

13Kaggle竞赛&#xff1a;2020加州房价预测 # 导入所需的库 import numpy as np import pandas as pd import torch import hashlib import os import tarfile import zipfile import requests from torch import nn from d2l import torch as d2l# 读取训练和测试数据 train_…
阅读更多...
电脑数据恢复，掌握4个方法，恢复数据很简单！

电脑数据恢复，掌握4个方法，恢复数据很简单！

在数字化浪潮席卷全球的今天&#xff0c;电脑数据已成为我们生活与工作中不可或缺的一部分。然而&#xff0c;当这些数据因各种原因意外丢失或损坏时&#xff0c;那种失落与无助的感觉常常令人倍感焦虑。 想象一下&#xff0c;你正在为一项重要项目加班加点&#xff0c;突然电…
阅读更多...
家用洗地机哪个牌子的质量最好最耐用？四款出色机型推荐

家用洗地机哪个牌子的质量最好最耐用？四款出色机型推荐

在清洁家电市场迅猛发展的今天&#xff0c;洗地机深度清洁效果和高效便捷性&#xff0c;成为家庭地面清洁的首选。然而&#xff0c;随着洗地机的普及&#xff0c;各大家电品牌纷纷推出洗地机产品&#xff0c;竞争日益激烈。那么&#xff0c;如何在众多洗地机中&#xff0c;挑选…
阅读更多...
30. 光纤耦合器

30. 光纤耦合器

导论&#xff1a; 物理光学传播&#xff08;POP&#xff09;可用于计算光纤耦合效率。 设计流程&#xff1a; 光束建模和聚焦 在系统选项中选择系统孔径&#xff0c;在系统孔径下选择“入瞳直径”&#xff0c;并输入“4”。 设置0视场&#xff0c;选择角度。 加入1um波长。…
阅读更多...
【vue】form表单提交validate验证不进valid原因

【vue】form表单提交validate验证不进valid原因

目录 1. 原因 1. 原因 1.<el-form>是否写了ref“form”。2.是否有其它标签写了ref“form”。3.<el-form>中要写成:model&#xff0c;不能使用v-model。4.自定义的validate要各个路径均能返回callback()。 const validatePass (rule, value, callback) > {if (…
阅读更多...
基于JSP的房屋租赁系统

基于JSP的房屋租赁系统

开头语&#xff1a; 你好&#xff0c;我是专注于计算机科学与技术研究的学长。如果你对房屋租赁系统感兴趣或有相关开发需求&#xff0c;欢迎联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;JSPJavaBeansServlet 工具&#xff1a;MyEclipse、…
阅读更多...
Ubuntu 22.04 一键安装 Oracle 19C 单机

Ubuntu 22.04 一键安装 Oracle 19C 单机

前言 Oracle 一键安装脚本&#xff0c;演示华为 Ubuntu 22.04 一键安装 Oracle 19C 单机版过程&#xff08;全程无需人工干预&#xff09;。 ⭐️ 脚本下载地址&#xff1a;Shell脚本安装Oracle数据库 安装准备 1、安装好操作系统&#xff0c;建议安装图形化2、配置好网络3、…
阅读更多...
【Cubicity】Blender商城10周年免费领取礼物Lowpoly风格城市环境资产素材库资产浏览器快速挑选模型搭建场景

【Cubicity】Blender商城10周年免费领取礼物Lowpoly风格城市环境资产素材库资产浏览器快速挑选模型搭建场景

6月18号的限时免费Blender插件资产来了&#xff0c;是一款可以利用模型资产库创建自己的城市环境的工具。 Blender商城10周年免费领取礼物&#xff1a;https://blendermarket.com/birthday Cubicity&#xff1a;使用 Blender 创建和利用资源库 Blender 的最新功能之一是 Asse…
阅读更多...
计算机专业毕业设计之网课敏感词监控系统实现介绍

计算机专业毕业设计之网课敏感词监控系统实现介绍

系统简介&#xff1a; 本系统通过web页面实时监控网课学生上课的发言内容&#xff0c;对语音进行实时转写&#xff0c;并判断语音内容是否包含敏感词或者违禁词&#xff0c;对出现的敏感词或者违禁词在页面进行显示&#xff0c;方便老师对学生上课期间的行为进行监控。 系统技…
阅读更多...
计算机专业毕设-校园二手交易平台

计算机专业毕设-校园二手交易平台

1 项目介绍 基于SpringBoot的校园二手交易平台&#xff1a;前端Freemarker&#xff0c;后端 SpringBoot、Jpa&#xff0c;系统用户分为两类&#xff0c;管理员、学生&#xff0c;具体功能如下&#xff1a; 管理员&#xff1a; 基本功能&#xff1a;登录、修改个人信息、修改…
阅读更多...
Eigne库安装及使用教程

Eigne库安装及使用教程

文章目录 1.Eigne库介绍2.Eigne库安装3.Eigne库使用4.some examples5.参考文献 1.Eigne库介绍 Eigen是可以用来进行线性代数、矩阵、向量操作等运算的C库&#xff0c;它里面包含了很多算法。它的License是MPL2。它支持多平台。 Eigen采用源码的方式提供给用户使用&#xff0c;在…
阅读更多...
最新文章

Copyright @ 2022~2023