属性操作

在JQuery中提供了一系列方法用于操作对象的属性。

方法

描述

attr(name|pro|key|,val|fn)

获取或设置元素的属性

removeAttr(name)

删除元素的某一个属性

prop(name|pro|key,val|fn)

后去或设置元素的一个或多个属性

removeProp(name)

删除由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()方法用于删除匹配元素的指定属性

removeAttr(name)//name：属性名

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()方法设置的属性集

removeProp(name)//name表示需要被删除的属性名

示例：

$("input[type='checkebox']").removeProp("disabled");
使用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中prop的用法 jq prop的用法_prop