jQuery之attr()和prop()的区别

刺骨的言语ヽ痛彻心扉 2022-09-08 00:07 119阅读 0赞

### 文章目录 ###

*  前言
 *   *  如何使用两种方法
     *  1. attr()用法
     *  2. prop()用法

--------------------

# 前言 #

attr()与prop() 都具有设置和获取属性值的功能，但还是有所不同，下面就来解释一下吧

--------------------

## 如何使用两种方法 ##

1.  对于checked ，readOnly，selected，disabled等属性的操作 用prop()方法
2.  其他属性操作都用 attr() 方法

## 1. attr()用法 ##

下面是attr()的正确使用方法

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script type="text/javascript" src="jquery-3.5.1.js"></script>
    		<script type="text/javascript">
    		
    			$(function(){
          
    				
    				alert($(":checkbox:first").attr("value")) //获取value值
    				$(":checkbox:first").attr("value","checkboxone") //设置value属性值
    				alert($(":checkbox:first").attr("value"))   //再次获取观察变化
    			})
    		</script>
    	</head>
    	<body>
    		<input type="checkbox" value="checkbox1" checked="checked"/>checkbox1
    		<input type="checkbox" value="checkbox2" />checkbox2
    		<input type="checkbox" value="checkbox3" />checkbox3
    	</body>
    </html>

运行结果  
![在这里插入图片描述][ec95b0a0bc7c472b9bbabbda7959b6fc.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbTE5Nw_size_16_color_FFFFFF_t_70]

如果用attr()方法来操作checked等属性，会出现异常的显示，下面举个例子解释一下

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script type="text/javascript" src="jquery-3.5.1.js"></script>
    		<script type="text/javascript">
    		
    			$(function(){
          
    				alert($(":checkbox").attr("checked"))
    				alert($("#checked").attr("checked"))
    			})
    		</script>
    	</head>
    	<body>
    		<input type="checkbox" value="checkbox1" checked="checked"/>checkbox1
    		<input type="checkbox" value="checkbox2" id="checked" />checkbox2
    		<input type="checkbox" value="checkbox3" />checkbox3
    	</body>
    </html>

第一个选中有checked属性，第二个没有选中  
运行结果  
显示的是属性的内容  
可以看出不易判断是否选中状态  
![在这里插入图片描述][b18194d451f44b8b8b340f687c55fb37.png]  
![在这里插入图片描述][def6ab293c27445ba9d8685ab3557f21.png]

## 2. prop()用法 ##

同样的代码只是换一下方法

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script type="text/javascript" src="jquery-3.5.1.js"></script>
    		<script type="text/javascript">
    		
    			$(function(){
          
    				alert($(":checkbox").prop("checked"))
    				alert($("#checked").prop("checked"))
    			})
    		</script>
    	</head>
    	<body>
    		<input type="checkbox" value="checkbox1" checked="checked"/>checkbox1
    		<input type="checkbox" value="checkbox2" id="checked" />checkbox2
    		<input type="checkbox" value="checkbox3" />checkbox3
    	</body>
    </html>

运行结果  
这里选中的话就显示true，没有选中就显示false，判别度高，所以是操作这类属性的推荐方法。  
![在这里插入图片描述][7a723b3afce641089ba785f694ba3e4d.png]  
![在这里插入图片描述][a6eaaba69f834e7bb13934550cd31396.png]

[ec95b0a0bc7c472b9bbabbda7959b6fc.png]: /images/20220829/c638627ca06546a08b3bc7497cdf058d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbTE5Nw_size_16_color_FFFFFF_t_70]: /images/20220829/1feb5f9666b34783a2604e09a7c09a5d.png
[b18194d451f44b8b8b340f687c55fb37.png]: /images/20220829/4c9161caaf9947a1baa6800c302cbd0a.png
[def6ab293c27445ba9d8685ab3557f21.png]: /images/20220829/2a678a15f09b4f4c9b82515248eb4fff.png
[7a723b3afce641089ba785f694ba3e4d.png]: /images/20220829/555bf5a9d0324f1cb7ccb3382a00a5fb.png
[a6eaaba69f834e7bb13934550cd31396.png]: /images/20220829/a2d72bb4c92c43fd81f8fe64eae1c047.png