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

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

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

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

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

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

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

 

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

  

在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') 

 

你可能感兴趣的:(HTML,html5,javascript,jquery)