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表格行换色的三种实现方法
Jun 27 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
Angular.JS中的this指向详解
May 17 Javascript
JS插入排序简单理解与实现方法分析
Nov 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
也谈 PHP 和 MYSQL
2006/10/09 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
javascript 页面划词搜索JS
2009/09/28 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
python的绘图工具matplotlib使用实例
2014/07/03 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
pandas数据集的端到端处理
2019/02/18 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
节约用电标语
2014/06/17 职场文书
个人授权委托书范本
2014/09/14 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
创业计划书之美容店
2019/09/16 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
vue实现拖拽交换位置
2022/04/07 Vue.js
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server