详谈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单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
jQuery实现回到顶部效果
Oct 19 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
Views rows style模板重写代码
2011/05/16 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
python对csv文件追加写入列的方法
2019/08/01 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
澳洲的服装老品牌:SABA
2018/02/06 全球购物
敬老文明号事迹材料
2014/01/16 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
交通安全寄语大全
2014/04/08 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
教师听课评语大全
2014/12/31 职场文书
幼儿教师个人总结
2015/02/05 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server