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 相关文章推荐
javascript匿名函数实例分析
Nov 18 Javascript
JavaScript设计模式初探
Jan 07 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
详解jenkins自动化部署vue
May 14 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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
php实现天干地支计算器示例
2014/03/14 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
php字符串分割函数用法实例
2015/03/17 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
js 省地市级联选择
2010/02/07 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
详解python中的异常捕获
2020/12/15 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
幼师专业毕业生自荐信
2013/09/29 职场文书
自我评价个人范文
2013/12/16 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
教师个人教学总结
2015/02/11 职场文书
开会通知短信大全
2015/04/20 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
python基础之爬虫入门
2021/05/10 Python
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle