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 浮动导航栏实现代码
Aug 27 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
jquery 插件学习(六)
Aug 06 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
Angular6笔记之封装http的示例代码
Jul 27 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
vue 组件开发原理与实现方法详解
Nov 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
php.ini中文版
2006/10/09 PHP
一些使用频率比较高的php函数
2008/10/03 PHP
简化php模板页面中分页代码的解析
2009/02/06 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
分享10段PHP常用代码
2015/11/11 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
js对象的比较
2011/02/26 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
Python通过len函数返回对象长度
2020/10/22 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
五好家庭申报材料
2014/12/20 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS