jquery metadata 详解

最新推荐文章于 2019-01-17 11:20:09 发布

weixin_30325793

最新推荐文章于 2019-01-17 11:20:09 发布

阅读量324

点赞数

文章标签： xhtml javascript json ViewUI

原文链接：http://www.cnblogs.com/waisonlong/p/4998379.html

版权

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"  
});

转载于:https://www.cnblogs.com/waisonlong/p/4998379.html

weixin_30325793

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery metadata 详解

1.0的版本是这样的$.meta2.0的版本是这样的$.metadata很多插件的编写都用到了这个插件，个人感觉这个东西应该是jquery官方的。推荐使用2.0的版本，因为现在官方上就是2.0的文档(http://docs.jquery.com/Plugins/Metadata)，1.0的，我个人还没看懂，倒是2.0的例子运行很正常。!DOCTYPE html PUBLIC "-/...
复制链接

扫一扫