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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
JavaScript 对象链式操作测试代码
Apr 25 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 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
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
Cookie 注入是怎样产生的
2009/04/08 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
列举Python中吸引人的一些特性
2015/04/09 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
三好学生自我鉴定
2013/12/17 职场文书
西式婚礼证婚词
2014/01/12 职场文书
大专生自我评价
2014/01/28 职场文书
酒店营销策划方案
2014/02/07 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
2015年助残日活动总结
2015/03/27 职场文书
java项目构建Gradle的使用教程
2022/03/24 Java/Android
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android