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"

});

　　

jquery metadata 详解的更多相关文章

  1. jQuery：详解jQuery中的事件（二）

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  2. jQuery.validator 详解二

    前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...

  3. jQuery.validator 详解

    jQuery.validator 详解二 前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示 ...

  4. jquery方法详解

    jquery方法详解 http://www.365mini.com/doc

  5. Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串

    Jquery 选择器 详解   在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...

  6. JQuery数组详解（含实例）

    <!doctype html>jQuery数组处理详解(含实例演示)@Mr.Think 演示所用数组 var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; 1 ...

  7. [转载]JavaEE学习篇之——JQuery技术详解

    原文链接:http://blog.csdn.net/jiangwei0910410003/article/details/32102187 1.简介2.工具3.jQuery对象 1.DOM对象转化成j ...

  8. jquery扩展函数详解（我的人生颠覆）

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 上次分析了jquery的源码 ...

  9. JQuery动画详解（四）

    一:基本动画show()显示隐藏的匹配元素.这个就是 'show( speed, [callback] )' 无动画的版本.如果选择的元素是可见的,这个方法将不会改变任何东西.无论这个元素是通过hid ...

随机推荐

  1. maven3的安装

    先来简单介绍一下maven,Maven是Apache的顶级项目,是基于项目对象模型,也就是POM模型,用作项目管理,基本上是用做Java的项目. 1.安装环境准备,首先确定机子上已经安装和配置好了JD ...

  2. Update语句到底是如何操作记录的?

    经常会听到一些开发的朋友说,Update语句的操作原理是:先删后加!今天偶然想起这句话,索性验证一下.参考下面示例: USE CSDN go --新添加一个文件组和文件 ALTER DATABASE ...

  3. javascript小数求整

    Math.ceil(arg) 返回一个比参数arg大的整数 Math.floor(arg) 返回一个比参数arg小的整数 Math.round(arg) 返回一个参数arg四舍五入的后的整数 pars ...

  4. 973. K Closest Points to Origin

    We have a list of points on the plane.  Find the K closest points to the origin (0, 0). (Here, the d ...

  5. 2018版OCP考试052最新题库及答案-35题

    35.Your database is using Automatic Memory Management. Which two SGA components must be managed manu ...

  6. jquery源码解析：pushStack，end，ready，eq详解

    上一篇主要讲解了jQuery原型中最重要的方法init.接下来再讲一些比较常用的原型方法和属性 core_slice = [].slice, jQuery.fn = jQuery.prototype ...

  7. uC/OS-II 函数之OSInit()

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 对于有热心的小伙伴在微博上私信我,说我的uC/OS-II 一些函数简介篇幅有些过于长应该分开介绍.应小伙伴的要求,特此将文章分开进行讲解.本文主要 ...

  8. 吴裕雄 python 机器学习——聚类

    import numpy as np import matplotlib.pyplot as plt from sklearn.datasets.samples_generator import ma ...

  9. oracle for update for update nowait

    对数据进行查询操作后,或提示ORA-00054错误,这时选定行的资源被占用,资源正忙.其他程序或者用户在占用着此行数据或者此表. 直接查询. select * from A1 t  ; 此时取到的数据 ...

  10. tomcat Setting property 'source' to 'org.eclipse.jst.jee.server

    很不爽,好好的项目不知道突然怎么了... 启动tomcat出个错,,,,, setting property 'source' to 'org.eclipse.jst.jee.server:jeesi ...