JQuery系列之属性操作

---

一、属性

1、元素自定义属性值 attr()

1.1、概述

设置或返回被选元素的属性值。

1.2、语法

selector.attr(name);
selector.attr(properties);
selector.attr(key, value);
selector.attr(key, fn);
1
2
3
4

1.3、参数

• name：String 属性名称；
• properties：String 作为属性的“名/值对”对象
• key：String 属性名称；
• value：Object 属性值；
• fn：Function 返回属性值的函数，第一个参数为当前元素的索引值，第二个参数为原先的属性值；

1.4、示例

返回文档中所有图像的src属性值。

$("img").attr("src");
1

为所有图像设置src和alt属性。

$("img").attr({ src: "test.jpg", alt: "Test Image" });
1

为所有图像设置src属性。

$("img").attr("src", "test.jpg");
1

把src属性的值设置为title属性的值。

$("img").attr("title", function () {
	return this.src;
});
1
2
3

2、删除元素自定义属性值removeAttr()

2.1、概述

从每一个匹配的元素中删除一个属性

1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false)；
1.7版本在IE6下已支持删除disabled。

2.2、语法

selector.removeAttr(name);
1

2.3、参数

• name：String 要删除的属性名；

2.4、示例

将文档中图像的src属性删除

<img src="test.jpg" />
1

$("img").removeAttr("src");
1

3、元素固有属性值 prop()

3.1、概述

获取在匹配的元素集中的第一个元素的属性值。

随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

3.2、语法

selector.prop(name);
selector.prop(properties);
selector.prop(key, value);
selector.prop(key, fn);
1
2
3
4

3.3、参数

• name：String 属性名称；
• properties：String 作为属性的“名/值对”对象
• key：String 属性名称；
• value：Object 属性值；
• fn：Function 返回属性值的函数，第一个参数为当前元素的索引值，第二个参数为原先的属性值；

3.4、示例

选中复选框为true，没选中为false

$("input[type='checkbox']").prop("checked");
1

禁用页面上的所有复选框。

$("input[type='checkbox']").prop({
	disabled: true
});
1
2
3

禁用和选中所有页面上的复选框。

$("input[type='checkbox']").prop("disabled", true);
$("input[type='checkbox']").prop("checked", true);
1
2

通过函数来设置所有页面上的复选框被选中。

$("input[type='checkbox']").prop("checked", function (i, val) {
	return !val;
});
1
2
3

4、删除元素固有属性值removeProp()

4.1、概述

用来删除由.prop()方法设置的属性集

随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

4.2、语法

selector.removeProp(name);
1

4.3、参数

• name：String 要删除的属性名；

4.4、示例

设置一个段落数字属性，然后将其删除。

<p>p>
1

var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
1
2
3
4
5

二、数据缓存

1、data

1.1、概述

在元素上存放或读取数据，返回jQuery对象。

当参数只有一个key的时候，为读取该jQuery对象对应DOM中存储的key对应的值，值得注意的是，如果浏览器支持HTML5，同样可以读取该DOM中使用 data-[key] = [value] 所存储的值。参见最后一个示例。

当参数为两个时，为像该jQuery对象对应的DOM中存储key-value键值对的数据。

如果jQuery集合指向多个元素，那将在所有元素上设置对应数据。 这个函数不用建立一个新的expando，就能在一个元素上存放任何格式的数据，而不仅仅是字符串。

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

1.2、语法

selector.data(key);
selector.data(key, value);
selector.data(key, obj);
1
2
3

1.3、参数

• key：存储的数据名
• value：将要存储的任意数据
• obj：一个用于设置数据的键/值对

1.4、示例

在一个div上存取数据

<div>div>
1

$("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
1
2
3
4
5
6
7

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

<div>div>
1

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

在HTML5规范中div中读取预存的data-[key]值

<div data-test="this is test">div>
1

$("div").data("test"); //this is test!;
1

2、removeData

2.1、概述

在元素上移除存放的数据
与 data 函数作用相反

2.2、语法

selector.removeData(name);
selector.removeData(list);
1
2

2.3、参数

• name：存储的数据名；
• list：移除数组或以空格分开的字符串；

2.4、示例

从元素中删除之前添加的数据：

$("#btn2").click(function () {
	$("div").removeData("greeting");
	alert("Greeting is: " + $("div").data("greeting"));
});
1
2
3
4

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！