data、attr、prop的一些坑

来源：互联网发布：跳跃网络签到不能用编辑：程序博客网时间：2024/06/15 09:53

在一个项目中使用jquery的data方法和attr方法操作元素的属性时遇到了一些坑，特此整理下data、attr、prop的区别

问题来源：

某个元素具有data-key属性，js使用xx.attr('data-key')操作该元素，在chrome开发者工具中查看Elements，该元素的data-key属性确实更改为新赋予的值，但是在用xx.data('key')取值的时候，发现还是原先最开始的值，从而导致一系列BUG

测试：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"></head><body><div id="div" data-key="1"></div><script src="js/jquery-3.1.1.min.js"></script><script>//1console.log($('#div').data('key'));//1number类型console.log($('#div').attr('data-key'));//1string类型//2$('#div').data('key', '2');console.log($('#div').data('key'));//2string类型$('#div').data('key', 2);console.log($('#div').data('key'));//2number类型//3$('#div').attr('data-key', '3');console.log($('#div').data('key'));//2number类型console.log($('#div').attr('data-key'));//3     string类型//4$('#div').attr('name', '4');//5$('#div').prop('age', '5');console.log($('#div').prop('age'));//5string类型console.log($('#div').attr('age'));//undefinedconsole.log($('#div').data('age'));//undefined//6$('#div').prop('data-key', '6');console.log($('#div').prop('data-key'));//6string类型console.log($('#div').data('key'));//2number类型</script></body></html>

第一步：使用data取值的时候，返回的是number类型，用attr取值的时候，也可以取到，但取到的值是字符串类型

第二步：赋值的时候的区别

第三步：用attr赋值的时候，去开发者工具查看，确实改过来了，但是再用data输出的时候，却仍然是原先的值，用attr则可以，这里非常容易被开发者工具中的假象所迷惑，需要注意，实际上如果你的data属性和attr属性名字一样，开发者工具中只会保留后一个

第四步：attr赋值一个新名字，开发者工具有显示出来

第五步：prop赋值，开发者工具不显示，但可以通过prop取值，用attr和data不能取，返回undefined

第六步：prop也不会改变最初的data赋值

attr、data、prop区别：

attr取值的时候，永远都是string类型，无论是boolean或者number，需要特别注意，且对大小写不敏感，attr('name')和attr('NAME')实际一样，attr主要用于获取属性

data取值的时候，会对boolean或者number自动进行类型转化，如data-key='true'实际取值等于boolean类型的true，同样data-key='11'等于number类型的11，且赋值的时候，注意是否需要传入引号，如data('key', '1')和data('key', 1)并不一样

另外特别需要注意的是data定义名字的时候，尽量不要使用驼峰定义法，即类似myName这种，实际取值的时候，data('myName')会返回undefined，而data('myname')却可以取到值

prop，用于取值元素固有的属性的时候，即本身就自带的属性，如checked、selected、href、target、id、class等，建议使用prop

0 0