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 相关文章推荐
checkbox使用示例
Aug 23 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 Javascript
详解TypeScript的基础类型
Feb 18 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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
js下函数般调用正则的方法附代码
2008/06/22 PHP
PHP 引用文件技巧
2010/03/02 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
php计算整个目录大小的方法
2015/06/19 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
centos6.4下python3.6.1安装教程
2017/07/21 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
python文本数据相似度的度量
2018/03/12 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
Python3 元组tuple入门基础
2020/02/09 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
学习十八大报告感言
2014/02/04 职场文书
给校长的建议书300字
2014/05/16 职场文书
新闻稿标题
2015/07/18 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
总结高并发下Nginx性能如何优化
2021/11/01 Servers