JQuery 拥有比较简洁的事件支持，我们只需要写少量JS代码，就可以处理页面的事件。
以下为一个事件实例：
<html>
<head>
<script type="text/javascript" src="scripts/jquery-1.2.1.js">
</script>
<script type="text/javascript">
$(function(){
$('#vstar')[0].onmouseover = function(event) {
say('Whee!');
}
});
function say(text) {
$('#console').append('<div>'+new Date()+' '+text+'</div>');
}
</script>
</head>
<body>
<div id="vstar">JUST HI</div>
<div id="console"></div>
</body>
</html>
这里只要我们的鼠标一移动到id为vstar的DIV上，一但激活onmouseover事件，就会立刻在id为console的DIV后面被连接（使用append方法）上<div>'+new Date()+' '+text+'</div>。
从这个例子中可以看出，因为有了JQuery强大的选择器，包括一些实用方法，使得这个原本繁杂的JS代码，变的简洁了许多。而且此代码还可以继续的缩减。
现在有了JQuery，我们可以让事件处理变的更简单有效。我们可以建立事件处理程序而无须浏览器特定代码。
我们可以使用BIND（）方法，可以在DOM元素上建立事件处理程序。如：
$("#img").bind('click',function(event){alert("Hi,i am here");});
利用JQuery选择器，选择了id为img的DOM元素，利用bind方法，只要一对此ID为img的DOM元素，一进行click事件，立刻就弹出Hi,i am here。
比如以下HTML：
<html>
<head>
<script type="text/javascript" src="scripts/jquery-1.2.1.js">
</script>
<script type="text/javascript">
$(function(){
$('#vstar')
.bind('click',function(event) {
say('Whee once!');
})
.bind('click',function(event) {
say('Whee twice!');
})
.bind('click',function(event) {
say('Whee three times!');
});
});
function say(text) {
$('#console').append('<div>'+text+'</div>');
}
</script>
</head>
<body>
<img id="vstar" src="vstar.jpg"/>
<div id="console"></div>
</body>
</html>
我们使用了JQUERY事件模型，而无需二级DOM模型。
下面的例子是使用JQuery的toggle()方法，每次click事件发生，就会互换。toggle(funtion1,funtion2)：
<html>
<head>
<script type="text/javascript" src="scripts/jquery-1.2.1.js">
</script>
<script type="text/javascript">
$(function(){
$('#vstar').toggle(
function(event) {
$(event.target).css('opacity',0.4);
},
function(event) {
$(event.target).css('opacity',1.0);
}
);
});
</script>
</head>
<body>
<img id="vstar" src="vstar.jpg"/>
</body>
</html>
JQuery监控Hover事件的例子：
<html>
<head>
<script type="text/javascript"
src="scripts/jquery-1.2.1.js"></script>
<script type="text/javascript">
function report(event) {
$('#console').append('<div>'+event.type+'</div>');
}
$(function(){
$('#outer1')
.bind('mouseover',report)
.bind('mouseout',report);
$('#outer2').hover(report,report);
});
</script>
</head>
<body>
<div id="outer1">
Outer 1
<div id="inner1">Inner 1</div>
</div>
<div id="outer2">
Outer 2
<div id="inner2">Inner 2</div>
</div>
<div id="console"></div>
</body>
</html>
这里有了一个新方法，hover(overListener,outListener)，它几乎可以代替以bind('evenName',function)这种显示的检测方法。hover()可以自动监听mouseover或mouseout。
分享到：
相关推荐
天文台是一个高效且功能丰富的发布/订阅（Pub/Sub）模式实现，它专门为 JavaScript 设计，尤其值得一提的是它集成了完整的 jQuery 事件支持。在软件设计中，发布/订阅模式是一种通信方式，允许组件之间解耦，使得...
jQuery主要支持的事件 比如 .blur() 表单元素失去焦点。 .change() 表单元素的值发生变化 .click() 鼠标单击 .dblclick() 鼠标双击
**jQuery事件日历插件calendar.js详解** 在网页设计中，日历插件是一个非常实用的元素，尤其在处理日期相关的交互时。"漂亮的jQuery事件日历插件calendar.js"正是这样一个工具，它能帮助开发者轻松地在网页上集成...
在给定的“jquery鼠标滚轮事件支持插件”中，我们关注的是如何利用jQuery扩展来处理鼠标的滚轮事件。这个插件允许开发者监听和响应用户滚动鼠标的滚轮，从而在网页上实现更加动态和交互的功能。 标题中的“jquery...
- **2007年底**: 发布jQuery 1.2，改进CSS选择器，并发布了jQuery UI，增强了用户体验支持。 - **2008年**: 发布1.2.6版本，进一步优化性能。 - **2009年初**: jQuery 1.3版本发布，更新了选择器引擎，新增事件委托...
值得注意的是，`mousewheel`事件在不同浏览器中可能存在差异，尤其是Firefox并不支持这个事件。因此，为了实现跨浏览器兼容性，通常会结合使用`wheel`事件。jQuery的`$.fn.on()`方法可以同时处理这两种事件： ```...
三、jQuery事件 1. 基本事件绑定：jQuery提供了`.on()`方法来绑定事件。例如，`$("#myButton").on("click", function() { ... })`表示当id为"myButton"的元素被点击时，执行匿名函数内的代码。 2. 鼠标事件：常见...
"解决chrome对jQuery的支持问题"这个主题就聚焦于这样一个常见问题：Chrome浏览器对jQuery的`$(document).ready()`函数的执行时机。 `$(document).ready()`，也常被写为`$(function() {...})`，是jQuery中的一个...
除了基本的事件绑定，jQuery还支持事件冒泡和事件委托。事件冒泡是指事件从最深的节点开始，逐级向上层节点传播。在jQuery中，如果不阻止事件冒泡，事件会自动向上级元素传播。而事件委托则是利用事件冒泡机制，将...
为了捕捉这一行为并根据需要做出响应，开发者通常会使用JavaScript或jQuery来监听滚轮事件。本篇将详细介绍如何使用jQuery和原生JavaScript实现鼠标滚轮事件的监听。 一、jQuery监听鼠标滚轮事件 jQuery库提供了一...
除此之外，jQuery还支持`one`方法，用于只执行一次的事件绑定，这对于一次性操作特别有用。例如： ```javascript $(selector).one('customEvent', function() { console.log('This will only be logged once.'); }...
除了基本的点击事件，jQuery还支持许多其他类型的事件，比如`mouseover`（鼠标悬停）、`mouseout`（鼠标离开）、`keydown`（键盘按键按下）、`keyup`（键盘按键释放）等。对于监听DIV的变化，我们可以关注以下几种...
在网页设计中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，动画效果和事件处理。本项目专注于实现一个功能：当用户点击图片时，图片能够放大并支持手机触屏滑动进行图片展示。这样的功能对于提升...
在Web开发领域，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。通常，jQuery是作为JavaScript文件直接在HTML中引用的，但有时开发者可能会遇到需要将jQuery整合到...
此外，该插件支持多事件记录，这意味着在同一天的不同时段，用户可以创建多个提醒，这对于时间管理而言极为实用。而事件记录的精度达到分钟级别，确保了用户可以精确地规划自己的时间。 外观设计方面，这款jQuery...
5. **插件支持**：jQuery 1.4.1 为插件开发提供了更好的支持，使得社区能够开发出大量优秀的第三方插件，丰富了jQuery的功能。 ### jQuery 1.8.3 发布于2012年，jQuery 1.8.3 是一个更成熟和稳定版本，继续对功能...
1. **jQuery**：jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互。它的API设计使得编写JavaScript代码更加简洁和高效。 2. **Eclipse插件系统**：Eclipse采用插件架构，允许...
`.delegate()` 和 `.live()`（在jQuery 1.7后被 `.on()` 替代）则支持事件代理，使得动态生成的元素也能响应事件。 ### 四、jQuery AJAX jQuery 的 AJAX 功能强大，如 `.ajax()`, `.get()`, `.post()` 等方法使得...
本项目“jQuery支持鼠标滚动的时间轴”是利用jQuery的强大功能，结合特定的插件，来实现一个动态的时间轴效果，使得用户可以通过鼠标滚动浏览时间轴上的各个事件。 首先，我们需要引入jQuery库本身，它为我们的页面...