小兔网

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>

效果:

选中:

2021090108500012345601

取消选中:

2021090108500012345602

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

效果:

选中:

2021090108500012345603

取消选中:

2021090108500012345604

<!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。

2021090108500012345605

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

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

2021090108500012345606

attr和prop的使用场景:

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

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

3.其他则使用attr();

 

官方推荐使用如下图:

2021090108500012345607