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 相关文章推荐
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 Javascript
详解Vue slot插槽
Nov 20 Vue.js
使用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
第八节--访问方式
2006/11/16 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
php格式化金额函数分享
2015/02/02 PHP
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
Python实现爬取并分析电商评论
2020/06/19 Python
Python 高效编程技巧分享
2020/09/10 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
公司大门门卫岗位职责
2014/06/11 职场文书
员工工作及收入证明
2014/10/28 职场文书
2014年政教处工作总结
2014/12/20 职场文书
人事局接收函
2015/01/31 职场文书
千与千寻观后感
2015/06/04 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
如何写好竞聘报告
2019/04/03 职场文书