属性操作
在JQuery中提供了一系列方法用于操作对象的属性。
| 方法 | 描述 |
|---|---|
| 获取或设置元素的属性 |
| 删除元素的某一个属性 |
| 后去或设置元素的一个或多个属性 |
| 删除由prop()方法设置的属性集 |
当元素属性（如checked、selected和disabled等）取值为true或false时，通过prop()方法对属性进行操作，而其他普通属性通过attr()方法操作。
1. attr()方法：
arrt()方法用于获取所匹配的元素的集合中第1个元素的属性，或设置所匹配元素的一个或多个属性，其语法格式如下：
attr(name)
attr(properties)
attr(key,value)
attr(key,function(index,oldAttr))
- name：表示元素的属性名
- properties：表示一个由key/value键值对构成的集合，用于设置元素中的1~n个属性
- key：表示需要设置的属性名
- value：表示需要设置的属性值
- function：表示使用函数的返回值所谓属性值，index表示当前元素在集合中的索引位置，oldAttr表示当前元素在修改之前的属性值
示例：
$("img").attr("src");//返回<img>集合中第一个图像的src属性值
$("#myImage").attr("src");//返回id为myImage图像的src属性值
$("#myImage").attr("src","images/flower2.png");//设置myImage的src属性
$("#myImage").attr({src:"images/flower2.png", title:"玫瑰花"});
$("#myImage").attr("title",function(){
return this.src;
});
2. removeAttr()方法：
removeAttr()方法用于删除匹配元素的指定属性
3. prop()方法：
prop()方法用于获取匹配元素的集合中第一个元素的属性，或设置所匹配元素的一个或多个属性。prop()方法多永固boolean类型的属性操作，例如checked、selected和disabled等。
prop(name)
prop(properties)
prop(key, value)
prop(key,function(index,oldAttr))
- name：表示元素的属性名
- properties：表示一个由key/value键值对构成的集合，用于设置元素中的1~n个属性
- key：表示需要设置的属性名
- value：表示需要设置的属性值
- function：表示使用函数的返回值所谓属性值，index表示当前元素在集合中的索引位置，oldAttr表示当前元素在修改之前的属性值
示例：
$("input[type='checkbox']").prop("checked);//返回复选框状态
$("input[type='checkbox']").prop("checked",true);//将所有复选框选中
$("input[type='checkbox']").prop({disabled:true, checked:true});
$("input[type='checkbox']").prop("checked",function(index,oldValue){
return !oldValue;
});
4. removeProp()方法：
removeProp()方法用于删除由prop()方法设置的属性集
示例：
使用jQuery修改页面元素的属性
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery基本操作-属性操作</title>
<script type="text/javascript" src="js/jquery-1.x.js">
</script>
</head>
<body>
<img id="flower1" src="images/flower1.png" height="200px" />
<img id="flower2" src="images/flower2.png" height="200px" />
<hr/>
<input type="button" value="交互鲜花" onClick="changeFlower()" />
<hr/>
<input type="checkbox" name="goodsType" value="玫瑰" checked />玫瑰
<input type="checkbox" name="goodsType" value="百合" />百合
<input type="checkbox" name="goodsType" value="康乃馨" checked/>康乃馨
<input type="checkbox" name="goodsType" value="马蹄莲" />马蹄莲<br/>
<hr/>
<input type="button" value="全选" onClick="changeSelect()" />
<input type="button" value="反选" onClick="reverseSelect()" />
<input type="button" value="全选并禁用" onClick="disabledSelect()" />
<input type="button" value="取消禁用" onClick="enabledSelect()" />
<script type="text/javascript">
function changeFlower() {
var flowerSrc = $("#flower1").attr("src");
$("#flower1").attr("src", function() {
return $("#flower2").attr("src")
});
$("#flower2").attr("src", flowerSrc);
}
function changeSelect() {
$("input[type='checkbox']").prop("checked", true);
}
function reverseSelect() {
$("input[type='checkbox']").prop("checked", function(index, oldValue) {
return !oldValue;
});
}
function disabledSelect() {
$("input[type='checkbox']").prop({
disabled: true,
checked: true
});
}
function enabledSelect() {
$("input[type='checkbox']").removeProp("disabled");
}
</script>
</body>
</html>
![用jQuery实现一个简易的聊天框[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)