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 到 JQuery (1)学习小结
Feb 12 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
vue+AI智能机器人回复功能实现
Jul 16 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 数组字符串搜索array_search技巧
2016/07/05 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
木马的传播途径主要有哪些
2016/04/08 面试题
招商业务员岗位职责
2013/12/16 职场文书
英语老师推荐信
2014/02/26 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书