zoukankan      html  css  js  c++  java
  • jquery data属性 attr vs data

    html5的自定义data属性相信大家都不会陌生,有了它你可以绑定所需的数据到指定元素上。然后通过jquery设置、获取数据,简直开心的不行啊。
    想到设置、获取元素属性值,大家一定首先想到了jquery的.attr()方法,但是你一定知道jquery还有个.data()的方法。本人以前一直萌(傻)萌(傻)哒(的)以为这两个方法在处理data属性过程中实现的效果是一样的,只不过.data()方法官方更推荐使用(看名字就感觉人家是正规军)。但后来本人在做项目的过程中发现,这两种方法处理data属性并不相同(想想也是,要是一样,还搞个data干毛)。废话少说,下面来点干的:

     1 <html>
     2 <head>
     3 <meta charset="UTF-8">
     4 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
     5 
     6 <script>
     7 $(function(){
     8   $("#btn1").click(function(){
     9     $("div").attr("data-my-value", "使用attr改变的数据");
    10     $("p").text("使用attr设置数据成功");
    11   });
    12   $("#btn2").click(function(){
    13     $("div").data("myValue", "使用data改变的数据");
    14     $("p").text("使用data设置数据成功");
    15   });
    16   $("#btn3").click(function(){
    17     var v = $("div").attr("data-my-value");
    18     $("p").text("使用attr获取数据:"+v);
    19   });
    20   $("#btn4").click(function(){
    21     var v = $("div").data("myValue");
    22     $("p").text("使用data获取数据:"+v);
    23   });
    24   $("#btn5").click(function(){
    25     $("div").data("person", {age:12, name:"wang"});
    26     $("p").text("使用data增加属性person成功");
    27   });
    28   $("#btn6").click(function(){
    29     console.log($("div").data());
    30   });
    31 });
    32 </script>
    33 </head>
    34 
    35 <body>
    36 <button id="btn1">1.使用attr设置</button>
    37 <button id="btn2">2.使用data设置</button>
    38 <button id="btn3">3.使用attr获取</button>
    39 <button id="btn4">4.使用data获取</button>
    40 <button id="btn5">5.使用data增加person属性</button>
    41 <button id="btn6">6.控制台打印data</button>
    42 <div data-my-value="服务器渲染数据"></div> 43 <p></p> 44 </body> 45 </html>

    这段代码是不是简单的不行了,下面我们用这段代码说明一下.attr()和.data()在处理data属性时的不同之处:
    这里我们给div增加了“data-my-value”属性,很多时候data属性的数据会在页面加载时由服务器获取,这里我们通过构建DOM时将“data-my-value”赋值为“服务器渲染数据”的方法模拟服务器数据渲染。

    1. 首先我们点击3、4按钮,发现获取的数据均为“服务器渲染数据”。好像没什么不同,别着急,继续看。
    2. 接下来我们打开浏览器调试工具,注意div元素,点击1按钮,div的“data-my-value”变为“使用attr改变的数据”,然后点击3按钮,获取的数据为“使用attr改变的数据”,点击4按钮,获取的数据为“服务器渲染数据”。通过调试器我们发现元素的“data-my-value”属性为“使用attr改变的数据”,为什么通过.data()方法获取的数据依旧是“服务器渲染数据”?我们再来看看下面的操作。
    3. 点击2按钮,通过调试器我们发现div的“data-my-value”属性数据没有发生变化,然后我们点击3按钮,获取的数据为“使用attr改变的数据”,点击4按钮,获取的数据为“使用data改变的数据”。what?

    遇到问题,肯定要首先查官方手册了,通过查询手册和在Stack Overflow查资料我总结了如下几点(有不对的地方欢迎大家指正):

    1. jquery通过attr直观的设置、获取data属性值,data虽然为自定义属性,但是attr处理它与处理标准元素相同。
    2. jquery的data方法是将数据存储在与元素关联的对象中,并不是改变元素的属性值,通过.data()(不加任何参数)可以获得该对象。点击上面demo中的按钮6可以在控制台查看该对象。
    3. 有一点需要注意,当页面加载时,jquery会默认将data属性的数据加入到这个关联的对象中,后面可以通过data(key,value)方法修改数据,也可以添加新的数据或对象,当然添加的新data属性不会在DOM有所体现(通过点击按钮5增加新属性,点击6查看)。

    总之,.attr()方法处理data属性与标准属性相同;使用.data()方法的整个过程中,jquery一直操作的是这个与元素关联的对象,和DOM中元素本身的属性无关。

    文中有不对的地方欢迎大家多多指正。

    参考:
    http://api.jquery.com/attr/
    https://api.jquery.com/data/
    https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute
    https://stackoverflow.com/questions/7261619/jquery-data-vs-attr

  • 相关阅读:
    课后作业成绩汇总
    关于作业提交要求声明 2017-09-22
    团队编程项目作业成绩汇总
    结对项目作业成绩汇总
    团队组信息
    小知识记录:第XI篇
    小知识记录:第X篇
    小知识记录:第十二篇
    小知识记录:第十一篇
    小知识记录:第十篇
  • 原文地址:https://www.cnblogs.com/whyly/p/7241321.html
Copyright © 2011-2022 走看看