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 相关文章推荐
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
JavaScript学习笔记(二) js对象
Oct 25 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
vue路由传参三种基本方式详解
Dec 09 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 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
php&amp;java(一)
2006/10/09 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Python可变参数函数用法实例
2015/07/07 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
python 连接sqlite及简单操作
2017/06/30 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
对python生成业务报表的实例详解
2019/02/03 Python
python pygame实现五子棋小游戏
2020/10/26 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
简单了解python元组tuple相关原理
2019/12/02 Python
python pillow库的基础使用教程
2021/01/13 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
商务英语应届生自我鉴定
2013/12/08 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
中学生励志演讲稿
2014/04/26 职场文书
娱乐节目策划方案
2014/06/10 职场文书
网络技术专业求职信
2014/07/13 职场文书