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 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
使用AOP改善javascript代码
May 01 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
JavaScript undefined及null区别实例解析
Jul 21 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
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
Vue封装的组件全局注册并引用
2019/07/24 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
python并发和异步编程实例
2018/11/15 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
执行力心得体会
2013/12/31 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
房屋产权证明书
2014/10/15 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL