详谈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 相关文章推荐
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jQuery实现计算器功能
Oct 19 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中strtotime函数用法详解
2014/11/15 PHP
php实现的RSS生成类实例
2015/04/23 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
js 小数取整的函数
2010/05/10 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python批量修改文件后缀的方法
2014/01/26 Python
python简单实现计算过期时间的方法
2015/06/09 Python
Python实现控制台进度条功能
2016/01/04 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
Python正则捕获操作示例
2017/08/19 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
Python for循环生成列表的实例
2018/06/15 Python
python如何求解两数的最大公约数
2018/09/27 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
Python 判断奇数偶数的方法
2018/12/20 Python
Python测试模块doctest使用解析
2019/08/10 Python
python 实现单通道转3通道
2019/12/03 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
Python和Bash结合在一起的方法
2020/11/13 Python
python爬虫工具例举说明
2020/11/30 Python
质量月活动总结
2014/08/26 职场文书
退休欢送会主持词
2015/07/01 职场文书
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL
浅谈Node的内存泄露问题
2022/05/06 NodeJs