当前位置: 首页 > web >正文

jQuery 事件

jQuery 是为事件处理特别设计的。

什么是事件?
页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例:

在元素上移动鼠标。
选取单选按钮
点击元素

在事件中经常使用术语"触发"(或"激发")例如: “当您按下按键时触发 keypress 事件”。

常见 DOM 事件:

鼠标事件 键盘事件 表单事件 文档/窗口事件
在这里插入图片描述

jQuery 事件方法语法

在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件:

$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现:

$("p").click(function(){      // action goes here!!        
});

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

在下面的实例中,当点击事件在某个

元素上触发时,隐藏当前的

元素:

实例

$("p").click(function(){$(this).hide();
});

dblclick()

当双击元素时,会发生 dblclick 事件。

dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数:

实例

$("p").dblclick(function(){$(this).hide();
});

mouseenter()

当鼠标指针穿过元素时,会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函数:

实例

$("#p1").mouseenter(function(){alert("You entered p1!");
});

尝试一下 »
mouseleave()

当鼠标指针离开元素时,会发生 mouseleave 事件。

mouseleave() 方法触发 mouseleave 事件,或规定当发生 mouseleave 事件时运行的函数:

实例

$("#p1").mouseleave(function(){alert("Bye! You now leave p1!");
});

mousedown()

当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。

mousedown() 方法触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函数:

实例

$("#p1").mousedown(function(){alert("Mouse down over p1!");
});

mouseup()

当在元素上松开鼠标按钮时,会发生 mouseup 事件。

mouseup() 方法触发 mouseup 事件,或规定当发生 mouseup 事件时运行的函数:

实例

$("#p1").mouseup(function(){alert("Mouse up over p1!");
});

hover()

hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。

实例

$("#p1").hover(function(){alert("You entered p1!");},function(){alert("Bye! You now leave p1!");
});

focus()

当元素获得焦点时,发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。

focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数:

实例
$("input").focus(function(){$(this).css("background-color","#cccccc");
});

blur()

当元素失去焦点时,发生 blur 事件。

blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函数:

实例

$("input").blur(function(){$(this).css("background-color","#ffffff");
});

比较keypress、keydown与keyup

keydown:在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外),它返回的是键盘代码;
keypress:在键盘上按下一个按键,并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符,所以监听无效,换句话说,只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
keyup:用户松开某一个按键时触发,与keydown相对,返回键盘代码.

请添加图片描述

http://www.xdnf.cn/news/4989.html

相关文章:

  • 2025数维杯数学建模竞赛B题完整参考论文(共38页)(含模型、代码、数据)
  • Jsp技术入门指南【十一】SQL标签库
  • springboot ResetController RequestMapping 注解
  • 《挖掘全球商标宝藏,开启亚马逊运营新征程》
  • Docker宿主机IP获取
  • -bash: /usr/local/mysql/bin/mysqld: No such file or directory
  • 灵活设置CAN终端电阻
  • UG471 之 SelectIO 逻辑资源
  • MongoDB知识框架
  • 数智读书笔记系列032《统一星型模型--一种敏捷灵活的数据仓库和分析设计方法》
  • 编译日志:关于编译opencv带有ffmpeg视频解码支持的若干办法
  • 为啥大模型一般将kv进行缓存,而q不需要
  • 权限控制模型全解析:RBAC、ACL、ABAC 与现代混合方案
  • python调用千问大模型
  • 我国脑机接口市场规模将破38亿元,医疗领域成关键突破口
  • QT 解决msvc fatal error C1060: 编译器的堆空间不足
  • 移动IP与手机移动数据流量的概念、原理、区别与联系
  • DVWA靶场保姆级通关教程--06不安全验证机制
  • 二维差分数组(JAVA)蓝桥杯
  • k8s之ingress
  • 使用 docker 安装 nacos3.x
  • upload-labs靶场通关详解:第三关
  • 【漫话机器学习系列】249.Word2Vec自然语言训练模型
  • 十二、基于大模型的在线搜索平台——信息抓取
  • 智能网联汽车 “中央计算” 博弈:RTOS 与跨域融合的算力分配挑战
  • 网络研讨会开发注册中, 5月15日特励达力科,“了解以太网”
  • stm32之USART
  • Day 15 训练
  • OpenHarmony平台驱动开发(十一),PIN
  • 线程的生命周期·