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

亦凉 2021-08-14 01:02 605阅读 0赞

#### 属性操作 ####

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

<table> 
 <thead> 
  <tr> 
   <th align="center">方法</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center"><code>attr(name|pro|key|,val|fn)</code></td> 
   <td align="center">获取或设置元素的属性</td> 
  </tr> 
  <tr> 
   <td align="center"><code>removeAttr(name)</code></td> 
   <td align="center">删除元素的某一个属性</td> 
  </tr> 
  <tr> 
   <td align="center"><code>prop(name|pro|key,val|fn)</code></td> 
   <td align="center">后去或设置元素的一个或多个属性</td> 
  </tr> 
  <tr> 
   <td align="center"><code>removeProp(name)</code></td> 
   <td align="center">删除由prop()方法设置的属性集</td> 
  </tr> 
 </tbody> 
</table>

当元素属性（如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))

示例：

$("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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/8473a943fa4c486a9af8eb9830b05938.png