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函数
Jul 21 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
vue解决跨域问题(推荐)
Nov 10 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
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
php实现图片压缩处理
2020/09/09 PHP
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
python 输出一个两行字符的变量
2009/02/05 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
Python 学习教程之networkx
2019/04/15 Python
Django视图扩展类知识点详解
2019/10/25 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
高级护理专业毕业生推荐信
2013/12/25 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
论文指导教师评语
2014/04/28 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
社会实践活动总结
2015/02/05 职场文书
父亲节寄语大全
2015/02/27 职场文书