`
gwpking8419
  • 浏览: 10045 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

jQuery教程之鼠标事件

阅读更多
jQuery除了选择器之外,还封装了很多事件的处理,比如鼠标事件,所谓 的鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键而触发的事件,jQuery中封装了几乎所有的鼠标事件,包括点击,双击,移出,移入等鼠标事件,下 面断桥残雪简单的介绍下jQuery的鼠标事件
jQuery的click事件

经典鼠标click的实例:
$("sel").click(function(){
    alert('哈哈 !');
});
jQuery的dbclick事件

一般dbclick事件的同时也会触发两次click事件。。以前我写过一篇博客简单的介绍了下jQuery的鼠标双击事件
$('p').dbclick(function(){
alert('鼠标双击!');
});
$('p').click(function(){
alert('点击了一下!');
});//大家看看结果是怎么样的?
jQuery的mousedown事件

mousedown就是在按下鼠标时触发的事件
$(’p’).mousedown(function(){
alert(’按下了鼠标 !’);
});
jQuery的mouseup事件

同上就是松开鼠标时候触发的事件,如果在于按下鼠标的相同元素上松开,那么也会触发click事件,mousedown和mouseup事件一般有 在div拖拽等效果中
$('p').mouseup(function(){
alert('鼠标起来了 !');
}).click(function(){
alert('点击了下鼠标!');
});
jQuery的mouseover事件

mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发,如果需要知道来自那个元素可以使用,relatedTagrget属性
jQuery的mouseout事件

mouseout事件于用户把鼠标移出一个元素时触发,这包括从父元素移动到子元素上,或者使用键盘跳到元素上。
jQuery的mouseenter事件

和mouseover事件类似,但两者有区别
jQuery的mouserleaver事件

同上和mouseout事件类似.
hover事件

其实hover事件内部就是使用了mouseenter和mouseleaver事件,我们可以使用jQuery的hover这个函数来代替上面的 两个函数
$('p').hover(function(){
alert('这个function里放mouseenter 的事件!');
},function(){
alert('这里是mouseleaver function!');
});
这里我们没有鼠标右键事件?其实使用jQuery的mousedown事件然后再函数里判断就OK了
分享到:
评论
1 楼 ccy953384950 2012-03-19  
我想问楼主,怎样获取鼠标拖动所覆盖的行的某个属性值?

相关推荐

    jquery捕获鼠标事件提示.zip

    本教程将深入探讨如何使用jQuery来捕获鼠标事件并创建提示效果。 首先,`index.html`是网页的结构文件,通常包含了HTML元素,如`<head>`用于设置页面元数据,`<body>`用于展示内容,以及引用外部资源如CSS样式表和...

    JQuery教程,CHM格式的

    3. **事件处理**: jQuery的事件处理也非常直观,例如`$(selector).click(function() {...})`为点击事件绑定回调函数,`$(selector).on("mouseover", function() {...})`监听鼠标悬停事件。 二、jQuery特效 1. **...

    jquery教程 15天学会jquery(完整版)

    **jQuery教程 15天学会jQuery(完整版)** jQuery是一款高效、易用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本教程的目标是在15天内帮助初学者全面掌握jQuery的核心概念和...

    jQuery 教程.doc

    ### jQuery 教程知识点详解 #### 一、jQuery 概述 - **定义**:jQuery 是一个快速、简洁的 JavaScript 库,它极大地简化了 HTML 文档遍历、事件处理、动画以及 AJAX 交互等任务。 - **特点**:jQuery 的核心特性...

    jQuery实现鼠标滑过鼠标变色功能

    在本教程中,我们将深入探讨如何利用jQuery实现一个功能:当鼠标滑过表格时,使得行背景色发生变化,即所谓的“鼠标悬停高亮”效果。这个效果可以提升用户体验,帮助用户更清楚地识别和跟踪选中的表格行。 首先,...

    jquery鼠标悬停图片标题滑动

    "jquery鼠标悬停图片标题滑动"是一个常见的jQuery应用场景,主要用于提升用户体验,当用户将鼠标悬停在图片上时,图片的标题会以平滑的方式展示出来。这种效果可以增加网站的视觉吸引力,同时也能有效地呈现图片信息...

    jQuery基础教程(第四版)中文pdf版+配套源码

    接着,教程深入讲解jQuery的选择器,这是jQuery最强大的功能之一。从基本的选择器(如ID选择器、类选择器和元素选择器)到更复杂的选择器组合,如后代选择器、兄弟选择器和属性选择器,读者将学会如何精准地选取页面...

    jquery鼠标滑过显示二级下拉菜单代码

    本教程将深入讲解如何使用jQuery来实现鼠标滑过显示二级下拉菜单的代码实现。 首先,我们需要了解HTML结构。一个基本的二级下拉菜单通常由`<ul>`元素构建,其中包含一级菜单项`<li>`,每个一级菜单项内嵌套另一个`...

    相当牛的jQuery动感TipBox,鼠标移上去会动的提示框哦

    本教程将深入讲解如何利用jQuery创建一个“动态TipBox”,即鼠标悬停时会动的提示框。 首先,让我们了解jQuery的基本用法。jQuery的核心在于选择器,它能够高效地选取DOM元素。例如,使用`$("#id")`选择ID为"id"的...

    jquery鼠标悬停动画效果

    本教程将深入讲解如何使用jQuery来创建一个鼠标悬停时的动画效果,具体表现为当鼠标移到图片上方时,小图片会缓缓向上移动并最终静止。 首先,我们需要在HTML文件中引入jQuery库。这可以通过在头部添加CDN链接或者...

    jquery 鼠标经过显示大图

    在这个特定的应用中,jQuery将帮助我们轻松地监听鼠标事件并改变DOM(Document Object Model)元素的属性,如大小和可见性。 1. **基本步骤**: - 引入jQuery库:在HTML文件中,我们需要引入jQuery库,例如`...

    jQuery背景图片跟随鼠标摆动特效.zip

    本教程将聚焦于一个特定的jQuery特效——"背景图片跟随鼠标摆动",这是一个能够提升用户交互体验的创新设计。这个特效使得网页背景图片根据用户的鼠标移动而动态变化,增加了视觉吸引力和趣味性。 首先,我们需要...

    jquery框架和教程

    本教程将深入探讨jQuery的核心概念,包括其选择器、DOM操作、事件、Ajax以及源码分析。 ### 一、jQuery选择器 jQuery的选择器类似于CSS,用于在HTML文档中快速定位元素。例如: - `$('*')`:选择所有元素。 - `$...

    jQuery基础教程(第四版)中文

    jQuery简化了事件绑定的过程,可以使用`.on()`方法轻松绑定点击、鼠标移动等各种事件。同时,jQuery还提供了事件冒泡和阻止默认行为的管理功能。 jQuery的动画效果是其独特魅力之一。`.fadeIn()`, `.slideUp()`, `....

    jquery 图片特效 鼠标悬停图片显示文字与标题内容特效

    本教程将详细讲解如何利用jQuery实现一个图片特效,即当鼠标悬停在图片上时,图片下方会显示相关的文字与标题内容。 首先,要使用jQuery,你需要在HTML文件中引入jQuery库。这通常通过在`<head>`标签内添加以下代码...

    jquery鼠标经过图片显示悬浮按钮图片特效.zip

    本教程将探讨如何利用jQuery实现一个鼠标经过图片时显示悬浮按钮的图片特效,这在网页互动性和用户体验方面有着显著的提升。我们将深入讨论相关的jQuery代码、HTML结构以及CSS样式,来帮助你创建一个类似的图片相册...

    jQuery仿淘宝鼠标悬停动画图标导航特效

    本教程将探讨如何利用jQuery来实现一个仿淘宝的鼠标悬停动画图标导航特效,这个特效可以提升用户体验,使网站更具吸引力。 首先,我们需要了解jQuery的基本用法。jQuery的核心功能包括选择器(用于选取HTML元素)、...

    jquery hover事件鼠标悬停九宫格图片高亮显示代码

    本教程将深入探讨如何利用jQuery的`hover`事件实现鼠标悬停时九宫格图片的高亮显示效果。这个效果可以增强用户对网页内容的互动体验,使用户更容易注意到并操作特定的图像元素。 首先,我们需要理解`hover`事件。在...

    jquery鼠标悬浮翻转缩略图

    本教程将详细讲解如何利用jQuery实现一个鼠标悬浮时翻转缩略图的功能。 首先,我们需要了解jQuery的基本用法。jQuery通过选择器(如ID、类名或元素类型)来选取DOM元素,然后可以对这些元素执行各种操作。例如,`$...

    jquery框架实现鼠标放置时出现全部图片

    本教程将深入探讨如何利用jQuery框架来实现一个功能:当鼠标悬停在图片上时,显示完整的图片。这个效果常用于图片预览或缩略图展示,能提升用户体验。 首先,我们需要理解基本的HTML结构。在这个场景中,我们可能有...

Global site tag (gtag.js) - Google Analytics