jquery获取form表单input元素值的简单实例


Posted in Javascript onMay 30, 2016

一般取值方法

$("#id").val();

$("#id").attr("value"); 

//其中value是元素的属性名如<s:textfield  id="cifName" key="cifName"   name="#request.consBean.cifName" />的id,key,name属性。取到的值是属性后对应双引号里面的字符。

function saveConsumerValidate(){
     var cifNo =$("#cifNo").val(); //jquery获取文本框值方法1
     var cardType = $("#cardType").attr("value"); //jquery获取文本框值方法2
     var cardNo = document.getElementById("cardNo").value;//DOM获取值方法

val(),val(val)方法atttr(name),atttr(key,value)方法和value属性

在用$("#id")来获得页面的input元素的时候,发现$("#id").value不能取到值

$("#intro")是一个jquery的选择器结果是id="intro" 的第一个元素,而不是HTML DOM getElementById() 方法的document.getElement

value是HTML DOM Text对象的一个属性,设置或返回文本域的 value 属性的值。

val()是jquery的获得或设置元素的 DOM 属性的操作方法。

val()方法:获得第一个匹配元素的当前值

取值:$("#id").val();|$("element元素").val();/下同 

或者

$("#id")[0].value;

 

HTML 代码:
<input type="text" value="some text"/>
jQuery 代码:
$("input").val();

 val(val)方法:设置每一个匹配元素的值。

赋值:$("#id").val("new value");

 

或者

$("#id")[0].value = "new value";

HTML 代码:
<input type="text"/>
jQuery 代码:
$("input").val("hello world!");

attr(name)方法:取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。

取值:$("#id").attr("value");

HTML 代码:
<img src="test.jpg"/>
jQuery 代码:
$("img").attr("src");
结果:
test.jpg

attr(key,value)方法:为所有匹配的元素设置一个属性值。

赋值:$("#id").attr(attribute,value);

描述:
为所有图像设置src属性。

HTML 代码:
<img/> 
<img/>
jQuery 代码:
$("img").attr("src","test.jpg");
结果:
[ <img src= "test.jpg" /> , <img src= "test.jpg" /> ]

以上这篇jquery获取form表单input元素值的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 设置文本框中焦点的位置
Nov 20 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
JS正则表达式常见函数与用法小结
Apr 13 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 #Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 #Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 #Javascript
jquery获取复选框checkbox的值实现方法
May 30 #Javascript
JS在onclientclick里如何控制onclick的执行
May 30 #Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 #Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 #Javascript
You might like
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
Python栈类实例分析
2015/06/15 Python
Python实现最常见加密方式详解
2019/07/13 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
Python 实现一个简单的web服务器
2021/01/03 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
如何在C# winform中异步调用web services
2015/09/21 面试题
幼儿园法制宣传日活动总结
2014/11/01 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
美术教师个人总结
2015/02/06 职场文书
办公用品质量保证书
2015/05/11 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis