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 相关文章推荐
jQuery toggle()设置CSS样式
Nov 05 Javascript
javascript检测两个数组是否相似
May 19 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
js date 格式化
Feb 15 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
vue如何批量引入组件、注册和使用详解
May 12 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
第十四节 命名空间 [14]
2006/10/09 PHP
php目录拷贝实现方法
2015/07/10 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
vue cli 全面解析
2018/02/28 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
python格式化字符串实例总结
2014/09/28 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
Python正则表达式如何匹配中文
2020/05/27 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
西班牙在线光学:Visual-Click
2020/06/22 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
顶撞领导检讨书
2014/01/29 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
单位工作证明范文
2014/09/14 职场文书
2014年学前班工作总结
2014/12/08 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书