jQuery:事件
时间:2021-08-28
本文章向大家介绍jQuery:事件,主要包括jQuery:事件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1 鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件,常用鼠标事件有:
方法 | 描述 | 执行时机 |
click( ) | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 |
mouseover( ) | 触发或将函数绑定到指定元素的mouse over事件 | 鼠标移过时 |
mouseout( ) | 触发或将函数绑定到指定元素的mouse out事件 | 鼠标移出时 |
<img src="img/1.jpg" width="300"> <img src="img/1.jpg" width="300"> <img src="img/1.jpg" width="300"> <script src="js/jquery-3.4.1.min.js"></script> <script> $("img").click( function(){ //点击一下,换照片 $(this).attr( "src","img/2.jpg" ); //this就是事件触发的源头 } ); $("img").mouseover( function(){ //移动到元素上 $(this).css( "border","2px solid red" ); } ); $("img").mouseout( function(){ //离开元素 $(this).css( "border","2px solid white" ); } ); </script>
2 键盘事件
用户每次按下或者释放键盘上的键时都会产生事件,常用键盘事件有:
方法 | 描述 | 执行时机 |
keydown( ) | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
keyup( ) | 触发或将函数绑定到指定元素的keyup事件 | 释放按键时 |
<input> <h3></h3> <script src="js/jquery-3.4.1.min.js"></script> <script> $("input").keyup( function(){ var str = $(this).val(); // 获取框中的值 $("h3").text( str ); // 将h3元素中的文本内容更改为str } ); </script>
3 表单事件
当元素获得焦点时,会触发focus事件,失去焦点时,会触发blur事件,详见下表:
方法 | 描述 | 执行时机 |
focus( ) | 触发或将函数绑定到指定元素的focus事件 | 获得焦点 |
blur( ) | 触发或将函数绑定到指定元素的blur事件 | 失去焦点 |
<form action=""> <p>帐号: <input id="a" value="请输入帐号..."> </p> <p>电话: <input id="b"> </p> </form> <script src="js/jquery-3.4.1.min.js"></script> <script> //获得焦点(激活/点击一下) $("#a").focus(function(){ $(this).val(""); }); //失去焦点(未激活/未点击) $("#a").blur(function(){ $(this).val("请输入帐号..."); }); </script>
4 鼠标悬停复合事件
hover()方法相当于mouseover与mouseout事件的组合
<img src="img/3.jpg" width="400"> <script src="js/jquery-3.4.1.min.js"></script> <script> $("img").hover( function(){ $(this).css("border","5px solid red"); }, function(){ $(this).css("border","5px solid white"); } ); </script>
5 连续点击复合事件
toggle()可以模拟鼠标的连续单击事件
<h2>修仙小说</h2> <ul> <li>凡人修仙传</li> <li>遮天</li> <li>神墓</li> <li>残袍</li> <li>大主宰</li> </ul> <script src="js/jquery-3.4.1.min.js"></script> <script> $("h2").click(function(){ $("ul").toggle(); // 连续点击,ul的可见和隐藏进行切换 }); </script>
6 事件的动态绑定
对dom元素绑定事件的另一种写法
绑定一个事件
$(".del").on('click', function() {
alert('hello');
})
绑定多个事件
$(".del").on('click mouseover', function() {
alert('hello');
})
原文地址:https://www.cnblogs.com/JasperZhao/p/15200366.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- mapstruct解放Java对象转换
- protobuf在嵌入式linux下的移植及c语言调用
- 文本挖掘| 什么时候可以用到主题建模?
- Spark 基础面试题
- Hbase 基础面试题
- 跟我学万字长文:最前沿的特征可视化(CAM)技术
- ES 面试题
- Flink 面试题
- 【入坑JAVA安全】序列化与反序列化
- Redis 常见面试题
- 老公,JNDI注入是什么呀?
- XXE漏洞:DocumentBuilder使用之殇
- IDEA怎么远程调试应用?
- Tidyverse| XX_join :多个数据表(文件)之间的各种连接
- tidyverse|数据分析常规操作-分组汇总(sumamrise+group_by)