.attr()与.data()使用区别
这次给大家带来.attr()与.data()使用区别，.attr()与.data()使用的注意事项有哪些，下面就是实战案例，一起来看一下。
一个简单的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery中.attr和.data的区别</title>
</head>
<body>
<p id="app"data-foo="hello"></p>
</body>
<script type="text/javascript"src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
vargetAttr1 = $('#app').attr('data-foo');
vargetData1 = $('#app').data('foo');
console.log('getAttr1: '+ getAttr1);//hello
console.log('getData1: '+ getData1);//hello
$('#app').attr('data-foo','world');//$.attr 设置DOM元素属性值
vargetAttr2 = $('#app').attr('data-foo');
vargetData2 = $('#app').data('foo');
console.log('getAttr2: '+ getAttr2);//world
console.log('getData2: '+ getData2);//*** hello ***
$('#app').data('foo','WORLD');//$.data 设置DOM node属性值
vargetAttr3 = $('#app').attr('data-foo');
vargetData3 = $('#app').data('foo');
console.log('getAttr3: '+ getAttr3);//world
console.log('getData3: '+ getData3);//*** WORLD ***
</script>
</html>• $.attr()每次都从DOM 元素 中取属性的值，即和视图中标签内的属性值保持一致。 •$.attr('data-foo')会从标签内获得data-foo属性值；
•$.attr('data-foo', 'world')会将字符串'world'塞到标签的'data-foo'属性中；
•$.data()是从 Jquery对象 中取值，由于对象属性值保存在内存中，因此可能和视图里的属性值不一致的情况。 •$.data('foo')会从 Jquery对象 内获得foo的属性值，不是从标签内获得data-foo属性值；
•$.data('foo', 'world')会将字符串'world'塞到 Jquery对象 的'foo'属性中，而不是塞到视图标签的data-foo属性中。
结合上面代码和解释，大家应该能够理解两者的区别。
小结
所以$.attr()和$.data()应避免混合用，也就是应该尽量避免如下两种情况的出现：
1.通过$.attr()来进行set属性，然后通过$.data()进行get属性值；
2.通过$.data()来进行set属性，然后通过$.attr()进行get属性值。
同时从性能的角度来说，建议使用$.data()来进行set和get操作，因为它仅仅修改的 Jquey对象 的属性值，不会引起额外的DOM操作。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是.attr()与.data()使用区别的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
c语言函数的基本要求有哪些
Apr 03, 2025 pm 10:06 PM
C语言函数是代码模块化和程序搭建的基础。它们由声明（函数头）和定义（函数体）组成。C语言默认使用值传递参数，但也可使用地址传递修改外部变量。函数可以有返回值或无返回值，返回值类型必须与声明一致。函数命名应清晰易懂，使用驼峰或下划线命名法。遵循单一职责原则，保持函数简洁性，以提高可维护性和可读性。
PS导出PDF如何设置密码保护
Apr 06, 2025 pm 04:45 PM
在 Photoshop 中导出带密码保护的 PDF：打开图像文件。点击“文件”>“导出”>“导出为 PDF”。设置“安全性”选项，两次输入相同的密码。点击“导出”生成 PDF 文件。
H5和小程序与APP的区别
Apr 06, 2025 am 10:42 AM
H5、小程序和APP的主要区别在于：技术架构：H5基于网页技术，小程序和APP为独立应用程序。体验和功能：H5轻便易用，功能受限；小程序轻量级，交互性好；APP功能强大，体验流畅。兼容性：H5跨平台兼容，小程序和APP受平台限制。开发成本：H5开发成本低，小程序中等，APP最高。适用场景：H5适合信息展示，小程序适合轻量化应用，APP适合复杂功能应用。
c语言函数的概念
Apr 03, 2025 pm 10:09 PM
C语言函数是可重复利用的代码块，它接收输入，执行操作，返回结果，可将代码模块化提高可复用性，降低复杂度。函数内部机制包含参数传递、函数执行、返回值，整个过程涉及优化如函数内联。编写好的函数遵循单一职责原则、参数数量少、命名规范、错误处理。指针与函数结合能实现更强大的功能，如修改外部变量值。函数指针将函数作为参数传递或存储地址，用于实现动态调用函数。理解函数特性和技巧是编写高效、可维护、易理解的C语言程序的关键。
在router文件夹下的index.js文件中为什么需要调用Vue.use(VueRouter)？
Apr 05, 2025 pm 01:03 PM
在router文件夹下的index.js文件中注册VueRouter的必要性在开发Vue应用程序时，常常会遇到关于路由配置的问题。特�...
c和c#的区别和联系有哪些
Apr 03, 2025 pm 10:36 PM
C和C#虽有类似之处，但截然不同：C是面向过程、手动内存管理、平台依赖的语言，用于系统编程；C#是面向对象、垃圾回收、平台独立的语言，用于桌面、Web应用和游戏开发。
JavaScript中如何从指定DOM节点下使用XPath进行查找？
Apr 04, 2025 pm 11:15 PM
DOM节点下XPath查找方法详解在JavaScript中，我们经常需要根据XPath表达式从DOM树中查找特定的节点。如果需要从某�...
H5和小程序的推广方式有何不同
Apr 06, 2025 am 11:03 AM
H5与小程序的推广方式存在差异：平台依赖性：H5依赖浏览器，小程序依赖特定平台（如微信）。用户体验：H5体验较差，小程序提供类似原生应用的流畅体验。传播方式：H5通过链接传播，小程序通过平台分享或搜索。H5推广方式：社交分享、邮件营销、QR码、SEO、付费广告。小程序推广方式：平台推广、社交分享、线下推广、ASO、与其他平台合作。
