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
[img]这就是一个为了一个方便。两种调用方式。
一种是以对象的名义发起。
假设,obj是一个
jQuery对象
,value是我想绑定在dom节点上的一个值,可以是数字、字符串或者对象。
那我可以两种方式调用data方法。
一种是obj.data(value);
第二种是$.data(obj,value);
怎么方便怎么用,没有区别。
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
可以这样判断一下嘛:
success:function(data){
$(data).each(function(id)
{
//这里面的$使用,貌似只能把data当作是XML处理
if($(this).attr('class')=="list_pic")//判断是不是list_pic类
console.log($(this)[0].outerHTML);//得到包含DIV标签的内容
});
}
在元素上存放数据,返回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!;