jQuery中的常用事件
这里介绍一些jQuery常用的事件
jQuery事件是对JavaScript事件的封装,常用事件如:鼠标事件,键盘事件,表单事件,绑定事件,复合事件等等
1.鼠标事件
方法如下
- click() :单击事件、触发或将函数绑定到指定元素的click事件
- mouseover(): 触发或将函数绑定到指定元素的mouseover事件
- mouseout() :触发或将函数绑定到指定元素的mouseout的事件
代码示例:
$(function () {$("input").click(function () {$("li").mouseover(function () {$(this).css("background", "green");}).mouseout(function () {//this.style.background = "";this.style.cssText = "background:";});});});
2.键盘事件:
方法如下:
- keydown(): 按下按键时、触发或将函数绑定到指定元素的keydown事件
- keyup(): 释放按键时、触发或将函数绑定到指定元素的keyup事件
- keypress(): 产生可打印的字符时、触发或将函数绑定到指定元素的keypress事件
代码示例:
$(function () {$("p input").keyup(function () {$("#events").append("keyup");}).keydown(function () {$("#events").append("keydown");}).keypress(function () {$("#events").append("keypress");});$(document).keydown(function (event) {if (event.keyCode == "13") {//按enter键alert("确认要提交么?");}});});
3.表单事件:
方法如下:
- focus() : 获得焦点、触发或将函数绑定到指定元素的focus事件
- blur() : 失去焦点、触发或将函数绑定到指定元素的blur事件
代码示例:
1、
// 查询输入框$("input[name='search']").focus(function(){$(this).val(""); });$("input[name='search']").blur(function(){$(this).val("请输入要查询的问题"); });
2、$(function () {//给文本框添加边框样式$("input").focus(function() {$(this).addClass("myclass");}).blur(function() {$(this).removeClass("myclass");});});
4、绑定事件:
语法解析:
- bind(type,[data],fn),其中data不是必需的
- type:事件类型、主要包括blur、focus、click、mouseout等基础事件,此外也还可以是自定义事件
- fn : 用来绑定的处理函数
代码示例:
绑定一个、
$("input[name=event_1]").bind("click",function() {$("p").css("background-color","#F30");
});绑定多个、
$("input[name=event_1]").bind({mouseover: function () {$("ul").css("display", "none");
},
mouseout: function () {$("ul").css("display", "block");
}
});
移除方法:
- unbind([type],[fn]) 与绑定事件刚好相反,如果方法没有参数则表示移除全部的事件
- unbind如果要移除多个只需在两两之间添加一个空格即可
代码示例:
$(function () {$("li").unbind("click");$("li").unbind("mouseover mouseout");});
注意:当unbind()不带参数时,表示移除所绑定的全部事件
5、复合事件
一、 hover()方法
语法:hover(enter,leave);
该方法相当于mouseover与mouseout事件的组合
代码示例:
$("li").hover(function() {$("li").css("background", "gray");}, function() {$("li").css("background", "green");});
二、.toggle()方法
toggle()方法用于模拟鼠标连续click事件
代码示例:
$("body").toggle(
function () { }, //第一次点击触发
function () { }, //第二次点击触发
function () { } //第三次点击触发
... //...
);
同时toggle()方法还有一个作用:切换元素可见状态
$('input').toggle( function () {$('ul').toggle(); //是显示的则隐藏,是隐藏的则显示},function () {$('ul').toggle(); //是显示的则隐藏,是隐藏的则显示});
jQuery中的常用事件相关推荐
- jQuery中的常用内容总结(一)
jQuery中的常用内容总结(一) 前言 不好意思(✿◠‿◠),由于回家看病以及处理一些其它事情耽搁了,不然这篇博客本该上上周或者上周写的:同时闲谈几句:在这里建议各位开发的童鞋,如果有疾病尽快治 ...
- jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
- html内置时间对象,JavaScript中的常用事件,以及内置对象详解
原标题:JavaScript中的常用事件,以及内置对象详解 今天是刘小爱自学Java的第81天. 感谢你的观看,谢谢你. 话不多说,开始今天的学习: 学前端有一个非常权威的组织,也就是w3c,其有个专 ...
- javascript中的onpropertychange事件 与 jquery中的propertychange事件
2019独角兽企业重金招聘Python工程师标准>>> jquery 中的propertychange事件不兼容IE9 而javascript中的onpropertychange事 ...
- jQuery中阻止hover事件冒泡
这里写自定义目录标题 jQuery中阻止hover事件冒泡 前言 冒泡示例 冒泡效果 阻止冒泡 阻止冒泡效果 总结 jQuery中阻止hover事件冒泡 文章目录 jQuery中阻止hover事件冒泡 ...
- jQuery初识和常用事件(一)
文章目录 一.jQuery 二.入口函数 三.选择器 选择器小结 ★ 全部选择器参考 ☆ 四.常用的 jQuery 事件方法 事件写法 鼠标事件 元素事件 键盘事件 文档/窗口事件 全部事件方法参考 ...
- 45 jQuery中的常用API
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.jQuery基础选择器 原生JS获取元素的方式很多.很杂,而且兼容性情况不一致.因此, ...
- 深入了解jquery中的键盘事件
很多时候,我们需要获取用户的键盘事件,下面就一起来看看jquery是如何操作键盘事件的. 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() k ...
- PowerBuilder中的常用事件
1.window中的事件 事件名 触发的时机 01.Activate 在窗口激活之前触发 02.Clicked 当用户用 ...
最新文章
- MySQL Sandbox---快速体验各版本MySQL
- Django模板语言
- python实参_python的形参和实参
- volatile 和 atomic 原子性的区别和联系
- matlab里a1不能做变量,在matlab中将含有变量“w”的表达式存入矩阵元素,无法生成矩阵。哪里出问题了?...
- git branch看不到分支_最好的Git分支管理教程
- linux本地检测如何tomcat是否启动成功tomcat端口检测
- 「代码随想录」本周学习小结!(动态规划系列五)
- Missing iOS Distribution signing identity for …
- Instead Of 触发器
- 揭开JS加密解密的神秘面纱(1)
- 装了冰点还原如何修改计算机ip,冰点还原软件如何使用
- vue3 Extraneous non-props attributes (modelValue) were passed to component but could not be automati
- 【Unity开发小技巧】Unity组合键的代码编写
- 从northwind中查询Products中最高单价(UnitPrice)是多少;
- 什么是深度可分离卷积及深度可分离卷积的优势
- APP软件项目迭代开发
- unity 自动寻路NavMesh
- java selector 源码_Java NIO——Selector机制源码分析---转
- 三种简单的数字倒叙方式