HTML：利用data自定义属性进行传值

data-* 属性用于存储私有页面后应用的自定义数据，可以在所有的 HTML 元素中嵌入数据。

自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。

data-* 属性由以下两部分组成：

1. 属性名不要包含大写字母，在 data- 后必须至少有一个字符。
2. 该属性可以是任何字符串

注意： 自定义属性前缀 "data-" 会被客户端忽略。

语法：<element data-*="somevalue">

 

为一个元素分配data属性存储数据

  <div class="open"  data-id="1"></div>

在js中设置和获取

var open = document.getElementsByClassName('open');

open.dataset.id = '1';//设置

open.onclick = function () {

        alert(this.dataset.id);//获取

    }

在jq中设置和获取

  $('.open').click(function () {
        var name = $(this).data("name","word")//设置

        var id = $(this).attr("data-id")//获取

        //或者 var id = $(this).data('id')

        console.log(id)
    })

在jq中设置也可以把一个包含键/值对的对象，向被选元素添加数据 (在元素data-*属性中设置json数据时，需要注意单双引号，否则可能出现undefined的,获取不到数据,正确的做法是用双引号。)

dom.data('setObj', JSON.stringify({'name': 'william', 'age': 22}))

取的时候，只需要

var obj = dom.data('setObj')