zoukankan      html  css  js  c++  java
  • jQuery data(key, value)函数 在匹配的元素上随心所欲的存放数据 (2

    data(key, value) 返回值:jQuery

     

    在匹配的元素上随心所欲的存放数据。

    • 1.2.3 新增data(key, value)

      key (String) 将要设置的数据片段名。
      value (Object) 新的数据值;可以是任何 Javascript 数据类型,包括数组和对象。
    • 1.4.3 新增data(obj)

      obj (Object) 用于设置的键值对。

    .data() 方法允许我们安全地将任何类型的数据附加到DOM元素上而不用担心循环引用和内存泄露之类的问题。

    在单个元素上设置几个独立的数据,并且以后还可以分别检索到:

    $('body').data('foo', 52); $('body').data('bar', { myType: 'test', count: 40 });  $('body').data('foo'); // 52 $('body').data(); // {foo: 52, bar: { myType: 'test', count: 40 }}  

     

    从 jQuery 1.4.3 起,通过 .data(obj) 给元素设置数据时,会在元素原先存放的数据上扩展。jQuery 本身也通过 .data() 方法存放信息,名为 'events' 和 'handle' ,并且保留的任何以下划线开头的数据名称,以供内部使用。

    特别注意:从 jQuery 1.4 起到 jQuery 1.4.2 的几个版本中, .data(obj) 方法会完全替换掉元素上的所有数据,而不是扩展数据对象。如果你使用了第三方插件,那就不建议完全替换掉元素上的数据对象,因为插件也有可能在上面存放数据。

    由于浏览器与插件和内部代码的交互方式,导致 .data() 方法无法在 <object> (除非他是一个Flash插件), <applet> 或者 <embed> 元素上存放数据。

    HTML 5 data- 属性

    从 jQuery 1.4.3 起,HTML 5 data- 属性 中的数据会自动放入 jQuery 的数据对象中。

    举例来说,如果提供如下的 HTML:

    <div data-role="page" data-hidden="true" data-options='{"name":"John"}'></div> 

    那么就可以通过下面的 jQuery 代码获得数据。下面的每个语句都是 true。

    $("div").data("role") === "page"; $("div").data("hidden") === true; $("div").data("options").name === "John"; 

    注意,这些字符串在用 .data() 获取时会自动转换成他们对应数据类型(包括布尔值、数字、对象、数组和 null ),而 HTML 代码中的字符串不会有任何的改变。另外,data- 属性只会在第一次用 .data() 方法获取数据的时候,从 HTML 代码中获取,并保存到 jQuery 内部对象中。在此之后,.data() 再也不会访问或修改 data- 属性里的东西了。

    示例:

    往div元素上存放再获取数据

    <!DOCTYPE html> <html> <head> <style>   div { color:blue; }   span { color:red; }   </style> <script src="jquery.min.js"></script> </head> <body>  <div>     The values stored were      <span></span>     and     <span></span>   </div>  <script>   $("div").data("test", { first: 16, last: "pizza!" }); $("span:first").text($("div").data("test").first); $("span:last").text($("div").data("test").last);   </script> </body> </html> 

    返回值:Objectdata(key)

    返回jQuery对象集合中第一个元素上储存的数据,这个数据是先前用data(name, value)设定的。

    • 1.2.3 新增data(key)

      key (String) 先前存放的数据名
    • 1.4 新增data()

    .data() 方法允许我们安全地将任何类型的数据附加到DOM元素上而不用担心循环引用和内存泄露之类的问题。我们可以同时获取单一元素上几个独立的数据,或者整个一组:

    alert($('body').data('foo')); alert($('body').data()); 

    上面两行会显示先前设置在 body 元素上的数据。如果元素上没有设置过任何东西,则会返回 null 。

    调用 .data() 时如果不带参数,将会以 JavaScript 对象的形式获取所有数据。这个对象可以安全的存放在变量中,因为一旦这个新对象被提取出来,之后对元素进行的 .data(obj) 操作,将无法再影响到这个对象了。另外,直接操作对象会比通过调用 .data()来设置或获取值要快一些:

    var mydata = $("#mydiv").data(); if ( mydata.count < 9 ) {     mydata.count = 43;     mydata.status = "embiggened"; } 

    示例:

    获取存放在元素上,名为 "blah" 的数据。

    <!DOCTYPE html> <html> <head> <style>   div { margin:5px; background:yellow; }   button { margin:5px; font-size:14px; }   p { margin:5px; color:blue; }   span { color:red; }   </style> <script src="jquery.min.js"></script> </head> <body>  <div>A div</div>   <button>Get "blah" from the div</button>   <button>Set "blah" to "hello"</button>    <button>Set "blah" to 86</button>   <button>Remove "blah" from the div</button>   <p>The "blah" value of this div is <span>?</span></p>  <script>   $("button").click(function(e) {   var value;    switch ($("button").index(this)) {     case 0 :       value = $("div").data("blah");       break;     case 1 :       $("div").data("blah", "hello");       value = "Stored!";       break;     case 2 :       $("div").data("blah", 86);       value = "Stored!";       break;     case 3 :       $("div").removeData("blah");       value = "Removed!";       break;   }    $("span").text("" + value); });    </script> </body> </html> 
    --------------------------------- 
    原文出自 
    http://shawphy.github.com/jquery-api/#data 
  • 相关阅读:
    SSM 框架-05-详细整合教程(Eclipse版)(Spring+SpringMVC+MyBatis)
    SSM 框架-04-使用maven创建web项目
    SSM 框架-03-MyEclipse+Tomcat+MAVEN+SVN项目完整环境搭建
    SSM 框架-02-MyEclipse 2017 安装与破解
    什么是J2EE
    Web前端和后端开发的区别和要求
    SSM 框架集-01-详细介绍-入门问题篇
    MUI框架-11-MUI前端 +php后台接入百度文字识别API
    MUI框架-10-MUI 数据交互-跳转详情页面
    MUI框架-09-MUI 与后台数据交互
  • 原文地址:https://www.cnblogs.com/yuzhongwusan/p/2573036.html
Copyright © 2011-2022 走看看