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 相关文章推荐
一些常用的JS功能函数代码
Jun 23 Javascript
JS画线(实例代码)
Nov 20 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
理解 JavaScript EventEmitter
Mar 29 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
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
python实现中文分词FMM算法实例
2015/07/10 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
python读写配置文件操作示例
2019/07/03 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
社区工作者感言
2014/03/02 职场文书
志愿者活动总结范文
2014/04/26 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
小数乘法教学反思
2016/02/22 职场文书
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL