data 、attr和prop 取值的区别
2018-03-28 本文已影响0人
YoungEvita
<body>
<div id="num" data-num="123">click here</div>
</body>
1. data 和 attr
$('#num').on('click', function(event) {
var dataNum = $(this).data('num');
var dataAttr = $(this).attr('data-num');
console.log(typeof dataNum); // number
console.log(typeof dataAttr); // string
});
以上代码输出：
number
string
- 运用$.data() 取出的值首先会把值转换为基本类型 number、null、string、boolean、undefined。
- attr取值取出为string类型。
- data- 属性不可以大写
2. attr 和 prop
$('#num').on('click', function(event) {
console.log($(this).attr('data-num'), $(this).prop('data-num')); // 123 undefined
console.log($(this).attr('id'), $(this).prop('id'));// num num
});
以上代码输出：
123 undefined
num num
- attr 可以用来去原有属性以及自定义属性的值
- prop 仅可取原有属性的值
- prop在JQuery 1.6 后才有的函数
3. data 的缓存
$('#num').on('click', function(event) {
// 先输出未修改之前的值
console.log($(this).data('num')); // 123
console.log($(this).attr('data-num')); // 123
// 修改data-num 属性的值
$(this).data('num', 456);
// 再次取data-num 值输出
console.log($(this).data('num')); // 456
console.log($(this).attr('data-num')); // 123
});
- 用data方法根据key找对应的value值，取值时会首先在JQuery缓存中查找，若没有找到则会读取DOM节点的对应属性值来赋值，找到则返回缓存中的值。
- 用data方法赋值时，也是修改了缓存中的值，不会影响DOM节点的对应的属性值，即HTML中的值不会发生改变。
- attr取值赋值都是直接操作的DOM的节点，即可以在HTML中查看其值发生了改变。
