详谈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实现图片轮播效果
May 08 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jquery插件实现搜索历史
Apr 24 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实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
JSONP基础知识详解
2017/03/19 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
《春到梅花山》教学反思
2014/04/16 职场文书
实习单位评语
2014/04/26 职场文书
IT工程师岗位职责
2014/07/04 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
运动会运动员赞词
2015/07/22 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers