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 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
基于jquery实现图片放大功能
May 07 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
Vue.js中v-bind指令的用法介绍
Mar 13 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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
JavaScript修改css样式style
2008/04/15 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
高二化学教学反思
2014/01/30 职场文书
医院院务公开实施方案
2014/05/03 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
小学班主任工作随笔
2015/08/15 职场文书
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技
tomcat下部署jenkins的方法
2022/05/06 Servers