详谈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中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
基于jquery实现五星好评
Nov 18 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
使用jquery实现轮播图效果
Jan 02 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
destoon找回管理员密码的方法
2014/06/21 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
webpack之devtool详解
2018/02/10 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
python入门前的第一课 python怎样入门
2018/03/06 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
python mock测试的示例
2020/10/19 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
西雅图的买手店:Totokaelo
2019/10/19 全球购物
销售人员个人求职信
2013/09/26 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
文明好少年事迹材料
2014/08/19 职场文书
给朋友的赠语
2015/06/23 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
2016高考寄语集锦
2015/12/04 职场文书
导游词之上海豫园
2019/10/24 职场文书
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL