详谈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.load()和Jsp的include的区别
Apr 12 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 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生成缩略图的类代码
2008/10/02 PHP
php日期操作技巧小结
2016/06/25 PHP
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
军训自我鉴定
2013/12/14 职场文书
委托书范本
2014/04/02 职场文书
音乐教师求职信
2014/06/28 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
毕业生评语大全
2015/01/04 职场文书
大学生求职意向书
2015/05/11 职场文书
房屋所有权证明
2015/06/19 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers