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 相关文章推荐
关于JavaScript中string 的replace
Apr 12 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
vue debug 二种方法
Sep 16 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 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
计数器详细设计
2006/10/09 PHP
php经典算法集锦
2015/11/14 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
javascript getElementsByName()的用法说明
2009/07/31 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
利用python画出折线图
2018/07/26 Python
python3中property使用方法详解
2019/04/23 Python
python实现数据分析与建模
2019/07/11 Python
python numpy数组中的复制知识解析
2020/02/03 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
快餐店的创业计划书范文
2014/01/29 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
2014年统战工作总结
2014/12/09 职场文书
情人节活动总结范文
2015/02/05 职场文书
自主招生自荐信格式
2015/03/04 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
MySQL创建定时任务
2022/01/22 MySQL
使用scrapy实现增量式爬取方式
2022/06/21 Python