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 相关文章推荐
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
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
推荐一篇入门级的Class文章
2007/03/19 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
用js实现in_array的方法
2013/11/05 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
Python中动态检测编码chardet的使用教程
2017/07/06 Python
python使用KNN算法手写体识别
2018/02/01 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
python中dict使用方法详解
2019/07/17 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
explicit和implicit的含义
2012/11/15 面试题
实习护士自我鉴定
2013/10/13 职场文书
应届毕业生求职信范文
2013/12/18 职场文书
保证书范文大全
2014/04/28 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
安全教育培训心得体会
2016/01/15 职场文书
HTML+JS实现在线朗读器
2022/02/15 Javascript
Redis实战高并发之扣减库存项目
2022/04/14 Redis