开发asp.net mvc程序,多少是离不开jQuery客户程序。今天Insus.NET学习jQuery的一个on事件驱动。

先在网页视图放一个图片铵钮,用户可以使用mouse对这图片时行over,out或是click,根据不同的事件来更变图片src。

控制器中创建一个Action:

创建视图:

建好视图之后,分别按钮上面标记1至3步骤来实现,标记1是拉一个input,type为image; 标记2引用jQuery类库;标记3是实现所有事件代码。

在script中,先定义好三个图片src路径:

在网页加载,把原始图片也加载上去:

当用户把mouse移至图片上去时over,它会更变原始图片。.on('mouseover',function(){...}

当用户把mouse移开图片时out,图片切换为原来的原始图片。.on('mouseout', function () {...}

如果用户把mouse移至图片并按下mouse左键click时,我们实现再次变更图片src路径。

演示一下,看看最终的效果:

jQuery的代码可以链chaining来实现,看看:

学习jQuery的on事件的更多相关文章

  1. jQuery中的事件和动画 以及视频展示效果实例

    经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...

  2. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  3. JS和JQuery中的事件托付 学习笔记

    事件托付事实上并非一个非常高级的技巧,比方在一个页面里面.当仅仅存在两个button的时候.可能你给button加入监听是这种:(本文不考虑浏览器兼容性.关于事件的兼容性可參考前面的学习笔记) < ...

  4. jQuery Mobile的学习时间bottonbutton的事件学习

    程序猿都非常懒.你懂的! 生命的绝唱来机仅仅争朝夕,如诗的年华更需惜时如金. 不要让今天的懈怠成为一生的痛. 每天都在进步. 近期在学习jquery mobile开发.使用的button,绑定事件,和 ...

  5. 深入学习jQuery鼠标事件

    × 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...

  6. jQuery学习笔记(三)jQuery中的事件

    目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一.加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...

  7. 【jQuery基础学习】03 jQuery中的事件与动画

    关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...

  8. 锋利的JQuery学习之JQuery中的事件

    一.加载DOM 在页面加载完毕之后,浏览器会通过javascript为dom元素添加事件,在常规的javascript中使用window.onload方法,而在jQuery中使用的是$(documen ...

  9. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

随机推荐

  1. 【代码笔记】iOS-GTMBase64

    一,工程文件. 二,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading th ...

  2. django 验证用户是否登陆

    第一步 指定一下登陆url. url(r'^accounts/login/$', include(xadmin.site.urls)), 由于我用的xadmin故而指向了xadmin,如果使用默认的a ...

  3. ORA-07445&ORA-00108错误案例

    由于需要ORACLE的UAT测试环境,克隆了虚拟机后,修改IP地址后,启动实例遇到了ORA-07445 &ORA-00108错误. 案例环境:   SQL> select * from ...

  4. asp.net mvc jQuery 城市二级联动

    页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...

  5. 烂泥:nagios学习(四):pnp4nagios图形化绘制nagios数据

    本文由秀依林枫提供友情赞助,首发于烂泥行天下 在nagios安装完毕后,我们也添加了一些监控对象,但是你会发现nagios只是简单的给我们列出那些监控对象是正常的,而没有把这些监控对象的数据进行整合. ...

  6. 烂泥:SQL Server 2005数据库安装

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 为了能更好的利用服务器,所以打算把该业务进行迁移.因为该业务比较特殊,需要服务器上有相应的硬件支持,所以打算直接升级该服务器目前的操作系统.目前公司服务 ...

  7. centos yum源配置

    5步搞定yum源配置 作者小波/QQ463431476欢迎转载! 第一步: 卸载原来的yum [root@localhost home]#rpm -qa|grep yum|xargs rpm -e - ...

  8. Linux 下子线程的 pthread_cleanup_push() 和 pthread_cleanup_pop() 研究

    线程退出前可能有一些清理工作,但是这部分代码又不会放到线程主体部分,就需要挂接一个或者几个线程“清洁工”来做这部分事情.需要这对兄弟: #include<pthread.h> void p ...

  9. 上一周,小白的我试着搭建了两个个人博客:在github和openshift上

    上一周,突发奇想,想搭建个自己的博客. 由于是突发奇想,自然想先找免费的试试手.仔细搜索下,选定了目标Openshift和Github. Openshift 安装WordPress OpenShift ...

  10. BI软件搞不定业务管理报表的需求

    BI是商业智能的缩写,是可以帮助企业做出明智的业务经营决策的工具,其数据来源于各个业务系统,如ERP.CRM.SCM.进销存.HER.OA等. BI系统不同于传统的管理信息系统,他号称是一个整体应用的 ...