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 相关文章推荐
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
vue组件与复用详解
Apr 08 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
实用又漂亮的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
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
python select.select模块通信全过程解析
2017/09/20 Python
Python程序退出方式小结
2017/12/09 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
Python super()函数使用及多重继承
2020/05/06 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
即兴演讲稿
2014/01/04 职场文书
初三化学教学反思
2014/01/23 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
经销商年会策划方案
2014/05/29 职场文书
医学检验专业自荐信
2014/09/18 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
道歉的话怎么说
2015/05/12 职场文书
贷款工作证明模板
2015/06/12 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技