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 if条件判断方法小结
May 17 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 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 GD 图像处理组件的常用函数总结
2010/04/28 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python 多线程Threading初学教程
2017/08/22 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
python os.fork() 循环输出方法
2019/08/08 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
python list多级排序知识点总结
2019/10/23 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
最新创业融资计划书
2014/01/19 职场文书
党员民主评议个人总结
2014/10/20 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
人口与计划生育责任书
2015/05/09 职场文书
python文件目录操作之os模块
2021/05/08 Python
Python天气语音播报小助手
2021/09/25 Python
MySQL数据库表约束讲解
2022/06/21 MySQL