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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 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
是否存在第一台收音机的说法
2021/03/01 无线电
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
Python命名空间详解
2014/08/18 Python
详解Python爬虫的基本写法
2016/01/08 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
什么是命名空间(NameSpace)
2015/11/24 面试题
Linux常见面试题
2013/03/18 面试题
五十岁生日宴会答谢词
2014/01/15 职场文书
工厂标语大全
2014/10/06 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis
redis中lua脚本使用教程
2021/11/01 Redis
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python