jquery事件切换hover/toggle

1.hover([over,]out)

一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是 否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个 常见错误)。

参数:

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

实例:

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);2.toggle([speed],[easing],[fn])

用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

参数:

speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值:slow,normal,fast。"

easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"

fn:在动画完成时执行的函数,每个元素执行一次。

实例:

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);
 
时间: 2024-11-17 11:40:39

jquery事件切换hover/toggle的相关文章

夺命雷公狗jquery---19事件切换hover

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.js"></script> <script> $(function(){ $('img').hover(function(){ $('#result').html('GOGOGO

jQuery事件机制,动画效果,工具和其他操作(三)

jQuery事件机制 1 事件操作 1.1 页面载入事件 $(document).ready(function(){ // 在这里写你的代码... }); 或者 $(function($) { // 你可以在这里继续使用$作为别名... }); 1.2 事件绑定 on(eve,[sel],[data],fn) 1.7+ 在选择元素上绑定一个或多个事件的事件处理函数 bind(type,[data],fn) 3.0- 请使用on() one(type,[data],fn) 为每一个匹配元素的特定事

2017-6-3 jQuery 事件 DOM操作

1. jQuery 事件: ////hover:相当于相当于把mouseover()mouseout()合二为一 //$("#div1").hover(function () //{ // $(this).css("background-color","red"); //}, // function () // { // $(this).css("background-color", "blue"); //

jquery事件参数和相关事件

1.事件对象eve.currentTarget //当前点击的目标元素eve.data //事件传递的数据eve.delegateTarget1.7+ //在事件委托中 获取委托的元素eve.isDefaultPrevented() //返回值true/false 是否使用过preventDefaulteve.isImmediatePropag...()eve.isPropagationStopped() //返回值true/false 是否使用过stopPropagationeve.names

事件切换及动画队列停止排队效果

//鼠标移入事件 $(".nav > li").mouseover(function(){   $(this).children("ul").slideUp(200); }) //鼠标离开事件 $(".nav > li").mouseout(function(){   $(this).children("ul").slideUp(200); }) 1.事件切换 hover 就是鼠标经过和离开的复合写法 $(&quo

jQuery事件整理回顾

一.事件 1.加载DOM $(document).ready() 这个第一节里详细介绍了 2.事件绑定 jQuery定义了bind()方法作为统一的接口,用来为每一个匹配元素绑定事件处理程序.其基本语法:bind(type,[data],fn); 其中参数type表示事件类型,参数data是可选参数,它可以作为event.data属性值传递给事件对象的额外数据对象.参数fn表示事件处理函数. 例如下例中为p元素绑定单击事件,当点击不同段落文本的时候会提示不同段落文本的内容: [html] vie

jquery事件学习笔记(转载)

一.页面载入1.ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法.通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行.有一个参数--对jQuery函数的引用--会传递到这个ready事件处理函数中.可以给这个参数任意起一个名字,并因此可以

jquery事件总结

转:http://www.cnblogs.com/Jolinson/p/3479079.html#a1.3 JQuery攻略(四)事件 jQuery事件处理,鼠标的单击,双击,悬停,键盘按键,文本动画..... 此章节有 1.1被点击的按钮查找 1.2事件的自动触发 1.3点击之后禁用按钮 1.4鼠标事件 1.5焦点事件 1.6CSS的操作 1.7元素创建 1.8动画隐藏和展示 1.9效果 1.10键盘输入控制 1.11防止事件冒泡 小结 1.1被点击的按钮查找 一个页面上有很多按钮,对应不同的

JQuery 事件及案例

JQuery事件与JavaScript事件相似,只是把其中的on去掉 1.click,dblclick事件 案例1:点击缩略图换背景 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/