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分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
js实现分页功能
May 24 Javascript
require.js中的define函数详解
Jul 10 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
es6函数之尾递归用法实例分析
Apr 25 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
ADODB类使用
2006/11/25 PHP
php addslashes 函数详细分析说明
2009/06/23 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
基于PHP制作验证码
2016/10/12 PHP
再论Javascript下字符串连接的性能
2011/03/05 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
python 测试实现方法
2008/12/24 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
Python学习小技巧总结
2018/06/10 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
Python API len函数操作过程解析
2020/03/05 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
python中pyplot基础图标函数整理
2020/11/10 Python
python爬虫请求头的使用
2020/12/01 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
编程用JAVA解析XML的方式
2013/07/07 面试题
假日旅行社实习自我鉴定
2013/09/24 职场文书
新闻专业推荐信范文
2013/11/20 职场文书
社区八一活动方案
2014/02/03 职场文书
推荐信格式要求
2014/05/09 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
element多个表单校验的实现
2021/05/27 Javascript