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常见注意事项
Jan 01 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
js在HTML的三种引用方式详解
Aug 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
php绘制一个扇形的方法
2015/01/24 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
详细介绍Python中的偏函数
2015/04/27 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
python内置数据类型之列表操作
2018/11/12 Python
python实现三次样条插值
2018/12/17 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
Python wordcloud库安装方法总结
2020/12/31 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
delegate与普通函数的区别
2014/01/22 面试题
2013年员工自我评价范文
2013/12/27 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
银行工作心得体会范文
2016/01/23 职场文书
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js
Python实现仓库管理系统
2022/05/30 Python
JavaScript实现音乐播放器
2022/08/14 Javascript