jQuery中hover方法和toggle方法使用指南


Posted in Javascript onFebruary 27, 2015

jQuery提供一些方法(如:toggle)将两种事件效果合并到一起,比如:mouseover、mouseout;keyup、keydown等

1、hover函数

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

<script type="text/javascript">

$(function(){

    $("#panel h5.head").hover(function(){

        $(this).next().show();// 鼠标悬浮时触发

    },function(){

        $(this).next().hide();// 鼠标离开时触发

    })

})

</script>

2、toggle函数

    toggle(fn,fn) 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。 可以使用unbind("click")来删除。

<script type="text/javascript">

$(function(){

    $("#panel h5.head").toggle(function(){

        $(this).next().show();// 第一次点击时触发

    },function(){

        $(this).next().hide();// 第二次点击时触发,之后不停的切换

    })

})

</script>

toggle() 方法切换元素的可见状态。
如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。toggle()方法切换元素的可见状态。
如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

所以上述的代码还可以写成:

<script type="text/javascript">

$(function(){

    $("#panel h5.head").toggle(function(){

         $(this).next().toggle();

    },function(){

         $(this).next().toggle();

    })

})

/*$(function(){

    $("#panel h5.head").click(function(){

         $(this).next().toggle();

    })

})*/

</script>

还可以添加一些css样式:

<style type="text/css">

.highlight{ background:#FF3300; }

</style>

<script type="text/javascript">

$(function(){

    $("#panel h5.head").toggle(function(){//配合css样式使用

        $(this).addClass("highlight");

        $(this).next().show();

    },function(){

        $(this).removeClass("highlight");

        $(this).next().hide();

    });

})

</script>

小伙伴们是否对jQuery中常见的hover事件和toggle事件有了新的认识了呢,希望本文能给大家带来一些帮助。

Javascript 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
jQuery Ajax之load()方法
Oct 12 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 #Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 #Javascript
asp.net+js实现金额格式化
Feb 27 #Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 #Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 #Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 #Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 #Javascript
You might like
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
js同时按下两个方向键
2007/12/01 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
物流合作计划书
2014/01/10 职场文书
简历的自我评价范文
2014/02/04 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
《角的度量》教学反思
2016/02/18 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书