我的编程空间,编程开发者的网络收藏夹
学习永远不晚

jquery怎么绑定事件调用函数

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

jquery怎么绑定事件调用函数

这篇文章主要讲解了“jquery怎么绑定事件调用函数”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery怎么绑定事件调用函数”吧!

jquery可以绑定事件调用函数。jquery提供了多种绑定方法:1、bind(),可为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数;2、blur(),可为被选元素添加失去焦点事件,并规定事件发生时运行的函数;3、change(),可为被选元素添加change事件,并规定事件发生时运行的函数;4、click(),可为被选元素添加单击事件,并规定事件处理函数。

jquery怎么绑定事件调用函数

本教程操作环境:windows7系统、jquery3.6.0版本、Dell G3电脑。

jQuery 事件处理方法是 jQuery 中的核心。

事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。

jquery提供了多种绑定方法

方法描述
bind()向匹配元素附加一个或更多事件处理器
blur()触发、或将函数绑定到指定元素的 blur 事件
change()触发、或将函数绑定到指定元素的 change 事件
click()触发、或将函数绑定到指定元素的 click 事件
dblclick()触发、或将函数绑定到指定元素的 double click 事件
delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()移除所有通过 live() 函数添加的事件处理程序。
error()触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()返回 event 对象上是否调用了 event.preventDefault()。
event.pageX相对于文档左边缘的鼠标位置。
event.pageY相对于文档上边缘的鼠标位置。
event.preventDefault()阻止事件的默认动作。
event.result包含由被指定事件触发的事件处理器返回的最后一个值。
event.target触发该事件的 DOM 元素。
event.timeStamp该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type描述事件的类型。
event.which指示按了哪个键或按钮。
focus()触发、或将函数绑定到指定元素的 focus 事件
keydown()触发、或将函数绑定到指定元素的 key down 事件
keypress()触发、或将函数绑定到指定元素的 key press 事件
keyup()触发、或将函数绑定到指定元素的 key up 事件
live()为当前或未来的匹配元素添加一个或多个事件处理器
load()触发、或将函数绑定到指定元素的 load 事件
mousedown()触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()触发、或将函数绑定到指定元素的 mouse up 事件
one()向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()文档就绪事件(当 HTML 文档就绪可用时)
resize()触发、或将函数绑定到指定元素的 resize 事件
scroll()触发、或将函数绑定到指定元素的 scroll 事件
select()触发、或将函数绑定到指定元素的 select 事件
submit()触发、或将函数绑定到指定元素的 submit 事件
toggle()绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。
trigger()所有匹配元素的指定事件
triggerHandler()第一个被匹配元素的指定事件
unbind()从匹配元素移除一个被添加的事件处理器
undelegate()从匹配元素移除一个被添加的事件处理器,现在或将来
unload()触发、或将函数绑定到指定元素的 unload 事件

下面看看一些常用事件绑定方法。

1、click()方法:

click()方法规定当发生 click 事件时运行的函数

示例:单击 <p> 元素时警报文本

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script class="lazy" data-src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
				$("p").click(function() {
					alert("段落被点击了。");
				});
			});
		</script>
	</head>
	<body>

		<p>点击这个段落。</p>

	</body>
</html>

jquery怎么绑定事件调用函数

2、change() 方法

change() 方法规定当发生 change 事件时运行的函数。

示例:当 <input> 字段改变时警报文本

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script class="lazy" data-src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function(){
		  $("input").change(function(){
		    console.log("文本已被修改");
		  });
		});
		</script>
	</head>
	<body>

		<input type="text">
		<p>在输入框写一些东西,然后按下 enter 键或点击输入框外部。</p>

	</body>
</html>

jquery怎么绑定事件调用函数

3、dblclick()

dblclick() 方法规定当发生 双击 事件时运行的函数。

示例:双击 <p> 元素时警报文本

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script class="lazy" data-src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function(){
			  $("p").dblclick(function() {
				console.log("这个段落被双击");
			  });
			});
		</script>
	</head>
	<body>

		<p>双击这个段落。</p>

	</body>
</html>

jquery怎么绑定事件调用函数

4、hover() 方法

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

方法触发 mouseenter 和 mouseleave 事件。

示例:当鼠标指针悬停在上面时,改变 <p> 元素的背景颜色

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script class="lazy" data-src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("p").hover(function() {
					$("p").css("background-color", "yellow");
				}, function() {
					$("p").css("background-color", "pink");
				});
			});
		</script>
	</head>
	<body>

		<p>鼠标移动到该段落。</p>

	</body>
</html>

jquery怎么绑定事件调用函数

感谢各位的阅读,以上就是“jquery怎么绑定事件调用函数”的内容了,经过本文的学习后,相信大家对jquery怎么绑定事件调用函数这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

jquery怎么绑定事件调用函数

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

jQuery中on绑定的事件怎么解绑

这篇文章主要介绍了jQuery中on绑定的事件怎么解绑的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jQuery中on绑定的事件怎么解绑文章都会有所收获,下面我们一起来看看吧。解绑单个事件在jQuery中,我们
2023-07-05

jquery绑定事件有什么作用

jquery绑定事件的作用:将普通的事件event绑定在DOM节点上,当DOM节点被选中时,将事件与之绑定,方便用户提供相应的操作。jQuery中提供了四种事件绑定方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。
2023-05-14

jQuery如何绑定一个函数到一个事件

这篇文章将为大家详细讲解有关jQuery如何绑定一个函数到一个事件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。绑定一个函数到一个事件$(#foo).bind(click, function() { al
2023-06-27

jquery绑定事件的作用是什么

本篇内容介绍了“jquery绑定事件的作用是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!jquery绑定事件的作用:将普通的事件eve
2023-07-05

jQuery的动画、遍历和事件绑定怎么实现

这篇“jQuery的动画、遍历和事件绑定怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“jQuery的动画、遍历和事件
2023-06-27

jQuery AJAX函数怎么调用

要调用jQuery AJAX函数,需要按照以下步骤进行操作:1. 引入jQuery库文件。在HTML文件的``标签中添加以下代码:```html```2. 使用`$.ajax()`函数来发起AJAX请求。该函数有一个或多个参数,用于设置请求
2023-10-10

Vue事件处理函数如何绑定

这篇文章主要介绍“Vue事件处理函数如何绑定”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue事件处理函数如何绑定”文章能帮助大家解决问题。在 JS 中「事件」是不需要绑定的,浏览器自带了许多的事
2023-07-05

jquery回调函数怎么使用

本篇内容介绍了“jquery回调函数怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在jquery中,回调函数就是一个被作为参数传递的
2023-07-04

怎么进行React事件绑定

本篇文章给大家分享的是有关怎么进行React事件绑定,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。类组件事件绑定import React from react;import R
2023-06-22

javascript怎么解除绑定事件

小编给大家分享一下javascript怎么解除绑定事件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!方法:1、使用“对象名.onclick=null”语句;2、使
2023-06-14

Vue 事件处理函数的绑定示例详解

这篇文章主要为大家介绍了Vue 事件处理函数的绑定示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-02-23

怎么在Java中使用GUI中的事件绑定

怎么在Java中使用GUI中的事件绑定?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。程序绑定的概念:绑定指的是一个方法的调用与方法所在的类(方法主体)关联起来。
2023-05-30

编程热搜

目录