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 load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
JavaScript Array对象详解
Mar 01 Javascript
js只执行1次的函数示例
Jul 20 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
PHP开发框架总结收藏
2008/04/24 PHP
PHP集成FCK的函数代码
2008/09/27 PHP
php目录操作实例代码
2014/02/21 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
python中单下划线_的常见用法总结
2018/07/10 Python
使用django实现一个代码发布系统
2019/07/18 Python
Python3 读取Word文件方式
2020/02/13 Python
使用Python发现隐藏的wifi
2020/03/04 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
统计员岗位职责
2013/11/14 职场文书
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python