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 replace()正则替换实现代码
Feb 26 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
微信小程序基于本地缓存实现点赞功能的方法
Dec 18 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
JS实现旋转木马轮播图
Jan 01 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
用Python输出一个杨辉三角的例子
2014/06/13 Python
Python实现二分查找算法实例
2015/05/26 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
python3 shelve模块的详解
2017/07/08 Python
python selenium循环登陆网站的实现
2019/11/04 Python
Django框架请求生命周期实现原理
2020/11/13 Python
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
电大会计学自我鉴定
2014/02/06 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
比赛口号大全
2014/06/10 职场文书
车辆工程专业求职信
2014/06/14 职场文书
团组织推荐意见
2015/06/05 职场文书
暂住证证明
2015/06/19 职场文书
英语导游欢迎词
2015/09/30 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技