详谈jQuery中使用attr(), prop(), val()获取value的异同


Posted in jQuery onApril 25, 2017

jQuery中有3个获取元素value值的函数比较相似:attr(), prop(), val();拿来比较一下。  

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery-2.1.4.js"></script>

</head>
<body>
<input type="text" value="123"/>
<button id="btn">click</button>
<script>

  $("#btn").click(function(){
    var attr=$("input").attr("value");
    var prop=$("input").prop("value");
    var val=$("input").val();
    console.log(attr);
    console.log(prop);
    console.log(val);
  })
</script>
</body>

代码如上所示,为输入框设定了初始值:123,此时点击按钮,控制台输出为:

123
123
123

改变输入框的值,此时控制台输出:

 

123
123thgf
123thgf

如果我们没有为文本框设定初始值,即删除value=”123”后,依旧使用如上js代码,则相应输出如下:

undefined

attr()输出为undefined,而prop()和val()输出为“空”。

输入value值后:控制台输出为:

undefined
asdasd
asdasd

attr()输出依然为undefined,而prop()和val()则输出实际值。

可见,prop()和val()都能获取到文本框的实际value值,而attr()获取的则始终为文档结构中的value的属性值,与文本框实际值无关,并不会变化。

以上这篇详谈jQuery中使用attr(), prop(), val()获取value的异同就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jQuery实现全选按钮
Jan 01 jQuery
jquery.form.js异步提交表单详解
Apr 25 #jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 #jQuery
jquery submit()不能提交表单的解决方法
Apr 24 #jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 #jQuery
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 #jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 #jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 #jQuery
You might like
php 获取本机外网/公网IP的代码
2010/05/09 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
jquery select下拉框操作的一些说明
2010/04/02 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
详解Vue之计算属性
2020/06/20 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
铭立家具面试题
2012/12/06 面试题
Java如何获得ResultSet的总行数
2016/09/03 面试题
平安建设实施方案
2014/03/19 职场文书
新学期开学标语
2014/06/30 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
群众路线个人整改措施
2014/10/24 职场文书
财务整改报告范文
2014/11/05 职场文书
班主任经验交流材料
2014/12/16 职场文书
干部理论学习心得体会
2016/01/21 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS