学习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 Mobile的学习时间bottonbutton的事件学习
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/xmt1139057136/article/details/27700521 程序猿都非常懒,你懂的! ...
从零开始学习jQuery (五) 事件与事件对象【转】
一.摘要事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 二.前言本篇文章是至今为止本系列内容最多的一篇, 足以可见其 ...
从零开始学习jQuery (五) 事件与事件对象
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
java中jquery怎么学,浅谈jQuery中的事件--Java学习网
核心提示:JQuery事件初见1.JQuery中的事件绑定其实呢,JQuery中标准的事件绑定是这样写下:(如下)代码如下:$('#btn').bind('click',function(){}):但 ...
jQuery学习（四）— jQuery的ready事件和原生JS的load事件的区别
jQuery学习(四)- jQuery的ready事件和原生JS的load事件的区别 jQuery的ready事件和原生JS的load事件的区别: 页面中可以有多个ready事件,而load事件会出现 ...
html学习 - jquery事件监听详解
html学习 - jquery事件监听详解 html学习 - jquery事件监听详解监听方法监听方法参数解释 click参数事件自动执行问题解决 bind方法 live方法监听方法在jqu ...
深入学习jQuery鼠标事件
前面的话鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuery鼠标事件类型鼠标事件共10类,包括click.contextmenu.dblclic ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
JQuery中的事件和选择器
学习jQuery最应该了解的也就是JQuery中的事件和选择器. 那么常见的事件有哪些: 鼠标事件:mousedown鼠标按下,mouseup鼠标松开,mouseenter鼠标进入某个元素 mouse ...

学习jQuery的on事件

学习jQuery的on事件相关推荐

最新文章

热门文章