dom 绑定数据

一、绑定/修改    .jQuery修改属性值，都是在内存中进行的，并不会修改 DOM

1.  对象绑定  $(selector).data(name)

$("#form").data("name")

2. dom 绑定  $.data(element,name, val);

jQuery.data($("#form")[0], "testing", 123);

3. data-* 属性    

<input type="text"  data-name="test">

读取data-*会自动做数据类型转换，如果不想要这种转换只能使用attr()去获取原始的属性值  (data-options='{"name":"John"}'   -    {"name":"John"})

data-*会被jQuery绑定到HTMLElement对象上，而不是jQuery封装后的对象上

二、获取

$("#input").data("name")

 all

$.data($("#BugFreeQuery_value1")[0])

$( "body" ).data()

三、判断是否有绑定的数据    jQuery.hasData(element)

jQuery.hasData($('#p')[0])  

$( "body" ).data()   &&  undefined

四、删除  jQuery.removeData(element)

jQuery.removeData($('#p')[0])

jQuery.removeData($('#p')[0],'name')

$( "body" ).removeData("foo");

五、扩展 js  dataset

dataset并不是典型意义上的JavaScript对象,而是个DOMStringMap对象

data属性基本上所有的浏览器都是支持的,但是dataset对象支持的就比较特殊了,目前仅在Opera 11.1+,Chrome 9+下可以通过javascript,使用dataset访问你自定义的data属性.

显示改变dom   且转驼峰特性   data-his-lover="xx" （jq data方法不会改变刷新dom，仅在内存中进行）

var element = document.getElementById("a");     element.dataset.hisLover = "xx";   

 

转载于:https://www.cnblogs.com/justSmile2/p/9674459.html