详谈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 26 jQuery
jQuery操作css样式
May 15 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 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 函数UNIX时间戳
2009/01/14 PHP
php session 错误
2009/05/21 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
一个超级简单的python web程序
2014/09/11 Python
简单了解Python中的几种函数
2017/11/03 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
如何在python中执行另一个py文件
2020/04/30 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
会计职业生涯规划范文
2014/01/04 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫