jQuery--属性操作(attr、removeAttr、prop、removeProp)详解

属性操作

在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");//返回集合中第一个图像的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修改页面元素的属性


<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--属性操作(attr、removeAttr、prop、removeProp)详解_第1张图片

你可能感兴趣的:(jQuery,jQuery,属性操作,attr,prop)