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