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 相关文章推荐
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 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
PHP memcache扩展的三种安装方法
2009/04/26 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
AngularJS上传文件的示例代码
2018/11/10 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
python简单线程和协程学习心得(分享)
2017/06/14 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
物业管理公司实习生自我鉴定
2013/09/19 职场文书
自动化专业本科毕业生求职信
2013/10/20 职场文书
团队精神演讲稿
2013/12/31 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
文化活动实施方案
2014/03/28 职场文书
竞选学委演讲稿
2014/09/13 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
Python进行区间取值案例讲解
2021/08/02 Python
OpenCV实现普通阈值
2021/11/17 Java/Android
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server