jQuery中change事件用法实例


Posted in Javascript onDecember 26, 2014

本文实例讲述了jQuery中change事件用法。分享给大家供大家参考。具体分析如下:

change事件会在匹配元素失去焦点或者其值获得焦点并且改变时触发。

一个完整的事件过程,不但要有能够触发事件的条件,而且还要有事件处理程序。
可以通过change()方法为change事件绑定事件处理程序。例如:

$("input").change(function(){$("input").css("backgroundColor","green")})

以上代码就是将function函数作为事件处理程序通过change()方法绑定到change事件。当触发change事件的时候,就会调此函数。
实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("input").change(function(){

    $("input").css("backgroundColor","green")

  }) 

}) 

</script> 

</head> 

<body> 

<div><input type="text" name="content" /></div> 

<div>改变文本框文字就会触发事件</div> 

</body> 

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
react native与webview通信的示例代码
Sep 25 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
深入浅析vue组件间事件传递
Dec 29 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 Javascript
jQuery中mouseover事件用法实例
Dec 26 #Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 #Javascript
Angularjs 基础入门
Dec 26 #Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 #Javascript
Javascript的闭包详解
Dec 26 #Javascript
jQuery中focus事件用法实例
Dec 26 #Javascript
生成二维码方法汇总
Dec 26 #Javascript
You might like
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
基于php权限分配的实现代码
2013/04/28 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
Python实现简单的四则运算计算器
2016/11/02 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
python制作小说爬虫实录
2017/08/14 Python
python Django 创建应用过程图示详解
2019/07/29 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
UNIX文件名称有什么规定
2013/03/25 面试题
销售员岗位职责范本
2014/02/03 职场文书
客服部班长工作责任制
2014/02/25 职场文书
住宅使用说明书
2014/05/09 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
琅琊山导游词
2015/02/05 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电