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 相关文章推荐
在父页面调用子页面的JS方法
Sep 29 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
python如何保证输入键入数字的方法
2019/08/23 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
职业教育毕业生求职信
2013/11/09 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
2015年高校就业工作总结
2015/05/04 职场文书