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 相关文章推荐
jQuery get和post 方法传值注意事项
Nov 03 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
JavaScript canvas实现文字时钟
Jan 10 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
PHP中的string类型使用说明
2010/07/27 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
Ruby元编程基础学习笔记整理
2016/07/02 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
浅谈Python 函数式编程
2020/06/20 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
软件工程师面试题
2012/06/25 面试题
教师演讲稿范文
2014/01/08 职场文书
六一儿童节活动策划方案
2014/01/27 职场文书
致百米运动员广播稿
2014/01/29 职场文书
索桥的故事教学反思
2014/02/06 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
保送生自荐信范文
2015/03/26 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android