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复选框CHECKBOX全选,取消全选
Aug 30 Javascript
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
$.format,jquery.format 使用说明
Jul 13 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
Element-UI+Vue模式使用总结
Jan 02 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内存不够用的快速解决方法
2013/10/26 PHP
php异常处理使用示例
2014/02/25 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
PHP比你想象的好得多
2014/11/27 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
python中from module import * 的一个坑
2014/07/20 Python
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
浅谈Python中的字符串
2020/06/10 Python
文员岗位职责
2013/11/09 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
愚人节活动策划方案
2014/03/11 职场文书
大学生评语大全
2014/04/18 职场文书
活动总结格式范文
2014/04/26 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
护士2015年终工作总结
2015/04/29 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
详解Go与PHP的语法对比
2021/05/29 PHP
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技