zoukankan      html  css  js  c++  java
  • jquery metadata 详解

    1.0的版本是这样的$.meta 
    2.0的版本是这样的$.metadata 
    很多插件的编写都用到了这个插件,个人感觉这个东西应该是jquery官方的。推荐使用2.0的版本,

    因为现在官方上就是2.0的文档(http://docs.jquery.com/Plugins/Metadata),1.0的,我个人还没看懂,倒是2.0的例子运行很正常。

    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title></title>  
    <script type="text/javascript" src="jquery.metadata.2.0/jquery.metadata.2.0/test/jquery.js"></script>  
    <!-- 这里既引用了1.0又引用了2.0,就是为了说明它们之间没有冲突,我的理解是以前的优秀插件里面使用了1.0,但是1.0的问题确实有,所以2.0把meta改成metadata 这样就不会相互冲突了-->  
    <script type="text/javascript" src="jquery.metadata.2.0/jquery.metadata.2.0/jquery.metadata.js"></script>  
    <script type="text/javascript" src="jquery.metadata.1.0/jquery.metadata.1.0/jquery.metadata.js"></script>  
    <script language="javascript">  
     $(document).ready(function(){  
                alert($(".media").metadata().src);    
                alert($('li.someclass').metadata().some);  
            });  
      
    </script>  
    </head>  
      
    <body>  
      
    <OBJECT class="media {src:'/tems/upload/192168.mp3'}" data="[object Object]"></OBJECT>  
    <li class="someclass {some: 'data'} anotherclass">...</li>  
    OR  
    <li data="{some:'random', json: 'data'}">...</li>  
    OR  
    <li><script type="data">{some:"json",data:true}</script> ...</li>  
    <script language="javascript">  
    var data = $('li.someclass').metadata();  
    if ( data.some && data.some == 'data' )  
        alert('It Worked!');  
    </script>  
    </body>  
    </html>  
    

    翻译: 
    attr:内部属性,参数名字指向属性名 
    class:内部类的属性,用{}包裹 
    elem:内部子元素 (如script标签).参数的名字指向元素名。 

    函数: 
    metadata( options )返回jQuery对象

    提取元数据,缓存,并返回元数据从jQuery集合的第一个元素。

    Arguments: 
    options (Optional) Options 

    定义要提取的元数据类型的一组键/值对。所有选项都是可选的。

    Options: 
    metadata( options )中的options有三种:type、name、single 

    type String Default: 'class' 

    指定元素的预期位置。可能的值是“class”:在类属性的搜索,“'elem”:在搜索元素内的元素搜索,和“attr”:在元素的自定义属性搜索。
    在类中搜索元数据,而不是在类中。

    $(".selector").metadata({  
       type: 'attr'  
    }) 
    

    name String Default: 'metadata' 

    当类型是“attr”,指定要搜索的自定义属性的名称。当类型是“elem”,指定要搜索的元素的标记名称。

    在一个名为“jdata"自定义元素属性搜索metadata。

    $(".selector").metadata({  
       type: 'attr',  
       name: 'jdata'  
    })
    

    single String Default: 'metadata' 

    鉴于从jQuery缓存元素提取数据的名称。
    存储和检索提取到一个项目名为“jdata在jQuery的缓存数据。

    $(".selector").metadata({  
       single: 'jdata'  
    })  
    

    Examples: 
    Gets metadata from the class attribute. 

    <li class="someclass {some: 'data'} anotherclass">...</li>  
      
    <script>alert($('li.someclass').metadata().some);</script>  
    

    Gets metadata from a custom attribute. 

    <li data="{some:'random', json: 'data'}">...</li>  
    <script>alert($('li.someclass').metadata({type:'attr',name:'data'}).some);</script>  
    

    Gets metadata from a child element. 

    <li class="someclass"><script type="application/json">{some:"json",data:true}</script>...</li>  
    <script>alert($('li.someclass').metadata({type:'elem',name:'script'}).some);</script>  
    

    jQuery.metadata.setType( type, name ) Returns: null 

    设置所有下列元数据请求的默认类型和名称选项。

    Arguments: 
    type String 

    指定元素的预期位置。可能的值是“class”(默认):在类属性的搜索,“elem”:在元搜索的元搜索,和“attr”:在元素的自定义属性搜索。
    名称字符串
    根据“类型”选项的值来搜索的标记或属性的名称。

    设置metadata插件以查找自定义属性。

    <li data="{some:'random', json: 'data'}" class="someclass">...</li>  
      
    <script>  
    $.metadata.setType('attr','data');  
    alert($('li.someclass').metadata().some);  
    </script> 
    

    jQuery.metadata.get( elem, options ) Returns: Object 

    设置所有下列元数据请求的默认类型和名称选项。

    Arguments:
    elem Element 
    包含要提取的metadata的元素。
    options (Optional) Options 
    定义要提取的metadata类型的一组键/值对。所有选项都是可选的。查看元数据插件页以了解更多信息。

    设置metadata插件以查找自定义属性。

    <li class="someclass {some:'random', json: 'data'}">...</li>  
      
    <script>  
    $('li.someclass').each(function(){  
        var data = $.metadata.get(this);  
        alert(data.some);  
    });  
    </script>  
    

      例子:

    <li id="Li1" class='someclass {"item_id": 1, "item_label": "Label"}'>Item 1</li>  
    <li id="Li2" metadata='{"item_id": 1, "item_label": "Label"}'>Item 2</li>  
    <li id="Li3">  
        <metadata style="display: none;">{"item_id": 1, "item_label": "Label"}</metadata>  
        Item 3 </li>  
    <li id="Li4">  
        <script type="metadata">{"item_id": 1, "item_label": "Label"}</script>  
        Item 4 </li>  
      
    $(function() {  
        $("#item1").metadata().item_id; // 1  
        $("#item1").metadata({  
            "type": "class"  
        }).item_id; // 1   
      
        $("#item2").metadata({  
            "type": "attr"  
        }).item_label; // "Label"  
        $("#item2").metadata({  
            "type": "attr",  
            "name": "metadata"  
        }).item_label; // "Label"   
      
        $("#item3").metadata({  
            "type": "elem"  
        }).item_label; // "Label"  
        $("#item3").metadata({  
            "type": "elem",  
            "name": "metadata"  
        }).item_label; // "Label"   
      
        $("#item4").metadata({  
            "type": "elem",  
            "name": "script"  
        }).item_label; // "Label"  
    });  
    

      

  • 相关阅读:
    Associative Embedding: Detection and Grouping loss
    Stacked Hourglass Networks 以及 PyTorch 实现
    论文笔记Stacked Hourglass Networks
    LiveQing私有云端直播点播流媒体服务-功能一张图
    监控实时直播的四分屏的前端展示
    LiveQing视频流媒体开放平台利用 webpack 打包压缩后端代码
    安防监控直播中无插件web直播方案中实现快照抓取的功能
    RTSP-Onvif摄像机web直播遇到的时间戳问题导致的卡顿解决方案
    H5实现视频监控网络直播时前端自动适配
    H5实现无插件视频监控按需直播
  • 原文地址:https://www.cnblogs.com/waisonlong/p/4998379.html
Copyright © 2011-2022 走看看