jquery-11 jquery中的事件切换如何实现

一、总结

一句话总结：事件切换hover()和toggle()函数。参数两个，都是函数，依次执行两个函数。

1、如何实现单击切换图片？

用toggle()方法，参数为两函数

26 $('img').toggle(

27     function(){

28         this.src='b.png';

29     },

30     function(){

31         this.src='a.png';

32     }

33 );

2、如何实现谋元素鼠标移入和移出执行不同的函数？

用hover()方法

26 $('img').hover(

27     function(){

28         this.src='b.png';

29     },

30     function(){

31         this.src='a.png';

32     }

33 );

3、如何实现某个元素交替执行不同的方法？

用toggle()方法，参数为两函数

26 $('img').toggle(

27     function(){

28         this.src='b.png';

29     },

30     function(){

31         this.src='a.png';

32     }

33 );

二、jquery中的事件切换如何实现

4.事件切换
hover();
toggle();

toggle循环单击

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>index</title>

     <style>

         #div1{

             position: absolute;

             top:0px;

             left:0px;

             border-radius:256px;

             width:256px;

             height:256px;

             background: #ccc;

             overflow: hidden;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <div id="div1">

          <img src="a.png">

     </div>

 </body>

 <script>

 $('img').toggle(

     function(){

         this.src='b.png';

     },

     function(){

         this.src='a.png';

     }

 );

 </script>

 </html>

循环移入和移出

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>index</title>

     <style>

         #div1{

             position: absolute;

             top:0px;

             left:0px;

             border-radius:256px;

             width:256px;

             height:256px;

             background: #ccc;

             overflow: hidden;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <div id="div1">

          <img src="a.png">

     </div>

 </body>

 <script>

 $('img').hover(

     function(){

         this.src='b.png';

     },

     function(){

         this.src='a.png';

     }

 );

 </script>

 </html>
 

jquery-11 jquery中的事件切换如何实现的更多相关文章

  1. jQuery文本框中的事件应用

    jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  2. JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...

  3. 使用jQuery在javascript中自定义事件

    js中的自定义事件有attachEvent,addEventListener等等好多种,往往受困于浏览器兼容,而且代码写起来也相当麻烦.jQuery为我们解决了这个问题,几行代码就可以很好的实现事件的 ...

  4. JQuery 在循环中设置事件,最后一个覆盖了前面所有的设置

    function setValidation() {         for (i = 0; i < alValidations.length; i++) { //alValidations是一 ...

  5. jQuery中的事件（七）

    1. ready(fn), 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数 这个方法纯粹是对向window.load事件注册事件的替代方法.通过使用这个方法,可以在DOM载入就绪能够读取并操纵时 ...

  6. 第四篇 jQuery中的事件与应用

    4.1 事件中的冒泡现象,ready()方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  7. 四、jquery中的事件与应用

    当用户浏览页面时,浏览器会对页面代码进行解释或编译--这个过程实质上是通过时间来驱动的,即页面在加载时,执行一个Load事件,在这个事件中实现浏览器编译页面代码的过程.时间无论在页面元素本身还是在元素 ...

  8. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  9. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

随机推荐

  1. cluster discovery概述及FaultDetection分析

    elasticsearch cluster实现了自己发现机制zen.Discovery功能主要包括以下几部分内容:master选举,master错误探测,集群中其它节点探测,单播多播ping.本篇会首 ...

  2. BZOJ4182: Shopping(点分治，树上背包)

    Description 马上就是小苗的生日了,为了给小苗准备礼物,小葱兴冲冲地来到了商店街.商店街有n个商店,并且它们之间的道路构成了一颗树的形状. 第i个商店只卖第i种物品,小苗对于这种物品的喜爱度 ...

  3. codeforces 1037E. Trips（倒叙）

    题目传送门: 解题思路: 正着搞好像有点恶心. 反着搞. 一边删一边搞,从崩坏的地方开始,入度--. 最后dfs崩坏,更新答案. 注意要把边删掉防止重复崩坏. 代码: #include<cstd ...

  4. ArcGIS小技巧——提取面要素的质心点

    如下图,现在要做这样一件事,提取面图层中每一个图斑的质心点,然后使用质心点提取图层中的一个属性值,并在此基础上进行克里金插值,生成该属性的空间插值图.当然,今天这段文字主要简单说一下怎样提取面图层的质 ...

  5. liunx中安装禅道

    本文转自:https://www.cnblogs.com/bendouyao/p/10026746.html 一.准备工作 禅道安装包ZenTaoPMS.8.1.3.zbox_64.gz,上传至服务器 ...

  6. Direct2D开发：向 MFC 项目添加 Direct2D 对象

    0X01 创建 MFC 应用程序: 在“文件”菜单上指向“新建”,然后单击“项目”. 在“新建项目”对话框左窗格的“已安装的模板”下,展开“Visual C++”,然后选择“MFC”. 在中间窗格中, ...

  7. java位运算应用

    位移动运算符: <<表示左移, 左移一位表示原来的值乘2. 比如:3 <<2(3为int型)  1)把3转换为二进制数字0000 0000 0000 0000 0000 000 ...

  8. SQLite-SQLiteDatabase 数据库实例练习

    今天趁着有时间,自己在网上找了相关的数据库操作代码,进行了一下练习,先上代码 main.xml文件 <RelativeLayout xmlns:android="http://sche ...

  9. Flume Channels官网剖析(博主推荐）

    不多说,直接上干货! Flume Sources官网剖析(博主推荐) 一切来源于flume官网 http://flume.apache.org/FlumeUserGuide.html Flume Ch ...

  10. HTTP请求报文、响应报文

    HTTP请求报文 HTTP请求报文由3部分组成(请求行+请求头+请求体): 请求行:①是请求方法,GET和POST是最常见的HTTP方法,除此以外还包括DELETE.HEAD.OPTIONS.PUT. ...