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 29 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
js 轮播效果实例分享
Dec 28 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 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中操作Excel实例代码
2010/04/29 PHP
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
JavaScript实用技巧(一)
2010/08/16 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
小程序实现多列选择器
2019/02/15 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
OpenLayers3实现地图显示功能
2020/09/25 Javascript
Python的面向对象编程方式学习笔记
2016/07/12 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
市场营销大学生职业规划书
2014/02/25 职场文书
优秀学生评语大全
2014/04/25 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
义诊活动通知
2015/04/24 职场文书
圣诞晚会主持词
2015/07/01 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
python中的被动信息搜集
2021/04/29 Python