jQuery操作DOM之获取表单控件的值


Posted in Javascript onJanuary 23, 2015

本文实例讲述了jQuery操作DOM之获取表单控件的值。分享给大家供大家参考。具体分析如下:

HTML属性与DOM属性差别最大的地方,恐怕就要数表单控件的值了。比如,文本输人框的 value属性在DOM中的属性叫defaultValue,DOM中就没有value属性。而选项列表(select) 元素呢,其选项的值在DOM中通常是通过selectedIndex属性,或者通过其选项元素的 selected属性来取得。

由于存在这些差异,在取得和设置表单控件的值时,最好不要使用.attr()方法。而对于选项列表呢,最好连.prop()方法也不要使用。那使用什么呢,建议使用jQuery提供的.val()方法:

//取得文本输入框的当前值

var inputValue = $('#my-input').val();

//取得选项列表的当前值

var selectValue = $('#my-select').val();

八设置单选列表的值

$('#my-single-select').val('value3');

/^设置多选列表的值

$('#my-multi-select').val(['value1', 'value2']);

与.attr()和.prop()—样,.val()方法也可以接受一个函数作为其setter参数。有了这个 多用途的.val()方法,使用jQuery做Web开发你又会倍感高效。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
node中koa中间件机制详解
Aug 22 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
使用angular写一个hello world
Jan 23 #Javascript
Javascript中的几种URL编码方法比较
Jan 23 #Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 #Javascript
AngularJS语法详解(续)
Jan 23 #Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 #Javascript
AngularJS语法详解
Jan 23 #Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 #Javascript
You might like
php mysql数据库操作类
2008/06/04 PHP
php生成静态页面的简单示例
2014/04/17 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
js opener的使用详解
2014/01/11 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
python操作字典类型的常用方法(推荐)
2016/05/16 Python
python处理html转义字符的方法详解
2016/07/01 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
Python print不能立即打印的解决方式
2020/02/19 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
英文自荐信
2013/12/19 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
行政前台岗位职责
2015/04/16 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis