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 相关文章推荐
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
php实现简单文件下载的方法
2015/01/30 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
python列表去重的二种方法
2014/02/14 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
python生成器推导式用法简单示例
2019/10/08 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
幼师自荐信范文
2013/10/06 职场文书
文史专业毕业生自荐信
2013/11/17 职场文书
大学生求职自荐信
2013/12/12 职场文书
初中生物教学反思
2014/01/10 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
银行稽核岗位职责
2015/04/13 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL