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. Git代码行统计命令集

    统计某人的代码提交量,包括增加,删除: git log --author="$(git config --get user.name)" --pretty=tformat: --n ...

  2. BitArray简单例子

    using System; using System.Collections; using System.Text; namespace TestConsole { class Program { s ...

  3. .net core MVC接受来自自前端的GET和POST请求方法的区别

    小伙伴们都知道,常用的http请求有两种方式,即GET方法和POST方法,很多刚入门的童鞋难免都会有一个误区,是不是GET是从服务器上获取数据,POST是向服务器传送数据? 我的理解是:不论是GET还 ...

  4. ES6——数据结构 Map

    数据结构 Map 字典: 用来存储不重复key的 Hash结构.不同于集合(Set)的是,字典使用的是 [键,值] 的形式来存储数据的. JavaScript 的对应那个(Object:{}) 只能用 ...

  5. ptyhon【递归练习】

  6. VMware安装linux系统报错：已将该虚拟机配置为使用 64 位客户机操作系统。但是，无法执行 64 位操作。

    检测问题所在: 下载LeoMoon CPU-V 检查一下CPU VT-x状态是否启用 地址:http://download.csdn.net/detail/qq_22860341/9858011 如果 ...

  7. CSS动态定位

    $(document).ready(function(){ $('body').on('click', '#start_timer', function() { var laydate = $(&qu ...

  8. linux修改用户名

      貌似只需要改红色的就行了,要保险就都改,比如阿里云服务器就要2个都改   ubuntu:修改 /etc/hostname               修改 /etc/hosts  比如:127.0 ...

  9. 一款不错的jQuery分页插件--pagination

    一.前言: 分页功能在项目中时常用到,一款可以快速实现分页功能的插件非常有必要,pagination--这款插件功能非常完美,几乎我所有项目中使用到分页的地方都会第一时间考虑到这个插件,但是其实有能力 ...

  10. 机器学习 - ML + 深度学习 - DL

    机器学习 CNCC - 2016 | 机器学习(原文链接) Machine Learning - ML,机器学习起源于人工智能,是AI的一个分支. 机器学习的理论基础:计算学习理论 - Computa ...