jQuery--属性操作（attr、removeAttr、prop、removeProp）详解

最新推荐文章于 2023-06-29 23:04:35 发布

吴声子夜歌

最新推荐文章于 2023-06-29 23:04:35 发布

阅读量1.4k

点赞数 4

分类专栏： jQuery 文章标签： jQuery 属性操作 attr prop

本文链接：https://blog.csdn.net/cold___play/article/details/101860784

版权

jQuery 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

属性操作

在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>

在这里插入图片描述

吴声子夜歌

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jQuery--属性操作（attr、removeAttr、prop、removeProp）详解

属性操作在JQuery中提供了一系列方法用于操作对象的属性。方法描述attr(name|pro|key|,val|fn)获取或设置元素的属性removeAttr(name)删除元素的某一个属性prop(name|pro|key,val|fn)后去或设置元素的一个或多个属性removeProp(name)删除由prop()方法设置的属性集当元素...
复制链接

扫一扫