学习jQuery的on事件
开发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事件的更多相关文章
- jQuery中的事件和动画 以及视频展示效果实例
经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...
- JS和JQuery中的事件托付 学习笔记
事件托付事实上并非一个非常高级的技巧,比方在一个页面里面.当仅仅存在两个button的时候.可能你给button加入监听是这种:(本文不考虑浏览器兼容性.关于事件的兼容性可參考前面的学习笔记) < ...
- jQuery Mobile的学习时间bottonbutton的事件学习
程序猿都非常懒.你懂的! 生命的绝唱来机仅仅争朝夕,如诗的年华更需惜时如金. 不要让今天的懈怠成为一生的痛. 每天都在进步. 近期在学习jquery mobile开发.使用的button,绑定事件,和 ...
- 深入学习jQuery鼠标事件
× 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...
- jQuery学习笔记(三)jQuery中的事件
目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一.加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...
- 【jQuery基础学习】03 jQuery中的事件与动画
关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...
- 锋利的JQuery学习之JQuery中的事件
一.加载DOM 在页面加载完毕之后,浏览器会通过javascript为dom元素添加事件,在常规的javascript中使用window.onload方法,而在jQuery中使用的是$(documen ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
随机推荐
- OC 中的block存储位置
以下所有在ARC情况下: 一.block块的存储位置(block块入口地址):可能存放在2个地方:代码区.堆区(程序分5个区,还有常量区.全局区和栈区,对于MRC情况下代码还可能存在栈区.关于分区详细 ...
- Mac OS 下的解压缩软件——The Unarchiver
The Unarchiver 是 Mac 上最流行的解压软件,免费开源.操作方式与系统自带解压工具 Archive Utility.app 一样,双击自动解压.最爽的一点是把解压后原始文件直接仍进废纸 ...
- Asp.net中实现同一用户名不能同时登录(单点登录)
Web 项目中经常遇到的问题就是同一用户名多次登录的问题,相应的解决办法也很多,总结起来不外乎这几种解决办法: 将登录后的用户名放到数据库表中: 登录后的用户名放到Session中: 登录后的用户名放 ...
- git之二
1.什么是版本库? 版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何时刻都可以追踪历史 ...
- 区别和详解:jQuery extend()和jQuery.fn.extend()
1.认识jQuery extend()和jQuery.fn.extend() jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部 ...
- 天书笔记:HTML+CSS实现顶部导航栏
此笔记纯属本人脑残笔记,阅读困难不理解属正常现象,初学者尽量不要阅读,否则轻则口吐白沫重则走火入魔,切记切记 先晒效果图: 效果要求类似于b站的顶部导航(..原谅我老是拿b站做例子:) ) 然后是代码 ...
- 0003 64位Oracle11gR2不能运行SQL Developer的解决方法
"应用程序开发"下的"SQL Developer"双击不可用,出现“Windows正在查找SQLDEVELOPER.BAT"的提示,如下图: 搜索博客 ...
- VC++ Debug编译方式
字节填充 VC++在Debug编译方式下,new的内存用0xcd(助记词为Cleared Data)填充,防止未初始化: delete后,内存用0xdd(Dead Data)填充,防止再次被使用. 这 ...
- Android程序函数 将assets文件夹下的文件复制到手机的sd卡中(包括子文件夹)
最近在做个功能是将asset文件夹下的所有文件(包括子文件)全部拷贝出来到指定目录下.所用的方法无非是用AssetManager.但是这里 有个问题是也要讲子文件夹和子文件都要拷贝出来.到网上Goog ...
- TCL校园招聘——软件开发工程师(java) 只招5个。。。
简介 TCL集团股份有限公司创立于1981年,是全球性规模经营的消费类电子企业集团之一,广州2010年亚运会合作伙伴,总部位于广东省惠州市仲恺高新区TCL科技大厦.旗下拥有TCL集团.TCL多媒体科技 ...