jQuery: attr() vs prop()
不巧面试被问到了attr()和prop()的区别,稍加学习记录如下:
1. attribute和property
attribute
一个网页就是一棵DOM树,DOM树由节点构成,节点分为三种:元素节点、文本节点、属性节点。所有的属性节点构成了一个属性的数组,我们以如下
HTML代码为例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr() vs prop()</title>
</head>
<body>
<input type="text" value="Name:">
<input type="checkbox" checked="false">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>
我们在浏览器窗口的console中输出:
var inputs = document.getElementsByTagName('input')var input = inputs[0];
input.attributes
得到的结果是:
NamedNodeMap {0: type, 1: value, length: 2, getNamedItem: function, setNamedItem: function, removeNamedItem: function, item: function…}
可以看到,这个节点对象里面有很多的属性,我们只设置了两个,其他的是继承自原型链上的。
property
所有节点都是对象,对象上的属性叫做property,我们可以简单通过遍历这个对象来查看他的properties,如下为在浏览器中执行的例子:
var input = inputs[0];for(var key in input) {console.log(key);}
如下为输出的结果:
VM445:2 webkitEntries
VM445:2 incremental
VM445:2 webkitdirectory
VM445:2 selectionDirection
VM445:2 selectionEnd
VM445:2 selectionStart
VM445:2 labels
VM445:2 validationMessage
...
因为property输出太多了所以没有全部列出,但自己执行后仔细查找会发现,type和value两个属性也存在于properties中。
2. property和attribute使用上有什么区别?
通过上节我们看到prop来自节点对象自带的,它包含了很多property;而attr来自对象的attributes,是我们在元素节点上添加属性节点才会有的。
对于上例的文本框,我们可以通过property方式像这样input.value
或者 attribute方式像这样 input.getAttribute( "value" )
来获得值,并且得到的结果都是 "Name:"。
当我们在页面中编辑文本框的值,再次在console中获取的时候发现input.value
的值是更新后的值,而input.getAttribute
的值仍旧是旧的。
因此差别就是: property记录的值会按照用户操作实时更新,而attribute记录的都是初始值。
3. prop()和attr()的区别?
根据 W3C forms specification, checked 属性是一个 boolean attribute, 因此checked property只能是true或者false(当勾选为true,未勾选或者未设置为false):
- elem.checked // true (Boolean) 会随着勾选状态而改变
jQuery的prop()方法是和上面直接取property一样 ,因此:
- $( elem ).prop( "checked” ) //true (Boolean) 会随着勾选状态而改变
而拿attribute拿到的只是初始的值:
- elem.getAttribute( "checked" ) // "checked" (String) 记录初始状态, 值为"checked"或者任意你设置的值,不会随着勾选状态而改变
jQuery的attr()方法获的的结果也跟getAttribute是一致的:
- $(‘input[type=“checkbox”’).attr( ‘checked’ ) // 同上一条
至于说jQuery的历史版本中,attr()的实现曾经会跟getAttribute不一致,比如返回结果是会随着勾选状态变化的字符串,或者返回结果是Boolean类型的值,知道即可因为现在的用法是一致的了~
- 分布式事务 TCC-Transaction 源码解析 —— 调试环境搭建
- 机器学习入门——使用python进行监督学习
- 推荐算法的介绍,第一部分——协同过滤与奇异值分解
- 在ASP中实现UNIX时间戳
- 【学术】厉害了我的哥,国外技术大咖仿造了谷歌的Arts &Culture,找到古代的“你”
- 【技巧】应赛技巧,教你如何在Kaggle比赛中排在前1%
- 熔断器 Hystrix 源码解析 —— 命令执行(一)之正常执行逻辑
- 智能主题检测与无监督机器学习:识别颜色教程
- 如何下载安装Weka机器学习工作平台
- Dubbo 源码解析 —— LoadBalance
- 如何处理机器学习中类的不平衡问题
- 【死磕Java并发】—– Java内存模型之重排序
- Mask R-CNN源代码终于来了,还有它背后的物体检测平台
- 37个TOP实例命令,超过一半你肯定都没见过
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法