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. XJOI 3363 树4/ Codeforces 739B Alyona and a tree(树上差分+路径倍增)

    D. Alyona and a tree time limit per test  2 seconds memory limit per test  256 megabytes input  stan ...

  2. CentOS7安装confluenceWIKI并破解汉化

    关闭防火墙和selinux   开始搭建Wiki前,需要下载一些软件包. wget https://www.atlassian.com/software/confluence/downloads/bi ...

  3. mongoexport遭遇Authentication failed

    今天使用mongoexport工具导出数据,遇到权限不足报错:[host]$mongoexport  -h 10.31.11.190:23820 -udbmgr -pMgr2mgdb -d rcmp ...

  4. MVC4 基于 Unity Ioc 框架的 ControllerFactory

    首先引入Untiy框架. 可以在NuGet程序包 管理器中直接安装. 新建 继承DefaultControllerFactory  的UnityControllerFactory: 重写虚方法GetC ...

  5. Ocelot Consul ACL

    Ocelot允许您指定服务发现提供程序,并使用它来查找Ocelot正在将请求转发给下游服务的主机和端口.目前,这仅在GlobalConfiguration部分中受支持,这意味着所有ReRoute将使用 ...

  6. pageadmin CMS Sql新建数据库和用户名教程

    用pageadmin网站制作如何Sql新建数据库和用户名 sql server软件安装完毕后,需要新建一个数据库用来作为网站的数据库. 1.打开sql管理界面,如图所示,找到数据库,右键单击数据库,选 ...

  7. Mayor's posters 线段树区间覆盖

    题目链接 http://poj.org/problem?id=2528 Description The citizens of Bytetown, AB, could not stand that t ...

  8. leetcode 48. 旋转图像 java

    class Solution { public void rotate(int[][] matrix) { int n = matrix.length; for (int k = 0; k < ...

  9. “全栈2019”Java第五十五章：方法的静态绑定与动态绑定

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  10. git恢复到上次提交

    4个区 5种状态 未修改(Origin) 已修改(Modified) 已暂存(Staged) 已提交(Committed) 已推送(Pushed) 检查修改 已修改,未暂存(检查工作区与暂存区间的差异 ...