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 相关文章推荐
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
JavaScript数据类型详解
Apr 01 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
详解vue-router基本使用
Apr 18 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
vue实现自定义多选按钮
Jul 16 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调用三种数据库的方法(1)
2006/10/09 PHP
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
Python通过select实现异步IO的方法
2015/06/04 Python
详解python中的线程
2018/02/10 Python
Django中Model的使用方法教程
2018/03/07 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
django项目中新增app的2种实现方法
2020/04/01 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
python能自学吗
2020/06/18 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
python实现扫雷游戏的示例
2020/10/20 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
授权委托书怎么写
2014/04/03 职场文书
房产委托公证书
2014/04/08 职场文书
房产公证书范本
2014/04/10 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
生活小常识广播稿
2014/09/16 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书