详谈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 16 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jQuery treeview树形结构应用
Mar 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
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
深入探究node之Transform
2017/07/20 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
json跨域调用python的方法详解
2017/01/11 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
Notino法国:购买香水和化妆品
2019/04/15 全球购物
shell的种类有哪些
2015/04/15 面试题
国庆节文艺活动方案
2014/02/03 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
sass 常用备忘案例详解
2021/09/15 HTML / CSS
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python
html中两种获取标签内的值的方法
2022/06/16 jQuery
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang