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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
JavaScript toFixed() 方法
Apr 15 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
vue-router源码之history类的浅析
May 21 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 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
博士208HAF收音机实习报告
2021/03/02 无线电
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
python设置随机种子实例讲解
2019/09/12 Python
python 并发下载器实现方法示例
2019/11/22 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
怎样声明子类
2013/07/02 面试题
市场营销策划方案
2014/06/11 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
2014年信访工作总结
2014/11/17 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
如何撰写创业策划书
2019/06/27 职场文书