jquery：jquery.data与attr的区别

最新推荐文章于 2022-07-09 19:14:56 发布
最新推荐文章于 2022-07-09 19:14:56 发布
阅读量573 收藏 1
点赞数 1
分类专栏： jquery 文章标签： jquery data attr
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HUSHILIN001/article/details/81611732
版权

个人觉得，data方法试用的是在jq开辟出来的缓存上，而attr方法是作用在视图上，比如下面的代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div data-id="123">aaaa</div>
	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script>
		var a1 = $("div").attr("data-id");
		var a2 = $("div").data("id");
		console.log(a1 + "\n" + a2);
		$("div").attr("data-id", "456");
		var a3 = $("div").data("id");
		var a4 = $("div").attr("data-id");
		console.log(a3 + "\n" + a4);
		$("div").data("id", "789");
		var a5 = $("div").data("id");
		var a6 = $("div").attr("data-id");
		console.log(a5 + "\n" + a6);
	</script>

</html>

当我们只留下      

	$("div").attr("data-id", "456");

的时候，f12看到的是data-id为456，如果留下

		$("div").data("id", "789");

的时候，看到的是data-id为123；

所以验证了这么一句话：

$.attr()和$.data()本质上属于 DOM属性 和 Jquery对象属性 的区别。

而且在上面的代码，我们也可以看到，两个不是可以混着用的，毕竟作用的对象不同，现在我们做个新尝试

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div data-name="data-name123" name="name123">aaaa</div>
	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script>
		console.log($("div").attr("name"));
		console.log($("div").data());
	</script>

</html>

实验后发现一个事实，就是将data的打印出来，是这个样子的：

{name: "data-name123"}
name:"data-name123"
__proto__:Object

所以在使用data的时候要小心点

mkmin
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery中.attr()和.data()的区别分析
10-19
在jQuery中，`.attr()`和`.data()`方法都是用来处理元素属性的，但它们的作用机制和用途有所不同。这里我们将深入探讨这两个方法的区别以及如何在实际应用中选择合适的使用方式。 首先，`.attr()`方法主要用于读取...
JQuery中attr属性和jQuery.data()学习笔记【必看】
10-22
下面小编就为大家带来一篇JQuery中attr属性和jQuery.data()学习笔记【必看】。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
jquery 的 data 和 attr
weijia_kmy的博客
04-30 455
曾以为attr和data效果是一样的，只是attr需要多写一点代码量。后来在开发中发现他们并不相同。先写两个div体验一下: &lt;div id="test1"&gt;test1&lt;/div&gt; &lt;div id="test2"&gt;test2&lt;/div&gt; &lt;script&gt; // 赋值 $("#test1").a
Jquery中.attr()和.data()的区别
weixin_33932129的博客
03-10 179
Jquery中.attr()和.data()的区别 $.attr()和$.data()本质上属于DOM属性和Jquery对象属性的区别。 Jquery对象属性和DOM属性 一个简单的例子 <!DOCTYPE html> <html> <head> <meta charset...
jQuery中的attr()与data()方法的区别
weixin_33866037的博客
05-27 253
在开发的过程中，我们可以在html标签中加入自定义属性 data-xx 来存放我们需要的数据，如果我们想动态的添加data-xx属性，在jQuery中有两种方法可以使用.data()，但他们又存在区别，如果使用不慎，还可能会造成意想不到的bug。 <html> <head> <meta charset="utf-8"> <title>测试&l...
.attr()与.data()的区别
sinat_38914900的博客
08-06 540
1.attr属性是必须写在html标签上，它属于dom属性，而data是储存于jquery对象模型上，它属于jquery对象属性，因此，它俩本质不一样； 2.attr的运行机制是：$.attr()取值和赋值都是找到html标签，直接操作该标签的属性; 3.data的运行机制是：页面第一次解析时，会将dom节点的attribute值存放到内存中， $.data()取值和赋值都是直接操作这个内存值，而不是dom元素； 综上所述： 1.避免attr和data的混合使用，以免因为数据不一样，产生bug;
JQuery attr()和data()小坑
callmeCassie的博客
07-09 265
attr和data
jquery中attr、prop、data区别与用法分析
10-16
主要介绍了jquery中attr、prop、data区别与用法,结合实例形式分析了jQuery中attr、prop、data的区别、功能、使用方法及相关注意事项,需要的朋友可以参考下
jQuery $.data()方法使用注意细节
12-08
前段时间同事在群里对jQuery里的.data()方法大发牢骚： XXX...//123 data方法不靠谱 XXX(NNNNNNN) 15:13:17 老老实实用attr(‘data-xxx’)吧细研究了下jQuery文档对.data()方法的描述： 代码如下: As of jQuery 1.4.3 ...
JQuery的attr 与val区别
11-25
在jQuery库中，`.attr()`和`.val()`都是用于获取或设置HTML元素属性的方法，但它们有着明显的区别和各自的适用场景。以下是对这两个方法的详细解释： **.attr(attributeName)** `.attr()`方法主要用于获取或设置...
jquery中.attr()和.data()的区别
webeliveyou的博客
07-14 175
$.attr()和$.data()本质上属于DOM属性和Jquery对象属性的区别。 jQuery对象属性和DOM属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery中.attr和.data的区别</t...
jQuery中，data()、prop()、attr() 三者区别
一寸灰_du的博客
05-05 327
先来介绍下三个属性 .attr();基于setAttbute和getAttbute，读写元素自定义属性。（注：像class、chacked、selected、disablad这种属性推荐用prop） 可以操作任何属性，设置属性值会映射到dom行间样式 .prop();用于读写元素的特性属性。(注：()里面填属性值，第二个参数可修改属性，如.prop(‘checked’,true);） 只...
JQuery常用和很有用处的方法
weixin_30569033的博客
05-27 240
1、grep()方法： 　　　　用于数组元素过滤筛选 grep(array,callback,invert) array：待过滤数组; callback：处理数组中的每个元素，并过滤元素，该函数中包含两个参数，第一个是当前数组元素的值，一个是当前数组元素的下标，即元素索引值。此函数应返回一个布尔值。另外，此函数可设置为一个字符串，当设置为字符串时，将视为“lambda-form”（缩写...
jQuery笔记 （一）
qw2319205chu的博客
02-26 345
jquery data()函数 一、jquery data()的作用 data() 方法向被选元素附加数据，或者从被选元素获取数据。 通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。 该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据，请使用 removeData() 函数。 二、jquery data的使用方式 1、获取附加的da...
深入学习jquery源码之data()
悦分享
12-24 629
深入学习jquery源码之data() jQuery.data(element,[key],[value]) 概述: 在元素上存放数据,返回jQuery对象。 注意：这是一个底层方法。你应当使用.data()来代替。 此方法在jQuery 1.8中删除，但你仍然可以通过$._data(element, "events")调试事件数据。请注意，这是不支持的公共接口;实际的数据结构可能会改变...
jq---data()方法的妙用
wangle_style的博客
04-03 1733
有这样一种场景：将左侧表格中的内容在点击添加的时候，右侧列表会增加相应的一列数据，然而反过来还需要点击右侧列的删除时相应的对左侧表格中的对应行操作，此时可以用jq的data()方法，在第一步点击左侧表格添加的时候向该行附加数据，然后左侧点击删除的时候根据附加的数据选择对应行！其实质是把附加数据作为标记，代码如下：// 左侧点击添加到右侧列表    $('.nowkucun_table1').on(...
认识jQuery的两个API：attr和data
热门推荐
Eric的专栏
01-14 1万+
从语义上看，这两个API之间毫不相干，作用也是各有不同。单纯方法名称看，attr()用来修改和增加DOM元素的属性，以及获得属性值。data()用来将数据绑定在DOM元素上。在实际项目中我发现，这两个API都被用来将存储服务器端数据和传递到JavaScript，可以说是JavaScript使用服务器段数据的一个桥梁。如果不考虑attr()修改DOM元素属性可能引起UI变化这一方面，只考虑其作为传递
105 jQuery-使用data()方法在元素上存取JSON格式的数据
LiGuogang
02-10 808
1.效果图 2.HTML代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;105 jQuery-使用data()方法在元素上存取JSON格式的数据&lt;/title&gt; &lt;style type="text/css"&a
精通jQuery：选择器、事件、效果与Ajax
jQuery提供了如`attr()`, `removeAttr()`, `val()`等方法来读取和修改元素的属性。例如，`$("input").attr("disabled", true)`会禁用所有输入元素，`$("input").val("example")`则会设置所有输入元素的值为"example...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值