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 相关文章推荐
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
一个JS翻页效果
Jul 23 Javascript
JavaScript中的Array对象使用说明
Jan 17 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
js将键值对字符串转为json字符串的方法
Mar 30 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
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
js数组中如何随机取出一个值
2014/06/13 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
Python重新引入被覆盖的自带function
2014/07/16 Python
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
Python实现截屏的函数
2015/07/25 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
pandas实现选取特定索引的行
2018/04/20 Python
python matlibplot绘制3D图形
2018/07/02 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
分厂厂长岗位职责
2013/12/29 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
家长会主持词开场白
2014/03/18 职场文书
出生证明公证书
2014/04/09 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
服务整改报告
2014/11/06 职场文书
总经理岗位职责
2015/02/04 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
承诺书怎么写 ?
2019/04/16 职场文书