详谈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实现百度登录框的动态切换效果
Apr 21 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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
Terran魔法科技
2020/03/14 星际争霸
PHP 学习路线与时间表
2010/02/21 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
React Router基础使用
2017/01/17 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
python编写暴力破解FTP密码小工具
2014/11/19 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
采用怎样的方法保证数据的完整性
2013/12/02 面试题
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
开办加工厂创业计划书
2014/01/03 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL