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 相关文章推荐
各情景下元素宽高的获取实现代码
Sep 13 Javascript
js变量以及其作用域详解
Jul 18 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
实用又漂亮的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
什么是MVC,好东西啊
2007/05/03 PHP
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
php实现图片添加水印功能
2014/02/13 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
Javascript中的 “&amp;” 和 “|” 详解
2017/02/02 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
vue实现信息管理系统
2020/05/30 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
python获取本地计算机名字的方法
2015/04/29 Python
python的命名规则知识点总结
2019/10/04 Python
使用python绘制二维图形示例
2019/11/22 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
iPython pylab模式启动方式
2020/04/24 Python
Python内置函数locals和globals对比
2020/04/28 Python
css sprite简单实例
2016/05/23 HTML / CSS
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
班级活动总结格式
2014/08/30 职场文书
影视后期实训报告
2014/11/05 职场文书
初中历史教学反思
2016/02/19 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
TS 类型收窄教程示例详解
2022/09/23 Javascript