`

jQuery事件相关方法

阅读更多

jQuery事件相关方法
<body>
		<input id="test1" type="button" value="单击我" />
		<br />
		<input id="test2" type="button" value="切换右边复选框的勾选状态" />
		<input id="check" type="checkbox" value="" />
		<input id="check2" type="checkbox" value="" />
		<br />
		<input id="test3" type="button" value="绑定toggle的按钮" />
		<br />
		<div id="test4">
			鼠标悬停、移除将触发指定函数
		</div>
		<script type="text/javascript">
			//指定页面加载完成时执行指定函数
			$(document).ready(function() {
				alert("页面加载完成!");
			});
			//为id为test1的元素的click事件绑定事件处理函数
			$("#test1").bind(
					"click",
					{
						book : "Ajax"
					},
					function(event) {
						alert("id为test1的按钮被单击!\n" + "事件为:" + event
								+ "\n事件上data的book属性为:" + event.data.book);
					});
			//为id为test2的元素的click事件绑定事件处理函数
			$("#test2").bind("click", function(event) {
				//使用代码触发id为check的元素的单击事件,而且执行默认行为
					$("#check").trigger("click");
					$("#check2").trigger("click");
				});
			//使用toggle为id为test3的元素绑定3个事件处理函数。
			$("#test3").toggle(function(event) {
				alert("3n次被单击" + event);
			}, function(event) {
				alert("3n + 1次被单击");
			}, function(event) {
				alert("3n + 2次被单击");
			});
			//使用hover为id为test4的元素绑定2个事件处理函数
			//当鼠标移入该元素时触发第一个函数,移出该元素时触发第二个函数
			$("#test4").css("border", "1px solid black").css("background-color",
					"#cccccc").width(200).height(80).hover(function(event) {
				alert("鼠标移入该元素之内!");
			}, function() {
				alert("鼠标移出该元素!");
			});
		</script>
	</body>
 

分享到:
评论

相关推荐

    漂亮的jQuery事件日历插件calendar.js

    **jQuery事件日历插件calendar.js详解** 在网页设计中,日历插件是一个非常实用的元素,尤其在处理日期相关的交互时。"漂亮的jQuery事件日历插件calendar.js"正是这样一个工具,它能帮助开发者轻松地在网页上集成...

    jquery事件

    **jQuery事件** jQuery是JavaScript的一个库,它极大地简化了HTML文档遍历、事件处理、动画设计和Ajax交互。在jQuery中,事件处理是其核心功能之一,使得开发者能够轻松响应用户的交互行为,如点击、鼠标移动、键盘...

    JQuery事件Demo

    本篇文章将深入探讨jQuery事件处理及其相关示例,帮助你更好地理解和运用jQuery在实际项目中的功能。 ### 一、jQuery事件绑定 1. **`$(selector).on(events, handler)`**: 这是jQuery中用于绑定事件的主要方法。`...

    jquery中的ajax方面的方法所触发的完整事件流演示

    本篇文章将深入探讨`jQuery.ajax()`及其相关方法在实现完整事件流中的作用,同时也会涉及到与之相关的源码分析和工具使用。 首先,`jQuery.ajax()`是jQuery提供的一个核心函数,用于发起HTTP请求,通常用于实现AJAX...

    jquery 导出excel方法

    下面将详细介绍jQuery导出Excel的方法,以及相关知识点。 1. **jQuery插件:TableExport** 文件`tableExport.jquery.plugin-a891806`可能是一个名为TableExport的jQuery插件,它允许开发者将HTML表格数据导出为...

    我的第一个jquery封装方法---jquery

    源码部分可能包括了jQuery的选择器、事件处理、DOM操作等关键元素,而"工具"则意味着这个封装方法可能是开发者工具箱中的一个实用组件。 考虑到“menuTree”这个文件名,我们可以预期博客中会涉及以下jQuery相关的...

    jQuery实现给input绑定回车事件的方法

    接下来,我们详细讲解如何利用jQuery给input元素绑定回车事件的两种方法,以及相关的知识点。 ### 知识点一:jQuery基础 在了解如何使用jQuery给input元素绑定回车事件之前,需要对jQuery有一个基本的认识。jQuery...

    jquery鼠标滚轮事件支持插件

    开发者只需在项目中引入插件的JavaScript文件,然后就可以通过jQuery选择器和事件绑定方法来监听和处理滚轮事件。 “jquery-mousewheel-master”是这个插件的源代码仓库,其中包含了插件的主文件和其他相关资源。...

    javascript的onchange事件与jQuery的change()方法比较

    改变一下思路变成键盘按键事件,如下: ”txtName” runat=”server” xss=removed&gt;&lt;/asp&gt; 这里有一点毛病是,你复制粘贴的内容,无法触发这个事件。下面是相关的一些代码: 代码如下: function fNameChange(){ if($...

    鼠标双击或触摸双击事件检测jQuery插件

    jQuery-doubleTap插件提供了一种高效、易于集成的方法,使得开发者可以轻松地在网页中添加鼠标双击和触摸屏双击事件的检测。通过其简洁的API,开发者可以快速实现丰富的交互效果,提高用户体验,尤其在移动设备上,...

    jquery.相关文件

    3. **事件处理(Events)**:jQuery 对事件处理进行了封装,如 `click()`, `change()`, `submit()` 等,以及 `.on()` 方法用于绑定事件监听器。 4. **动画(Animations)**:通过 `fadeIn()`, `fadeOut()`, `...

    JQuery整站扒取下来的,方便查询JQuery的API方法

    本资料包包含整个jQuery网站的内容,旨在提供离线查阅jQuery API和相关示例的便利,帮助开发者随时随地深入学习和掌握jQuery技术。 首先,我们来看看jQuery的核心概念。jQuery库的核心在于它的选择器,它允许开发者...

    详解jQuery事件

    jQuery 事件是 JavaScript ...总结,jQuery事件是增强用户交互的关键工具,`.on()` 方法提供了灵活的事件绑定方式,支持多个事件绑定和事件委托。理解这些概念并熟练运用,可以使你的JavaScript代码更加高效和可维护。

    jQuery1.12.4+jQuery中文手册.rar

    在这些API文档中,你可以找到jQuery的函数、方法、选择器和事件等方面的详细说明。例如: 1. **选择器**:jQuery提供了丰富的CSS选择器,如`$("#id")`用于选取ID为指定值的元素,`$(".class")`用于选取具有特定类的...

    WEB开发 之 jQuery 事件.docx

    总的来说,jQuery事件处理是Web开发中增强用户体验的关键工具,通过合理利用这些功能,开发者可以创建出响应迅速、交互丰富的网站和应用程序。了解并熟练掌握jQuery的事件处理机制,对于提升Web开发效率和代码质量...

    [jQuery] 事件和动画详解

    【jQuery事件】 jQuery事件是JavaScript事件的一种简化和扩展,使得在JavaScript中处理DOM元素的事件变得更加方便。jQuery提供了一系列的API来绑定、解绑、触发事件,以及处理事件冒泡和默认行为。 1. DOM加载 在...

    jQuery事件函数共4页.pdf.zip

    《jQuery事件函数详解》 jQuery库是JavaScript中最广泛使用的库之一,它极大地简化了DOM操作、事件处理和动画效果。本篇文章将深入探讨jQuery中的事件函数,帮助开发者更高效地处理用户交互。 一、事件绑定:`$...

Global site tag (gtag.js) - Google Analytics