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 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 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
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python的id()函数解密过程
2012/12/25 Python
python利用datetime模块计算时间差
2015/08/04 Python
对python中的装包与解包实例详解
2019/08/24 Python
opencv+python实现均值滤波
2020/02/19 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
招商业务员岗位职责
2013/12/16 职场文书
死亡证明书样本说明
2014/10/18 职场文书
2014年销售工作总结
2014/12/01 职场文书
学校隐患排查制度
2015/08/05 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
详解SQL报错盲注
2022/07/23 SQL Server