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 相关文章推荐
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
Javascript实现计算个人所得税
May 10 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
用webAPI实现图片放大镜效果
Nov 23 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
php简单的上传类分享
2016/05/15 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
仅利用30行Python代码来展示X算法
2015/04/01 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
Python之os操作方法(详解)
2017/06/15 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
通过cmd进入python的实例操作
2019/06/26 Python
python打包成so文件过程解析
2019/09/28 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
成人大专生实习期的自我评价
2013/10/02 职场文书
采购内勤岗位职责
2013/12/10 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
小学优秀学生评语
2014/12/29 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
法院执行局工作总结
2015/08/11 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python