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 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
JavaScript 定义function的三种方式小结
Oct 16 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
vue中template的三种写法示例
Oct 21 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
php array_walk() 数组函数
2011/07/12 PHP
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
菜单效果
2006/10/14 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
python检测远程端口是否打开的方法
2015/03/14 Python
Python jieba库分词模式实例用法
2021/01/13 Python
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
杠杆的科学教学反思
2014/01/10 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
教师自我鉴定范文
2014/03/20 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
机电专业求职信
2014/06/14 职场文书
导游词之阆中古城
2019/12/23 职场文书