jQuery中的事件

jQuery中的事件

jQuery事件是对JavaScript事件的封装,常用事件分类如下:

基础事件:window事件  鼠标事件  键盘事件  表单事件

复合事件(多个事件的组合):鼠标光标悬停  鼠标连续点击

1、鼠标事件

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

方法描述执行时机
click( )触发或将函数绑定到指定元素的click事件单击鼠标时
mouseover( )触发或将函数绑定到指定元素的mouse over事件鼠标移过时
mouseout( )触发或将函数绑定到指定元素的mouse out事件鼠标移出时

以mouseover()为例,实现鼠标移过时特效

//当鼠标移过元素时 为事件添加响应方法
$("#nav li").mouseover(function() { //当鼠标移过#nav li元素时
$(this). addClass("heightlight"); //为鼠标所在li元素添加样式
});
$("#nav li").mouseout(function() { //当鼠标移出#nav li元素时
$(this).removeClass(); //移除鼠标所在li元素的全部样式
});
//this指鼠标所在事件的当前元素对象

2、键盘事件

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

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

3、表单事件

当元素获得焦点时,会触发focus事件,失去焦点时,会触发blur事件,详见下表:

方法描述执行时机
focus( )触发或将函数绑定到指定元素的focus事件获得焦点
blur( )触发或将函数绑定到指定元素的blur事件失去焦点

示例:

<p>
<label>用户名:</label>
<input name="member" type="text" />
</p>
<p>
<label>密码:</label>
<input name="password" type="text" />
</p>

获得焦点设置样式,失去焦点去除样式

$(document).ready(function () {
$("[name=member]").focus(function(){
$(this).addClass("input_focus");
});
$("[name=member]").blur(function(){
$(this).removeClass("input_focus");
});
});

二、绑定事件bind()

除了使用事件名绑定事件外,还可以使用bind()方法

1、绑定单个事件

语法:bind("事件名",函数)

"click": 事件类型 事件类型要用引号引起来

”function()“ : 处理函数

2、同时绑定多个事件方法

bind({事件名:函数,事件名:函数,.....})

$("input[name=event_1]").bind({
"mouseover": function () {//为mouseover绑定方法
$("ul").css("display", "none");
},
"mouseout": function () {//为mouseout绑定方法
$("ul").css("display", "block");
}
});

三、移除事件unbind()

参数含义描述
[type]事件类型主要包括:blur、focus、click、mouseout等基础事件,此外,还可以是 自定义事件
[fn]处理函数用来绑定的处理函数

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

function testUnbind(){//定义一个函数移除单个事件
$("input[name=userName]").unbind("mouseover");
}

四、复合事件

1、鼠标光标悬停事件hover()

鼠标光标悬停事件hover()方法相当于mouseover与mouseout事件的组合

$(document).ready(function() {
$("#myaccound").hover(function(){//移入触发
$("#menu_1").css("display","block");
},
function(){//光标移出时触发
$("#menu_1").css("display","none");
}
);
});

2、鼠标连续click事件

toggle()

A、用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

B、如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。 toggle()方法用于模拟鼠标连续click事件(在1.9以后的版本中移除了)

$(document).ready(function () {
$("div[class=testToggle]").toggle(
function () {
$(this).css("background-color", "red");//第一次单击
},
function () {
$(this).css("background-color", "green"); //第二次
},
function () {
$(this).css("background-color", "blue"); //第三次
}
);
});

感谢大家的阅读,如有不对的地方,可以私信我,感谢大家!

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

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

相关文章

3月16日ACwing每日一题

562. 壁画 - AcWing题库 #include <bits/stdc.h> using namespace std; const int N 5e6 6; //可以枚举每一种情况 因为都是相连的所以肯定是前缀和 int main() {int t;cin >> t;for (int i 1; i < t; i) {char s[N];int n;cin >> n;int a[N]; // 修改…

某赛通电子文档安全管理系统 DecryptApplication 任意文件读取漏洞复现

0x01 产品简介 某赛通电子文档安全管理系统(简称:CDG)是一款电子文档安全加密软件,该系统利用驱动层透明加密技术,通过对电子文档的加密保护,防止内部员工泄密和外部人员非法窃取企业核心重要数据资产,对电子文档进行全生命周期防护,系统具有透明加密、主动加密、智能…

从零开始学习编程:迈出你的编程之路

标题 《从零开始学习编程&#xff1a;迈出你的编程之路》摘要引言如何开始学习编程&#xff1f;1. **明确学习目标**2. **选择编程语言**3. **学习资源**4. **练习编程**5. **参与社区**6. **持之以恒**7. **探索更多** 总结参考资料 博主 默语带您 Go to New World. ✍ 个人主…

阅读 - 二维码扫码登录原理

在日常生活中&#xff0c;二维码出现在很多场景&#xff0c;比如超市支付、系统登录、应用下载等等。了解二维码的原理&#xff0c;可以为技术人员在技术选型时提供新的思路。对于非技术人员呢&#xff0c;除了解惑&#xff0c;还可以引导他更好地辨别生活中遇到的各种二维码&a…

Ubuntu 14.04:PaddleOCR基于PaddleHub Serving的服务部署(失败)

目录 一、为什么使用一键服务部署 二、安装 paddlehub 1.8 2.1 安装前的环境准备 2.2 安装paddlehub 1.8 2.2.1 安装paddlehub 2.2.2 检测安装是否成功 2.2.3 检查本地与远端PaddleHub-Server的连接状态 2.2.4 测试使用 2.3 其他 2.3.1 如何卸载、pip常用命令、常见…

如何保存缓存和MySQL的双写一致呢?

如何保存缓存和MySQL的双写一致呢&#xff1f; 所谓的双写一致指的是&#xff0c;在同时使用缓存(如Redis)和数据库(如MySQL)的场景下,确保数据在缓存和数据库中的更新操作保持一致。当对数据进行修改的时候&#xff0c;无论是先修改缓存还是先修改数据库&#xff0c;最终都要保…

transformer注意力权重系数绘图

参考绘制tsne图&#xff0c;首先将模型中的注意力权重导出&#xff0c;因为我的模型中L2&#xff0c;所以导出两层 # plot_weight weight_model_layer0 Model(inputsmodel.inputs, outputsmodel.get_layer(transformer_0).output) weight_output_layer0 weight_model_layer0…

C语言内存函数详解

文章目录 前言一、memcpy函数&#xff08;内存拷贝函数&#xff09;二、memmove重叠拷贝函数三.memset内存设置函数四.memcmp内存比较函数总结 前言 我们之前按学习了C语言标准库中提供了一系列的字符和字符串库函数&#xff0c;接下来我们就学习一下关于内存相关的一些函数。…

第十四届蓝桥杯 三国游戏

一开始的思路就是想着暴力&#xff0c;但是呢&#xff0c;如果真的用暴力一个一个列的话&#xff0c;连30%的数据都搞定不了&#xff0c;所以这里需要考虑别的办法。 这道题的思路就是贪心。 我们这样想&#xff1a;既然要满足至少一个国X>YZ&#xff0c;那么我们何不变成…

超实用绿色办公软件介绍

自制的绿色软件办公秘书软件&#xff0c;集成了自动任务、文件工具、PDF工具、OCR图文识别、文字处理、电子表格六大类30多项实用功能&#xff0c; 开发目的是解决常见办公痛点&#xff0c;把机械的操作还给机器&#xff0c;实现轻松、高效办公。 功能介绍如下&#xff1a; 一…

EndeavourOs(arch系)安装sunpinyin输入法(ibus) + 迅雷(xunlei-bin)

输入法 yay -S ibus yay -S ibus-libpinyin yay -S ibus-sunpinyin yay -Q ibus ibus-libpinyin ibus-sunpinyin #验证 # 注销然后打开ibus config... # 在Input Method 添加Chinese->SunPinYin # 使用Ctrl Space, 默认Super Space, 请自行修改 # 再次注销&#xff0c;开…

Linux环境下Minio的安装部署与启动教程(完整版)

1、概述 MinIO是一个开源、分布式的对象存储系统&#xff0c;专为云原生环境设计。它提供了一个基于标准的Amazon S3兼容接口&#xff0c;使得开发者可以使用熟悉的API在私有云或边缘环境中部署和管理大规模非结构化数据&#xff0c;如图片、视频、日志文件等。 MinIO的核心特…

安卓UI面试题 41-45

41. View.inflate和LayoutInflater.inflate的区别? 实际上没有区别,View.inflate实际上是对LayoutInflater.inflate做了一层包装, 在功能上,LayoutInflate功能更加强大。View.inflate实际上最终调用的还是LayoutInflater.inflate (@LayoutRes int resource, @nullable Vie…

ChatGLM:基于ChatGLM-6B使用ptuning进行微调,实现类instruction的效果

由于业务需要&#xff0c;调研下怎么训练一个虚拟角色出来&#xff0c;所以找了一些文档参考&#xff0c;其中有一个基于ChatGLM-6B使用ptuning进行微调&#xff0c;实现类instruction的效果的现成的项目&#xff0c;给大家分享下。 一、介绍 由于ChatGLM-6B 不支持instructio…

2、计划任务不显示UI的问题

计划任务不显示UI的问题 1、原因&#xff1a; 在windows7以上系统&#xff0c;使用system权限启动的进程默认是没有ui界面&#xff0c;这是windows系统出于安全考虑的限制。防止用户在高权限下误删重要的文件。 2、解决方案&#xff1a; 1、降权 解决的办法&#xff1a;降…

Linux内核--基本概念/基本结构和组件

提示&#xff1a;本系列文章重点学习Linux内核 Linux内核--基本概念/基本结构和组件 简介一、基础概念1.六项工作内容2.根文件系统&#xff08;Root File System&#xff09;&#xff1a;3.交叉编译&#xff08;Cross-Compilation&#xff09;&#xff1a;4.设备树&#xff08;…

【矩阵】240. 搜索二维矩阵 II【中等】

搜索二维矩阵 II 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a;每行的元素从左到右升序排列。每列的元素从上到下升序排列。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,4,7,11,15],[2,5,8,12,19],[3,6,9,16,22…

居民健康监测小程序|基于微信小程序的居民健康监测小程序设计与实现(源码+数据库+文档)

居民健康监测小程序目录 目录 基于微信小程序的居民健康监测小程序设计与实现 一、前言 二、系统设计 三、系统功能设计 1、用户信息管理 2、健康科普管理 5.3公告类型管理 3、论坛信息管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推…

超越 GPT4,科大讯飞,再出王炸!

哈喽&#xff0c;大家好&#xff01; 去年&#xff0c;科大讯飞星火大模型上线&#xff0c;给大家推荐了一波&#xff0c;演示了其强大的功能&#xff0c;不少小伙伴都立马申请体验了一把&#xff0c;也有私信说非常强大&#xff0c;工作效率提高不少&#xff0c;支持国产大模…

c语言:操作符详解(上)

目录 一、操作符的分类二、二进制和进制转换1.2进制转10进制2.10进制转2进制3.2进制转8进制4.2进制转16进制 三、原码、反码、补码四、算术操作符、-、*、/、%1.**和-**2.*3./4.% 五、移位操作符1.左移操作符2.右移操作符 六、位操作符&#xff1a;&、|、^、~七、赋值操作符…