data 、attr和prop 取值的区别

<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中查看其值发生了改变。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容