jquery中change()用法实例分析


Posted in Javascript onFebruary 06, 2015

本文实例分析了jquery中change()的用法。分享给大家供大家参考。具体分析如下:

change()当元素的值发生改变时,会发生 change 事件。该事件仅适用于文本域(text field),以及 textarea 和 select 元素。
当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。
 
一、change的用法

1、触发 change 事件:触发被选元素的 change 事件

语法: $(selector).change()

2、将函数绑定到 change 事件:规定当被选元素的 change 事件发生时运行的函数。

语法: $(selector).change(function)

二、jquery中change()实例

<html>
<head>
<script type="text/javascript" src="jquery文件"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
 });
 $("button").click(function(){
  $("input").change();
 });
});
</script>
</head>
<body>
<button>激活文本域的 change 事件</button>
<p>Enter your name: <input class="field" type="text" /></p>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="jquery文件"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
 });
});
</script>
</head>
<body>
<p>在某个域被使用或改变时,它会改变颜色。</p>
Enter your name: <input class="field" type="text" />
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
JavaScript 学习点滴记录
Apr 24 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
Bootstrap table使用方法总结
May 10 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
javaScript的函数对象的声明详解
Feb 06 #Javascript
javascript实用方法总结
Feb 06 #Javascript
javascript实现限制上传文件大小
Feb 06 #Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 #Javascript
javascript去除字符串左右两端的空格
Feb 05 #Javascript
jQuery判断对象是否存在的方法
Feb 05 #Javascript
jquery实现对联广告的方法
Feb 05 #Javascript
You might like
ASP和PHP都是可以删除自身的
2007/04/09 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
php测试kafka项目示例
2020/02/06 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
Python中Collection的使用小技巧
2014/08/18 Python
python获取当前日期和时间的方法
2015/04/30 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
Python魔法方法功能与用法简介
2019/04/04 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
庆八一活动方案
2014/01/25 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
清洁工个人总结
2015/03/04 职场文书