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 检测浏览器和操作系统的脚本
Dec 26 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
JS代码实现table数据分页效果
May 26 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
深入了解Vue动态组件和异步组件
Jan 26 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生成缩略图的类代码
2008/10/02 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python3实现名片管理系统
2020/11/29 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
《狮子和兔子》教学反思
2014/03/02 职场文书
大学应届生的自我评价
2014/03/06 职场文书
公司委托书格式
2014/08/01 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
先进班组事迹材料
2014/12/25 职场文书
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers