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 相关文章推荐
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
多个js与css文件的合并方法详细说明
Dec 26 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
Vue之封装公用变量以及实现方式
Jul 31 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
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下将XML转换为数组
2010/01/01 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
jquery插件jSignature实现手动签名
2015/05/04 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
重命名批处理python脚本
2013/04/05 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
详解python while 函数及while和for的区别
2018/09/07 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
中专生自我鉴定范文
2013/12/19 职场文书
筑梦中国心得体会
2016/01/18 职场文书
担保书怎么写 ?
2019/04/22 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python
Android中View.post和Handler.post的关系
2022/06/05 Java/Android