jQuery属性节点

1.attr属性操作

在jQuery中，可以通过attr()方法操作属性，可以是固有属性，也可以是自定义属性。

1.1 设置属性值

// 设置单个属性
$("div").attr("title", "我是一个div");
// 设置多个属性
$("img").attr({
"src" : "img/11.jpg",
"alt" : "我是一张风景图片"
});

1.2 获取属性值

// 获取alt属性值
console.log($("img").attr("src"));
// 获取title属性值
console.log($("div").attr("title"));

1.3 删除属性
removeAttr(name)从每一个匹配的元素中删除一个属性。

// 删除alt属性值
$("img").removeAttr("alt");
// 删除title属性值
$("div").removeAttr("title");

2. prop表单属性操作

在jQuery中，通过prop()方法操作属性，只能操作固有属性，特别用于：checked、disabled、selected等表单属性。

注意：checked、disabled、selected等表单属性只能通过prop()方法来操作。

2.1 设置属性值

// 设置单选框为选中状态
$("input:radio").prop("checked", true);

// 设置多选框为未选中状态
$("input:checkbox").prop("checked", false);

2.2 获取属性值

// 获取下拉列表option的选中状态
var flag1 = $("select > option").prop("selected");
// 获取单选框的选中状态
var flag2 = $("input:radio").prop("checked");

3. class属性操作

3.1 添加class属性
addClass() 为每个匹配的元素添加指定的类名，如需添加多个类，请使用空格分隔类名。

该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。

// 添加一个class
$("div").addClass("box1");
// 添加多个class
$("div").addClass("box2 box3");

在项目开发中，我们可以通过jQuery的方式来给元素添加class，从而实现给元素添加CSS样式（比通过jQuery添加CSS样式效率更高）。

3.2 移除class属性
removeClass() 方法从被选元素移除一个或多个类。

如果没有规定参数，则该方法将从被选元素中删除所有类。

// 移除一个class
$("div").removeClass("box1");
// 移除多个class
$("div").removeClass("box1 box2");
// 移除全部class
$("div").removeClass();

3.3 判断是否某个class属性

hasClass()可以用来判断元素中是否含有某个class。如果有，则返回true，否则返回false。

// 判断div中是否包含值为box的class
if($("div").hasClass("box")) {
// 如果存在，则移除这个class
$("div").removeClass("box");
}

3.4 切换class属性
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

// 切换一个class
$("div").toggleClass("box");
// 切换多个class
$("div").toggleClass("box1 box2");