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的图片的切换(以数字的形式)
Feb 14 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
React Fragment介绍与使用详解
Nov 11 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
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
javascript实现文字跑马灯效果
2020/06/18 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
python破解zip加密文件的方法
2018/05/31 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
python3爬虫中异步协程的用法
2020/07/10 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
Jdbc数据访问技术面试题
2012/03/30 面试题
计算机专业自我鉴定
2013/10/15 职场文书
20年同学聚会感言
2014/02/03 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
创先争优承诺书范文
2014/03/31 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
甲午大海战观后感
2015/06/02 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
mysql 排序失效
2022/05/20 MySQL