jQuery中的常用事件介绍
一、jQuery事件的分类
jQuery事件是对JavaScript事件的封装,常用事件分类如下:
1、基础事件
window事件。鼠标事件。键盘事件。表单事件。
2、复合事件是多个事件的组合
鼠标光标悬停。鼠标连续点击。
二、鼠标事件
鼠标事件是当用户在文档上面移动或单击鼠标时而产生的事件,常用鼠标事件有:
文章图片
三、键盘事件
用户每次按下或者释放键盘上的按键时都会产生事件,常用键盘事件如下:
文章图片
四、表单事件
当元素获得焦点时,会触发focus()事件,失去焦点时,会触发blur()事件。
表单提交时会触发submit()事件。
文章图片
五、综合示例
【jQuery中的常用事件介绍】
文章图片
需求说明:
- 1、用户名输入框获得焦点时输入框背景色为浅蓝色,失去焦点时还原为白色背景色。
- 2、鼠标移至登录按钮时字体变粗,移出时整体恢复正常。
- 3、敲击键盘的“回车”键时触发表单提交事件。
事件演示示例 - 锐客网 #login{width: 400px; height: 250px; background-color: #f2f2f2; border:1px solid #DDDDDD; padding: 5px; }#login fieldset {border: none; margin-top: 10px; }#login fieldset legend{font-weight: bold; }#login fieldset p{display: block; height: 30px; }#login fieldset p label {display: block; float:left; text-align: right; font-size: 12px; width: 90px; height: 30px; line-height: 30px; }#login fieldset p input {display: block; float:left; border: 1px solid #999; width: 250px; height: 30px; line-height: 30px; }#login fieldset p input.code{width: 60px; }#login fieldset p img{margin-left: 10px; }#login fieldset p a{color: #057BD2; font-size: 12px; text-decoration: none; margin: 10px; }#login fieldset p input.btn{background: url("./images/login.gif") no-repeat; width: 98px; height: 32px; margin-left: 60px; color: #ffffff; cursor: pointer; }#login fieldset p input.input_focus{background-color: #BEE7FC; }
效果:
文章图片
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- 在c语言中怎样将数组赋给指针,C语言中的指针与数组
- Kubernetes|Kubernetes 中的服务发现与负载均衡
- mysql 查询语句中的 order by 对索引的影响
- java常用Lambda表达式使用场景源码示例
- 医学图像处理中的数据读写
- linux面试题
- java中的类型自动转换机制解析
- vue跳转页面常用的4种方法与区别小结
- linq中的分区操作符
- 拓端tecdat|【视频】LSTM神经网络架构和原理及其在Python中的预测应用|数据分享