jquery的data,jquery的datatable所有属性
jquery怎么获得元素data属性值
jQuery获取方法
成都创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于成都网站设计、网站制作、石泉网络推广、成都小程序开发、石泉网络营销、石泉企业策划、石泉品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联公司为所有大学生创业者提供石泉建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com
data()方法
//HTML代码 div id="myDiv" data-appid="123" data-myname="lsxj" data-app-id="456" data-my-name="secondname"/div
//获取属性
var appid = $("#myDiv").data("appid"); //123
var app-id = $("#myDiv").data("app-id"); //456
//属性赋值 $("#myDiv").data("appid","666");
//最终HTML代码 div id="myDiv" data-appid="123" data-myname="lsxj" data-app-id="456" data-my-name="secondname"/div
需要注意的是,data()的值进行修改并不会影响到DOM元素上的data-*属性的改变。data()的本质其实是将一个 “cache” 附加到了对象上,并使用了一个特殊的属性名称。
所以上述代码中,虽然对div进行了data()赋值操作,但HTML代码中div的data-appid的值仍然为123,因为data()只是修改了缓存的那个值,此时进行$('#myDiv').data("appid")的操作,输出的结果为666.
js获取data-*的方式
通过dataset属性访问
//HTML代码
div id="myDiv" data-appid="123" data-myname="lsxj"/div
//js代码
var div = document.getElementById("myDiv");
var appId = div.dataset.appid;//获取data-appid的值
var myName = div.dataset.myname;//获取data-myname的值
//设置值
div.dataset.appid = 456;
div.dataset.myname = "newname";
//最终HTML结果
div id="myDiv" data-appid="456" data-myname="newname"/div
dataset属性的值是DOMStringMap的一个实例,名值对的映射。每个data-name形式的属性都有一个对应的属性,只不过该属性名没有data-前缀。
兼容性:
需要注意的是,dataset中大小写的问题。带连字符连接的名称在使用的时候需要命名驼峰化。例如data-my-name对应的是dataset.myName的值。可看以下代码
//将上面代码的设置值部分进行修改
div.dataset.appId = 789;
div.dataset.myName = "secondname";
//最终结果
div id="myDiv" data-appid="123" data-myname="lsxj" data-app-id="456" data-my-name="secondname"/div
jquery easyui插件开发中的data用法
这就是一个为了一个方便。两种调用方式。
一种是以对象的名义发起。
假设,obj是一个
jQuery对象
,value是我想绑定在dom节点上的一个值,可以是数字、字符串或者对象。
那我可以两种方式调用data方法。
一种是obj.data(value);
第二种是$.data(obj,value);
怎么方便怎么用,没有区别。
jQuery中使用data()方法读取HTML5自定义属性data-*实例
如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-*
自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险
主要的方法如下:
代码如下:
.data(
key,
value
)
.data(
obj
)
.data(
key
)
.data()
从jQuery
1.4.3起,
HTML
5
data-
属性
将自动被引用到jQuery的数据对象中。
例如HTML:
复制代码
代码如下:div
data-role
=
"page"
data-last-value
=
"43"
data-hidden
=
"true"
data-options
=
'{"name":"John"}'
/div
下面的
jQuery代码都是返回
true
的:
代码如下:
$
(
"div"
)
.
data
(
"role"
)
===
"page"
;
$
(
"div"
)
.
data
(
"lastValue"
)
===
43
;
$
(
"div"
)
.
data
(
"hidden"
)
===
true
;
$
(
"div"
)
.
data
(
"options"
)
.
name
===
"John"
;
和html5的api不同的是,jQuery会尝试将字符串转换为一个JavaScript值(包括布尔值(booleans),数字(numbers),对象(objects),数组(arrays)和空(null))。如果这样做不会改变数值的表示,那么该值将转换为一个数字(number)。例如,“1E02”和“100.000”是等同于数字(数字值100),但将转换它们会改变他们的表示,所以他们被保留为字符串。字符串值“100”被转换为数字100。
如果数据(data)属性是一个对象(以“{”开始)或数组(以'[‘开始),可以用jQuery.parseJSON
将其解析成字符串;它必须遵循
有效的JSON的语法
,包括带双引号的属性名称。如果该值不能解析为一个JavaScript值,它将被保留为字符串。
如果想将取出的属性值直接当作字符串的话,请使用
attr()
方法。
data-属性是在第一次使用这个数据属性后不再存取或改变(所有的数据值都在jQuery内部存储)。
调用
.data()
时如果不带参数,将会以
JavaScript
对象的形式获取所有数据。这个对象可以安全的存放在变量中,因为一旦这个新对象被提取出来,之后对元素进行的
.data(obj)
操作,将不会再影响这个对象。另外,直接操作这个对象会比每次调用
.data()
来设置或获取值要快一些。
jQuery中.attr和.data的区别分析
attr方法可以用来获取JQuery对象的属性值,例如获取对象jq的name属性值:var v= jq.attr("name");
attr方法也可以用来设置属性值,例如:jq.attr("name", "test");作用是把对象jq对应的html元素的name属性值设置为test。
data方法用来获取JQuery对象上缓存的数据或者在JQuery对象上缓存数据,缓存的数据都是以key-value(键值对)形式保存。例如:
var d = jq.data("mydata");可以在JQuery对象jq上获取key为mydata的缓存数据。
jq.data("mk", "mv");可以在JQuery对象jq上缓存数据,键是mk,值是字符串“mv”。
data可以缓存任何JS对象,例如字符串、数组、json等等。
需要注意的是,key(键)中的字母只能用小写。
网站标题:jquery的data,jquery的datatable所有属性
文章分享:http://ybzwz.com/article/dsgehod.html