网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

.datajquery的简单介绍

jquery easyui插件开发中的data用法

这就是一个为了一个方便。两种调用方式。

创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都做网站、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的泊头网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

一种是以对象的名义发起。

假设,obj是一个

jQuery对象

,value是我想绑定在dom节点上的一个值,可以是数字、字符串或者对象。

那我可以两种方式调用data方法。

一种是obj.data(value);

第二种是$.data(obj,value);

怎么方便怎么用,没有区别。

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方法之读取数据:

div id="divName" data-name="lichaoqiang"单个数据:data-name="lichaoqiang"/div

div id="divJson" data-user='{"user_id":20141111,"user_name":"lichaoqiang"}'存储json数据:{"user_id":20141111,"user_name":"lichaoqiang"}/div

script type="text/javascript"

console.log($("#divName").data("name")); //通过name输出单个数据

console.log($("#divJson").data("user").user_name); //通过name输出json数据

/script

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

data方法之存储数据:

div id="container"这是一个div标签/div

script type="text/javascript"

$("#container").data("name", "lichaoqiang");//存储数据

console.log($("#container").data("name"));//通过name读取数据

/script

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获取方法

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对象。

如果jQuery集合指向多个元素,那将在所有元素上设置对应数据。

这个函数不用建立一个新的expando,就能在一个元素上存放任何格式的数据,而不仅仅是字符串。

V1.4.3 新增用法NEW data(obj) 可传入key-value形式的数据。

参数

keyStringV1.23

存储的数据名.

key,valueString,AnyV1.2.3

key:存储的数据名

value:将要存储的任意数据

objobjectV1.4.3

一个用于设置数据的键/值对

data()V1.4.3

示例

描述:

在一个div上存取数据

HTML 代码:

div/div

jQuery 代码:

$("div").data("blah"); // undefined

$("div").data("blah", "hello"); // blah设置为hello

$("div").data("blah"); // hello

$("div").data("blah", 86); // 设置为86

$("div").data("blah"); // 86

$("div").removeData("blah"); //移除blah

$("div").data("blah"); // undefined

描述:

在一个div上存取名/值对数据

HTML 代码:

div/div

jQuery 代码:

$("div").data("test", { first: 16, last: "pizza!" });

$("div").data("test").first //16;

$("div").data("test").last //pizza!;


文章标题:.datajquery的简单介绍
文章转载:http://bjjierui.cn/article/dsdessh.html

其他资讯