jQuery attr() 方法和 prop() 方法区别

最新推荐文章于 2022-06-09 15:27:21 发布

程序媛zcx

最新推荐文章于 2022-06-09 15:27:21 发布

阅读量3.8k

点赞数 9

分类专栏： JavaScript 前端文章标签： javascript attr prop

本文链接：https://blog.csdn.net/qq_40015157/article/details/110823718

版权

JavaScript 同时被 2 个专栏收录

72 篇文章 9 订阅

订阅专栏

前端

37 篇文章 1 订阅

订阅专栏

jQuery attr() 方法

定义和用法

attr() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值，则返回第一个匹配元素的值。

当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。

jQuery prop() 方法

定义和用法

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。

提示：如需检索 HTML 属性，请使用 attr() 方法代替。

提示：如需移除属性，请使用 removeProp() 方法。

一、在jQuery中，attr()函数和prop()函数都用于设置或获取指定的属性，它们的参数和用法也几乎完全相同。不同之处如下：

1、操作对象

很明显，attr和prop分别是单词attribute和property的缩写，并且它们均表示"属性"的意思。

不过，在jQuery中，attribute和property却是两个不同的概念。attribute表示HTML文档节点的属性，property表示JS对象的属性。

2、应用版本

attr()是jQuery 1.0版本就有的函数，prop()是jQuery 1.6版本新增的函数。毫无疑问，在1.6之前，你只能使用attr()函数；1.6及以后版本，你可以根据实际需要选择对应的函数。

对于表单元素的checked、selected、disabled等属性，在jQuery 1.6之前，attr()获取这些属性的返回值为Boolean类型：如果被选中(或禁用)就返回true，否则返回false。

但是从1.6开始，使用attr()获取这些属性的返回值为String类型，如果被选中(或禁用)就返回checked、selected或disabled，否则(即元素节点没有该属性)返回undefined。并且，在某些版本中，这些属性值表示文档加载时的初始状态值，即使之后更改了这些元素的选中(或禁用)状态，对应的属性值也不会发生改变。

因为jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。

因此，在jQuery 1.6及以后版本中，请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作，也尽量使用prop()函数。

prop()

方法操作radio（checkbox）之类的控件，让其选中的时候，其控件选中的值也会随之改变。即既可以控制其选中，也能控制其取消选中；

$("...").prop("checked");返回的是true或者false

如果有相应的属性，返回的是该属性，如果没有则返回空串

attr()

方法操作adio（checkbox）之类的控件，让其选中的时候，其控件选中的值不会随之改变。即只能控制其选中，不能控制其取消选中；

$("...").attr("checked");返回的是'checked'或者undefined

如果有相应的属性，返回的是该属性，如果没有则返回undefined

以下是我写的一个小案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>attr/prop</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("#p1").html("attr('checked'): " + $("input").attr('checked')
					  + "<br>prop('checked'): " + $("input").prop('checked'));		
	
	});
});
</script>
</head>
<body>

<button>查看attr() 和 prop() 的值</button>
<br><br>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p id="p1"></p>
</body>
</html>

效果：

选中：

取消选中：

<input id="check1" type="checkbox" checked="checked"> 去掉checked="checked"，改为<input id="check1" type="checkbox" >

效果：

选中：

取消选中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>radio</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){	
		$('input:radio:first').prop('checked', true);
		alert($("input[name='killOrder']:checked").val());
	});
});
</script>
</head>
<body>
<div class="radio-inline">
  <input type="radio"  name="killOrder" id="killOrder1" value="1" />
  <label for="killOrder1">是</label>
</div>
<div class="radio-inline">
  <input type="radio"  name="killOrder" id="killOrder2" value="0" checked/>
  <label for="killOrder2">否</label>
</div>
<button>查看</button>
</body>
</html>

$('input:radio:first').prop('checked', true);

点击查看，确定后会选择是，选择值为1，再次选择否，点击查看，确定，还是会选择是，选择值为1。

改成 $('input:radio:first').attr('checked', true);

点击查看，确定后会选择是，选择值为1，再次选择否，点击查看，确定，还是会选择否，选择值为0。点击查看无法自动选中是，只能手动选择。

attr和prop的使用场景：

1.添加属性名称该属性就会生效应该使用prop();

2.是有true,false两个属性使用prop();（如'checked','selected','disabled'等）

3.其他则使用attr();

官方推荐使用如下图：

程序媛zcx

关注

9
点赞
踩
33

收藏

觉得还不错? 一键收藏
0
评论
jQuery attr() 方法和 prop() 方法区别

jQueryattr()方法定义和用法attr() 方法设置或返回被选元素的属性和值。当该方法用于返回属性值，则返回第一个匹配元素的值。当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。jQueryprop()方法定义和用法prop() 方法设置或返回被选元素的属性和值。当该方法用于返回属性值时，则返回第一个匹配元素的值。当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。注意：prop() 方法应该用于检索属性值，例如 DO...
复制链接

扫一扫

专栏目录