jquery attr()和prop()方法的区别

时间:2023-03-08 15:44:12
jquery attr()和prop()方法的区别

$('').attr()返回的是html对象

$('').prop()返回的是DOM对象

attr():

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

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

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

方法操作adio(checkbox)之类的控件,让其选中的时候,其控件选中的值不会随之改变。即只能控制其选中,不能控制其取消选中;

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

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

prop():

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

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

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

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

类似于$("...").attr("checked");返回的是true或者false

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

attr和prop的使用场景:

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

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

3.其他则使用attr();

  //全选反选
$("#allcheck").click(function() {
$("#last input:checkbox").each(function(index, domEle) {
$(domEle).prop("checked", "true");
});
});
$("#invertcheck").click(function() {
$("#last input:checkbox").each(function(index, domEle) {
$(domEle).prop("checked", !$(domEle).prop("checked"));
}); });
$("#unallcheck").click(function() {
$("#last input:checkbox").each(function(index, domEle) {
$(domEle).removeAttr("checked");
});
});