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 相关文章推荐
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
vue实现图片按比例缩放问题操作
Aug 11 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
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
js选择器全面解析
2016/06/27 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
PyInstaller运行原理及常用操作详解
2020/06/13 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
公务员个人自我评价分享
2013/11/06 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书