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 tab标签页的制作
May 10 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
js跳转页面方法总结
Jan 29 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
vue项目多环境配置(.env)的实现
Jul 21 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
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
python中global与nonlocal比较
2014/11/21 Python
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
python实现自主查询实时天气
2018/06/22 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
python pygame实现方向键控制小球
2019/05/17 Python
python对XML文件的操作实现代码
2020/03/27 Python
python利用opencv保存、播放视频
2020/11/02 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
珍珠鸟教学反思
2014/02/01 职场文书
大学生活动策划方案
2014/02/10 职场文书
绩效管理实施方案
2014/03/19 职场文书
认购协议书范本
2014/04/22 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
赢在执行观后感
2015/06/16 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers