锐客网

  1. 首页 > 睿知 > it技术 > >

jquery data方法取值与js attr取值的区别

IT知识

贵有恒，何必三更起、五更眠、最无益，只怕一日曝、十日寒。这篇文章主要讲述jquery data方法取值与js attr取值的区别相关的知识，希望能为你提供帮助。
 
jquery data方法的运行机制： 第一次查找dom，使用attributes获取到dom节点值，并将其值存到缓存里，第二次操作的时候，还是先找到dom，但是这次取值是直接从缓存读了，少了一步对dom的操作
 
attr()方法每次都要操作dom，性能上差点儿
 
$(‘ a‘ ).data(‘ v‘ )取到的值是页面初次加载的缓存值，以后如何更改，在页面上都不会改变，但缓存值会变，可以传给i/o请求使用
 
document.getElementsByTagName(‘ a‘ ).attr(‘ data-v‘ ),如果页面响应事件ain改变了该值，其页面展示值也会改变，因为是一直操作的dom，性能上低于前者
【jquery data方法取值与js attr取值的区别】 
 
以下是盗图原文
代码展示地https://github.com/jquery/jquery/blob/master/src/data.js#L77-L165
 

其实是这样的，当我们执行例如这样的语句时 $(" #id" ).data(" test" ); (简化后的过程) 第一步: jQuery 会获取到 $(" #id" ) 元素，对吧、 第二步: 执行到 data方法 的时候，他会通过 attributes 取我们要的对应值。 第三步: 返回结果给我们，然后 jQuery 把值缓存到内部对象里 第一次取的时候，我们可以得到的 undefined，字符串，数字或者解析后的json。 那有人会说这个和 attr 有什么区别呢？ 当我们第二次执行 $(" #id" ).data(" test" ); 的时候： 第一步: jQuery 会获取到 $(" #id" ) 元素，和上面一样。 第二步: 执行到 data方法 的时候，从 jQuery 的缓存中取值 第三步: 返回结果给我们 发现第二步不同了，对吧，为什么不是从 attributes 取值，而是从缓存中取呢？ 缓存其实是js的对象，简单说就类似 var cache = {}; jQuery 在第一次取值之后就会保存到这个缓存对象中，这样我们再次操作的时候就非常快了、 往往性能的损耗都是在 dom 操作上，所以避免重复操作 dom 是非常必要的。 到这，也能看出他和 attr 最大的区别了，比如   $(" #id" ).data(" test" , " 123" ); 执行后依然是 data-test=" hehe" $(" #id" ).attr(" data-test" , " 123" ); 执行后会是 data-test=" 123" 那么我们要给一个元素赋值值，或者对象的时候他们有什么区别呢？比如   $(" #id" ).data(" test" , {str: " hehe" }); 会把 {str: " hehe" } 赋值给 缓存，元素节点上依然是 data-test=" hehe" $(" #id" ).attr(" data-test" , {str: " hehe" }); 执行后会是 data-test=" [object Object]" 这个应该也有不少人遇到，至少群里有不少人问过这个问题。


    推荐阅读


    上一篇：迷宫问题 bfs

    下一篇：使用git和github上传本地项目的方法