这篇文章主要讲解了“jquery事件怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery事件怎么实现”吧!
jquery事件:1、鼠标事件,包括click单击事件、mouseover事件等;2、键盘事件,包括keydown按下按键、keyup释放按键等;3、表单事件,包括focus获得焦点、blur失去焦点等;4、绑定事件,bind绑定事件;5、复合事件,包括hover方法触发事件、toggle()方法触发事件等等。
本教程操作环境:windows10系统、jquery3.4.1版本、Dell G3电脑。
jQuery事件是对JavaScript事件的封装,常用事件如:鼠标事件,键盘事件,表单事件,绑定事件,复合事件等等
方法如下
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:"; }); }); });
方法如下:
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("确认要提交么?"); } }); });
方法如下:
focus() : 获得焦点、触发或将函数绑定到指定元素的focus事件
blur() : 失去焦点、触发或将函数绑定到指定元素的blur事件
代码示例:
// 查询输入框 $("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"); }); });
语法解析:
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()不带参数时,表示移除所绑定的全部事件
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事件怎么实现这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。