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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
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 替换模板变量实现步骤
2009/08/24 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
Python 开发Activex组件方法
2009/11/08 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
python解析xml简单示例
2019/06/21 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
大四毕业生学习总结的自我评价
2013/10/31 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
端午节活动总结
2014/08/26 职场文书
班主任先进事迹材料
2014/12/17 职场文书
导游欢迎词范文
2015/01/23 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript