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 相关文章推荐
JS 字符串连接[性能比较]
May 10 Javascript
JQuery select标签操作代码段
May 16 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
原生js编写2048小游戏
Mar 17 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
node+multer实现图片上传的示例代码
Feb 18 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 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
星际玩家的三大定律
2020/03/04 星际争霸
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
php中hashtable实现示例分享
2014/02/13 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
浅谈微信小程序flex布局基础
2018/09/10 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
python 图片验证码代码分享
2012/07/04 Python
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
办公室主任先进事迹
2014/01/18 职场文书
转让协议书范本
2014/04/15 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
公司庆典主持词
2015/07/04 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
python函数的两种嵌套方法使用
2022/04/02 Python
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS