您的位置：首页 > Web前端 > JQuery

jquery metadata 详解

2015-11-26 17:22 531 查看
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"
});


　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航