详谈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 dateRangePicker插件使用方法详解
Jul 28 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
Jquery Fade用法详解
Nov 06 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python中List.index()方法的使用教程
2015/05/20 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
python正则-re的用法详解
2019/07/28 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
英国领先的游戏零售商:GAME
2019/09/24 全球购物
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
经理岗位职责
2015/02/02 职场文书
文明旅游倡议书
2015/04/28 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server