我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

jquerydata,jQueryDataTables 处理中 禁止操作

jquery怎么获得元素data属性值

jQuery获取方法

站前ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!

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怎么设置data的值

jquery中data() 方法向被选元素附加数据,或者从被选元素获取数据。

jquery中data() 方法向被选元素附加数据,或者从被选元素获取数据。这使我们通过HTML自定义属性,操作数据,显得非常方便。通常我们也会通过给html自定义属性这样的做法,来存储和操作数据。在jquery中也给我们

提供了data(name,value)这样的方法,来非常方便的实现。有了data()这个方法,你就可以很方便的在一个html标签中添加data-*这样的自定义属性。接下来,就data()方法简单的做下了解。

以下是摘自w3school中对data用法的说明:

data方法从元素中读取数据的语法:

$(selector).data(name) name:可选。规定要取回的数据的名称。

如果没有规定名称,则该方法将以对象的形式从元素中返回所有存储的数据。

data方法从元素中存储数据的语法:

$(selector).data(name,value)

name:必需。规定要设置的数据的名称。

value:必需。规定要设置的数据的值。

当然,我们在这里,也可以把一个包含键/值对的对象,向被选元素添加数据。语法如下:

$(selector).data(object)

object:必需。规定包含名称/值对的对象。

Html代码如下:

data方法之读取数据:

单个数据:data-name="lichaoqiang"

存储json数据:{"user_id":20141111,"user_name":"lichaoqiang"}

注意:在元素data-*属性中设置json数据时,需要注意单双引号,否则可能出现undefined的,获取不到数据。正确的做法是用双引号。

data方法之存储数据:

这是一个div标签

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()

来设置或获取值要快一些。


分享题目:jquerydata,jQueryDataTables 处理中 禁止操作
当前URL:http://shouzuofang.com/article/dsejioh.html

其他资讯