当前位置：首页 > news >正文

jQuery成功之路——jQuery事件和插件概述

news 2025/7/9 1:43:30

一、jQuery的事件

1.1常用事件

jQuery绑定事件，事件名字没有on。

事件名称	事件说明
blur	事件源失去焦点
click	单击事件源
change	内容改变
keydown	接受键盘上的所有键(键盘按下)
keypress	接受键盘上的部分键（ctrl,alt,shift等无效）(键盘按下)
keyup	键盘抬起
mouseover	鼠标悬停(鼠标移入)
mouseout	鼠标离开

1.2 on绑定事件

语法

jQuery元素对象.on(事件名称,function(){//逻辑代码
})

其中：事件名称是jQuery的事件方法的方法名称，例如：click、mouseover、mouseout、focus、blur等

代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){/*$("#btn").on("click",function(){alert("按钮被点击了!");});*/$("#btn").click(function(){alert("按钮被点击了!");});});</script></head><body><input id="btn" type="button" value="使用on绑定点击事件"></body>
</html>

代码效果

1.3 off解绑事件

语法

jQuery元素对象.off(事件名称);

其中：参数事件名称如果省略不写，可以解绑该jQuery对象上的所有事件

代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#btn-on").on("click",function(){alert("使用on绑定点击事件");});$("#btn-off").click(function(){$("#btn-on").off("click");});});</script></head><body><input id="btn-on" type="button" value="使用on绑定点击事件"><input id="btn-off" type="button" value="使用off解绑点击事件"></body>
</html>

代码效果

1.4 事件切换

普通写法

代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#myDiv").mouseover(function(){$(this).css("background","green");});$("#myDiv").mouseout(function(){$(this).css("background","red");});});</script></head><body><div id="myDiv" style="width:300px;height:300px;background:red">鼠标移入变成绿色，移出回复红色</div></body>
</html>

效果

链式写法

代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#myDiv").mouseover(function(){$(this).css("background","green");}).mouseout(function(){$(this).css("background","red");});});</script></head><body><div id="myDiv" style="width:300px;height:300px;background:red">鼠标移入变成绿色，移出回复红色</div></body>
</html>

效果

切换函数写法

语法

hover([over,]out)其中：over代表鼠标移入事件触发的函数；out代表鼠标移出事件触发的函数。

代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#myDiv").hover(function(){$(this).css("background","green");},function(){$(this).css("background","red");});});</script></head><body><div id="myDiv" style="width:300px;height:300px;background:red">鼠标移入变成绿色，移出回复红色</div></body>
</html>

效果

二、jQuery的插件

2.1jQuery的插件机制

jQuery插件机制概述

jQuery插件的机制很简单，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，扩展jQuery的功能。

jQuery插件机制语法

语法	解释
jQuery.fn.extend(object)	对jQuery对象进行方法扩展
jQuery.extend(object)	对jQuery全局进行方法扩展

对jQuery对象进行方法扩展

代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//普通方式--点击选中复选框function checkFn(){$("input[type='checkbox']").prop("checked",true);}//普通方式--点击取消复选框选中function uncheckFn(){$("input[type='checkbox']").prop("checked",false);}//对jQuery的函数进行扩展jQuery.fn.extend({//定义全选函数check:function(){$(":checkbox").prop("checked",true);},//定义全不全函数uncheck:function(){$(":checkbox").prop("checked",false);}});//插件方式--点击选中复选框function checkFn1(){//任何一个jQuery对象都可以调用$("#btn1-check").check();}//插件方式--点击选中复选框function uncheckFn2(){$("#btn-check").uncheck();}</script></head><body><input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()"><input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()"><br/><input type="checkbox" value="football">足球<input type="checkbox" value="basketball">篮球<input type="checkbox" value="volleyball">排球</body>
</html>

效果

对jQuery全局进行方法扩展

代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$.extend({//定义js对象的min属性，值是一个函数，返回a与b比较的最小值min: function(a, b) { return a < b ? a : b; },//定义js对象的max属性，值是一个函数，返回a与b比较的最大值max: function(a, b) { return a > b ? a : b; }});alert($.max(3,5));</script></head><body></body>
</html>

效果

2.2表单校验插件validator

表单校验插件概述

网络上有许多成熟的插件共使用者参考，插件就是将jquery实现的常用操作进行封装，封装后的“小框架“就可以叫做插件，按照插件的语法去操作可以实现很多复杂的功能，而我们需要做的是学会该插件的使用语法即可。表单校验插件是按照一定的语法编写代码，可以使用简单的代码完成复杂的表单校验工作。

表单校验插件的基本语法

开发步骤

下载jquery-validation插件
将该插件（也就是一个js文件）导入到我们的工程中
在要使用校验插件的html中引入该js文件
编写表单校验的代码（语法）
```
$("form表单的选择器").validate({rules:{表单项name值:校验规则，表单项name值:校验规则... ...},messages:{表单项name值:错误提示信息，表单项name值:错误提示信息... ...}
});
```
其中，rules是对表单项校验的规则，messages是对应的表单项校验失败后的错误提示信息。

注意，当错误提示信息不按照我们预想的位置显示时，我们可以按照如下方式进行设置自定义错误显示标签放在我们需要显示的位置，当此表单项验证不通过时会将此信息自动显示出来，jQuery验证插件会自动帮助我们控制它的显示与隐藏。
```
<lable for="html元素name值" class="error" style="display:none">错误信息</lable>
```
如果设置了错误lable标签就不必在messages中设置此表单项错误提示信息了。

常用的校验规则

表单校验插件自定义校验方法

如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则：

自定义校验规则步骤如下：

使用$.validator.addMethod("校验规则名称",function(value,element,params){});
在rules中通过校验规则名称使用校验规则
在messages中定义该规则对应的错误提示信息其中
- value是校验组件的value值
- element是校验组件的节点对象
- params是校验规则的参数

代码实现

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>我的jquery表单校验页面</title><style type="text/css">p{text-align: center;font-size:24px;}table{margin: 0 auto;border: 0;}table tr{height:40px;border:0;}table tr td{padding:0 14px;border:1px solid #999}.error{color:red}</style><script type="text/javascript" src="jquery-3.3.1.js"></script><script type="text/javascript" src="jquery.validate.js"></script><script type="text/javascript">$(function(){//自定义校验规则/** 参数：*  第一个 规则名称*  第二个 规则的实现逻辑 匿名函数*/$.validator.addMethod("cardlength",function(value,element,param){//校验输入的长度是否满足15或18if(value.trim().length!=param[0]&&value.trim().length!=param[1]){return false; //代表该校验器不通过  显示该校验规则对应的错误信息}return true;});$.validator.addMethod("card15",function(value,element,param){//校验15位的规则是否正确  --- 都是数字var regExp15 = /^[0-9]{15}$/;if(value.trim().length==15){//校验格式return regExp15.test(value.trim());}return true;//放行 不归该校验器校验 });$.validator.addMethod("card18",function(value,element,param){if(param){//校验15位的规则是否正确  --- 都是数字var regExp18 = /^[0-9]{18}|[0-9]{17}X$/;if(value.trim().length==18){//校验格式return regExp18.test(value.trim());}}return true;//放行 不归该校验器校验 });$("#empForm").validate({rules:{realname:"required",username:{required:true,rangelength:[5,8]},psw:{required:true,minlength:6,maxlength:12},psw2:{required:true,minlength:6,maxlength:12,equalTo:"#psw"},gender:{required:true},age:{required:true,range:[26,50]},edu:{required:true},birthday:{required:true,dateISO:true,date:true},checkbox1:{required:true},email:{email:true},card:{required:true,cardlength:[15,18],card15:true,card18:true}},messages:{realname:"真实姓名必须写",username:{required:"用户名必须写",rangelength:"长度在5-8之间"},psw:{required:"密码必须写",minlength:"最小是6位",maxlength:"最大是12位"},psw2:{required:"密码必须写",minlength:"最小是6位",maxlength:"最大是12位",equalTo:"密码输入不一致"},age:{required:"年龄必须写",range:"年龄必须在26-50之间"},edu:{required:"必须选择一个"},birthday:{required:"生日必须填写",dateISO:"日期格式不正确",date:"日期非法"},email:{email:"邮箱格式不正确"},card:{required:"身份证必须填写",cardlength:"身份证长度是15或18位",card15:"15位的身份证必须都是数字",card18:"18位的身份证必须都是数字或末尾是X"}}});});</script>

</head>
<body><p>员工信息录入</p><form name="empForm" id="empForm" method="post" action="test.html"><table border=1><tr><td>真实姓名(不能为空 ,没有其他要求)</td><td><input type="text" id="realname" name="realname" /></td></tr><tr><td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td><td><input type="text" id="username" name="username" /></td></tr><tr> <td>密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td><td><input type="password" id="psw"  name="psw" /></td></tr><tr> <td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td><td><input type="password" id="psw2" name="psw2" /></td></tr><tr><td>性别(必选其一)</td><td><input  type="radio" id="gender_male" value="m" name="gender"/>&nbsp;男<input  type="radio" id="gender_female" value="f" name="gender"/>&nbsp;女<label class="error" for="gender" style="display: none;">必须选择一个性别                       </label></td></tr><tr><td>年龄(必填26-50):</td><td><input type="text" id="age" name="age" /></td></tr><tr> <td>你的学历:</td><td> <select name="edu" id="edu"><option value="">－请选择你的学历－</option><option value="a">专科</option><option value="b">本科</option><option value="c">研究生</option><option value="e">硕士</option><option value="d">博士</option></select></td></tr><tr> <td>出生日期(1982/09/21):</td><td><input type="text" id="birthday"  name="birthday" value="" /></td></tr><tr> <td>兴趣爱好:</td><td colspan="2"> <input type="checkbox" name="checkbox1" id="qq1"/>&nbsp;乒乓球 &nbsp;<input type="checkbox" name="checkbox1" id="qq2" value="1" />&nbsp;羽毛球 <input type="checkbox" name="checkbox1" id="qq3" value="2" />&nbsp;上网<input type="checkbox" name="checkbox1" id="qq4" value="3" />&nbsp;旅游<input type="checkbox" name="checkbox1" id="qq5" value="4" />&nbsp;购物<label class="error" for="checkbox1" style="display: none;">必须选一个</label></td></tr><tr> <td align="left">电子邮箱:</td><td><input type="text" id="email" name="email" /></td></tr><tr> <td align="left">身份证(15-18):</td><td><input type="text" id="card" name="card" /></td></tr><tr><td></td><td><input type="submit"  name="firstname"  id="firstname" value="保存"></td></tr></table>
</form>
</body>
</html>

代码效果

jQuery成功之路——jQuery事件和插件概述

一、jQuery的事件 1.1常用事件 jQuery绑定事件，事件名字没有on。事件名称事件说明blur事件源失去焦点click单击事件源change内容改变keydown接受键盘上的所有键(键盘按下)keypress接受键盘上的部分键（ctrl,alt,shift等无效）(键盘按下)key…...

编程日记 2023/9/6 13:36:38

Java ArrayList类详解

基本定义 ArrayList 是 Java 中的一个动态数组数据结构，属于 Java 集合框架的一部分（java.util 包中的类）。它提供了一个基于数组的可变长度列表，允许你在运行时添加、删除和访问元素，而不需要提前指定数组的大小。简…...

编程日记 2023/9/6 13:35:37

快速排序学习

由于之前做有一题看到题解用了快排提升效率，就浅学了一下快速排序，还是似懂非懂。首先快排的核心有两点，哨兵划分和递归。哨兵划分：以数组中的某个数（一般为首位）为基准数，将数组划分为两个部…...

编程日记 2023/9/6 13:34:36

【Vue3 知识第二讲】Vue3新特性、vue-devtools 调试工具、脚手架搭建

文章目录一、Vue3 新特性1.1 重写双向数据绑定1.1.1 Vue2 基于Object.defineProperty() 实现1.1.2 Vue3 基于Proxy 实现 1.2 优化虚拟DOM1.3 Fragments1.4 Tree shaking1.5 Composition API 二、 vue-devtools 调试工具三、环境配置四、脚手架目录介绍五、SFC 语法规范解析附…...

编程日记 2023/9/6 13:33:34

描述 pytorch 基于masking对元素进行替换. 代码如下. 先展平再赋值. 代码 # map.shape [64,60,128] # infill.shape [64,17,128] # mask_indices.shape [64,60]map map.reshape(map.shape[0] * map.shape[1],map.shape[2]) [mask_indices.reshape(mask_indices.shape[0]*ma…...

编程日记 2023/9/6 13:32:33

Cyber RT学习笔记---7、Component组件认知与实践

7、Component组件认知与实践前言本文是对Cyber RT的学习记录,文章可能存在不严谨、不完善、有缺漏的部分，还请大家多多指出。课程地址: https://apollo.baidu.com/community/course/outline/329?activeId10200 更多还请参考: [1] Apollo星火计划学习笔记——第…...

编程日记 2023/9/6 13:31:32

常见配置文件格式INI/XML/YAML/JSON/Properties/TOML/HCL/YAML Front Matter/.env介绍及实例

1. 常见配置文件INI XML YAML JSON Properties介绍以下是常见配置文件格式（INI、XML、YAML、JSON、Properties、TOML、HCL、YAML Front Matter、.env）的比较： 配置文件格式简介语法定义优点缺点常见使用场景常见编程语言INI简单的文本文件…...

编程日记 2023/9/6 13:30:31

JS 方法实现复制粘贴

背景以前我们一涉及到复制粘贴功能，实现思路一般都是： 创建一个 textarea 标签让这个 textarea 不可见（定位） 给这个 textarea 赋值把这个 textarea 塞到页面中调用 textarea 的 select 方法调用 document.execCommand…...

编程日记 2023/9/6 13:29:30

后端面试话术集锦第十六篇：java锁面试话术

这是后端面试集锦第十六篇博文——java锁面试话术❗❗❗ 1. 介绍一下乐观锁和悲观锁乐观锁的话就是比较乐观，每次去拿数据的时候，认为别人不会修改，所以不会上锁，但是在更新的时候会判断一下在此期间别人有没有去更新这个数据，可以使用版本号机制或者CAS算法实现。乐观…...

编程日记 2023/9/6 13:28:29

SystemVerilog 第5章面向对象编程基础

5.1概述对结构化编程语言,例如 Verilog和C语言来讲,它们的数据结构和使用这些数据结构的代码之间存在很大的沟壑。数据声明、数据类型与操作这些数据的算法经常放在不同的文件里,因此造成了对程序理解的困难。 Verilog程序员的境遇比C程序员更加棘手,因为Ⅴ erilog语言…...

编程日记 2023/9/6 13:27:28

指针进阶（1）

指针进阶朋友们，好久不见，这次追秋给大家带来的是内容丰富精彩的指针知识的拓展内容，喜欢的朋友们三连走一波！！！ 字符指针在指针的类型中我们知道有一种指针类型为字符指针 char* ； 使用方法如…...

编程日记 2023/9/6 13:26:26

蝶形运算法

蝶形运算法是一种基于FFT（Fast Fourier Transform）算法的计算方法，其基本思想是将长度为N的DFT分解成若干个长度为N/2的DFT计算，并通过不断的合并操作得到最终的结果。该算法也称为“蝴蝶算法”，因为它的计算过程中需要…...

编程日记 2023/9/6 13:25:25

day 48|● 583. 两个字符串的删除操作 ● 72. 编辑距离

583. 两个字符串的删除操作 dp的含义：指0开头，i- 1和j - 1为结尾的两个序列的删除最小数递推公式方面： 初始化方面：前面0行和0列的初值要赋好 func minDistance(word1 string, word2 string) int {dp : make([][]int, len(wor…...

编程日记 2023/9/6 13:24:24

服务器（I/O）之多路转接

五种IO模型 1、阻塞等待：在内核将数据准备好之前，系统调用会一直等待。所有的套接字，默认都是阻塞方式。 2、非阻塞等待：如果内核没有将数据准备好，系统调用仍然会返回，并且会返回EWUOLDBLOCK或者EAGAIN错…...

编程日记 2023/9/6 13:23:23

后端面试话术集锦第十三篇：java集合面试话术

这是后端面试集锦第十三篇博文——java集合面试话术❗❗❗ 1. Java里常见的数据结构都有哪些以及特征数组数组是最常用的数据结构。数组的特点是长度固定，可以用下标索引，并且所有的元素的类型都是一致的。列表列表和数组很相似，只不过它的大小可以改变。列表一般都是…...

编程日记 2023/9/6 13:22:21

《微服务架构设计模式》第一章

逃离单体地狱 FTGO单体架构作者用国外FTGO公司（一家做线餐饮外卖）的应用程序举例，阐述了单体架构的优缺点。FTGO应用架构如下： 应用程序是单体应用，具有六边形架构，最内侧是业务逻辑&…...

编程日记 2023/9/6 13:21:21

前端是如何打包的

前端项目的打包过程通常涉及将多个源文件（包括HTML、CSS、JavaScript等）合并、优化和压缩，以生成最终用于生产环境的静态资源。这个过程可以使用构建工具和打包工具来自动化完成。以下是前端项目的常见打包步骤： 1. **源代码编写…...

编程日记 2023/9/6 13:20:19

Qt 5.15编译（MinGW）及集成Crypto++ 8.7.0笔记

一、背景为使用AES加密库（AES/CBC加解密），选用Crypto 库（官网）。最新Crypto C库依次为：8.8.0版本（2023-6-25）、8.7.0（2022-8-7）和8.6.0（202…...

编程日记 2023/9/6 13:19:17

Qt 简单闹钟

//wiget.h#ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTime> //时间类 #include <QTimer> //定时器类 #include <QTextToSpeech> #include <QDebug> QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPA…...

编程日记 2023/9/6 13:18:15

简单谈下Spring、Spring MVC和Spring Boot

Spring是一个开源的轻量级框架，用于构建Java应用程序。它提供了一种全面的编程和配置模型，可以帮助开发人员构建各种类型的应用程序，从简单的控制台应用程序到大型企业级应用程序。Spring框架的主要目标是提高应用程序的可维护性、可扩展性和…...

编程日记 2023/9/6 13:17:11

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形总结前言学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...

编程新知 2025/7/8 6:41:33

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介对于社交类软件的功能，我们需要对它的功能特点进行分析： 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具： mysql：关系型数据库&am…...

编程新知 2025/7/8 20:45:19

【Linux】C语言执行shell指令

在C语言中执行Shell指令在C语言中，有几种方法可以执行Shell指令： 1. 使用system()函数这是最简单的方法，包含在stdlib.h头文件中： #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/6/21 17:11:09

python/java环境配置

环境变量放一起 python： 1.首先下载Python Python下载地址：Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个，然后自定义，全选可以把前4个选上 3.环境配置 1）搜高级系统设置 2…...

编程新知 2025/7/6 7:09:46

C++ 基础特性深度解析

目录引言一、命名空间（namespace） C 中的命名空间与 C 语言的对比二、缺省参数 C 中的缺省参数与 C 语言的对比三、引用（reference） C 中的引用与 C 语言的对比四、inline（内联函数…...

编程新知 2025/7/7 15:36:44

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子，再用 CNN-BiLSTM-Attention 来动态预测每个子序列，最后重构出总位移，预测效果超越传统模型。文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵（S…...

编程新知 2025/7/8 17:01:01

云原生玩法三问：构建自定义开发环境

云原生玩法三问：构建自定义开发环境引言临时运维一个古董项目，无文档，无环境，无交接人，俗称三无。运行设备的环境老，本地环境版本高，ssh不过去。正好最近对腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2025/7/7 15:50:53

C++使用 new 来创建动态数组

问题： 不能使用变量定义数组大小原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...

编程新知 2025/7/6 14:24:18

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习） 一、Aspose.PDF 简介二、说明（⚠️仅供学习与研究使用）三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置五、字节码修改实现代码&#…...

编程新知 2025/7/8 19:04:05

基于Springboot+Vue的办公管理系统

角色： 管理员、员工技术： 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能： 该办公管理系统是一个综合性的企业内部管理平台，旨在提升企业运营效率和员工管理水…...

编程新知 2025/7/8 3:47:31