jQuery实现单击和鼠标感应事件


Posted in Javascript onFebruary 01, 2015

1.实现单击事件动态交替

之前我们讲到了toggleClass(),对于单击事件而言,jQuery同样提供了动态交替的toggle()方法,这个方法接受两个参数,两个参数均为监听函数,在click事件中交替使用。

例子:点击事件的动态交互。

<script type="text/javascript">

            $(function() {

                $("#ddd").toggle(

                    function(oEvent) {

                        $(oEvent.target).css("opacity", "0.5");

                    },

                    function(oEvent) {

                        $(oEvent.target).css("opacity", "1.0");

                    }

                );

            });

        </script>

        <div id="ddd">11</div>

2.实现鼠标感应

在css中可以利用:hover伪类实现样式的改版,实现单独的css样式,在jQuery引入后,几乎所有的元素都可以用hover()来感应鼠标。并且可以制作更复杂的效果。其本质是mouseover和mouseout事件的合并
hover(over,out)方法可接受两个参数,均为函数。第一个是鼠标移动到元素上面触发,第二个是鼠标移出元素时触发。

<script type="text/javascript">

            $(function() {

                $("#ddd").hover(

                    function(oEvent) {

                        //第一个函数相当于mouseover事件监听

                        $(oEvent.target).css("opacity", "0.5");

                    },

                    function(oEvent) {

                        //第二个函数相当于mouseover事件监听

                        $(oEvent.target).css("opacity", "1.0");

                    }

                );

            });

        </script>

        <div id="ddd">11</div>

与第一个例子相比,只是把toggle()换成了hover().

受wenzi0_0指导,写几个关于toggle()的小例子

1.常规的应用

<script type="text/javascript">

            $(function() {

                $("#ddd").click(function(){

                $("#eee").toggle();    

                });

            });

        </script>

        <div id="ddd">11</div>

        <div id="eee">122</div>

2.css属性

<script type="text/javascript">

            $(function(){

                $("#eee").toggle(function() {

                        $("#ddd").css("background-color", "green");

                    },

                    function() {

                        $("#ddd").css("background-color", "red");

                    },

                    function() {

                        $("#ddd").css("background-color", "yellow");

                    }

                );

            });

        </script>

        <div id="ddd">11</div>

        <div id="eee">122</div>

本文就先到这里了,小伙伴们是否对jQuery鼠标事件有新的认识了呢,希望小伙伴们能够喜欢。

Javascript 相关文章推荐
浅谈javascript的数据类型检测
Jul 10 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
js拦截alert对话框另类应用
Jan 16 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
jquery制作LED 时钟特效
Feb 01 #Javascript
thinkphp 表名 大小写 窍门
Feb 01 #Javascript
javascript实现带节日和农历的日历特效
Feb 01 #Javascript
2种jQuery 实现刮刮卡效果
Feb 01 #Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 #Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 #Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 #Javascript
You might like
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
javascript 自定义事件初探
2009/08/21 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
Python导入oracle数据的方法
2015/07/10 Python
Python实现注册、登录小程序功能
2018/09/21 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
python同步windows和linux文件
2019/08/29 Python
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
留学自荐信的技巧
2013/10/17 职场文书
毕业生个人投资创业计划书
2014/01/04 职场文书
yy婚礼主持词
2014/03/14 职场文书
安全教育月活动总结
2014/05/05 职场文书
个人承诺书格式
2014/06/03 职场文书
代领毕业证委托书
2014/08/02 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
七年级语文教学反思
2016/03/03 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript