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 个人笔记(没有整理,很乱)
Jul 07 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
javascript检测两个数组是否相似
May 19 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
JavaScript 去重和重复次数统计
Mar 31 Javascript
element tree树形组件回显数据问题解决
Aug 14 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
微信扫描二维码登录网站代码示例
2013/12/30 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
一段批量给页面上的控件赋值js
2010/06/19 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
Python 时间处理datetime实例
2008/09/06 Python
python flask中静态文件的管理方法
2018/03/20 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
杭州时比特电子有限公司SQL
2013/08/22 面试题
食品营养与检测应届生求职信
2013/11/08 职场文书
毕业大学生自荐信
2014/06/17 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
民用住房租房协议书
2014/10/29 职场文书
2014教师年度工作总结
2014/11/10 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
MySQL 数据类型选择原则
2021/05/27 MySQL