详谈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 相关文章推荐
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
JQuery省市联动效果实现过程详解
May 08 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文件锁函数flock()详细介绍
2014/11/18 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
Vue实现路由跳转和嵌套
2017/06/20 Javascript
vue组件的写法汇总
2018/04/12 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
python检测是文件还是目录的方法
2015/07/03 Python
浅谈Python peewee 使用经验
2017/10/20 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
中专毕业生自我鉴定
2013/11/21 职场文书
高中数学教学反思
2014/01/30 职场文书
父母对孩子的寄语
2014/04/09 职场文书
新教师培训心得体会
2014/09/02 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript