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自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
js 闭包深入理解与实例分析
Mar 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
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
回顾Javascript React基础
2019/06/15 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
常见python正则用法的简单实例
2016/06/21 Python
深入理解NumPy简明教程---数组2
2016/12/17 Python
python rsa 加密解密
2017/03/20 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
技术岗位竞聘演讲稿
2014/05/16 职场文书
体育馆的标语
2014/06/24 职场文书
学生安全责任书模板
2014/07/25 职场文书
财务工作检讨书
2014/10/29 职场文书
北京英语导游词
2015/02/12 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js