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+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 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
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
js和as的稳定传值问题解决
2013/07/14 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
原生JS实现跑马灯效果
2017/02/20 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
python fabric实现远程部署
2017/01/05 Python
python使用KNN算法手写体识别
2018/02/01 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
python获取整个网页源码的方法
2020/08/03 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
python代码实现图书管理系统
2020/11/30 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
《再别康桥》教学反思
2014/02/12 职场文书
单位介绍信格式范文
2015/05/04 职场文书
施工现场安全管理制度
2015/08/05 职场文书
《打电话》教学反思
2016/02/22 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js