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下数值型比较难点说明
Jun 07 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
javascript实现复选框选中属性
Mar 25 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 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
国内咖啡文化
2021/03/03 咖啡文化
PHP 图片水印类代码
2012/08/27 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
Yii分页用法实例详解
2014/12/04 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
JS日历 推荐
2006/12/03 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
Python 流程控制实例代码
2009/09/25 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
python同时遍历两个list用法说明
2020/05/02 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
介绍一下Linux文件的记录形式
2012/04/18 面试题
简单的大学生自我鉴定
2014/02/18 职场文书
《狼》教学反思
2014/03/02 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
千万级用户系统SQL调优实战分享
2022/03/03 MySQL
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript