javascript - $(this).prop ('property' ) 与 this.property

Question

鉴于 jQuery 的哲学少写，多做，当我看到这个时我总是感到惊讶:

$(this).prop('checked')

... 而不是这个:

this.checked

查看最新的 jQuery 源代码，prop() 为这两个陷阱 提供了便利:

1. $(elem).prop('for') 等同于 elem.htmlFor。
2. $(elem).prop('class') 等同于 elem.className。

它还将 tabIndex 规范化为:

• 0 表示没有标签索引的可标签元素。
• -1 用于非制表符元素。

prop() 对于一次为多个元素设置属性以及在单个元素上链接属性当然很有用。

但是除了规范化 tabIndex 之外，使用 prop() 设置或检索单个元素的单个属性是否有任何优势(除了惯用的)——特别是当您是否有对元素的引用(例如回调中的 this)？

Answer 1

.prop 作为 getter 没有真正的优势，事实上，它的性能不如直接访问属性。

.prop 的真正用途是用作 setter。

如果您阅读 DOC ，有 3 种方法可以使用 .prop 进行设置。

---

.prop(prop, 值)

第一种方法对单个元素没有优势(除非存在兼容性问题)。

事实上 this.check = true; 与 $(this).prop('checked', true) 相同，但速度更快。

不过，如果您有一组元素，那将是一个优势。您不必手动循环所有元素，jQuery 会为您完成。

---

.prop({prop : 值[, prop : 值, ...]});

当您有多个属性要更改时，第二种方法很有用。而不是像那样列出您想要更改的每个属性:

this.prop1=true;
this.prop2=true;
this.prop3=true;
this.prop4=true;

你可以像这样传递一个对象:

$(this).prop({
    prop1 : true,
    prop2 : true,
    prop3 : true,
    prop4 : true
});

---

.prop(prop, 回调)

第三种方式在我看来是我最喜欢的一种。使用回调函数允许您根据一组条件单独设置每个元素。回调接收 2 个参数:索引和旧值。

使用函数的一个很好的例子是反转每个复选框的状态:

$('checkbox').prop('checked', function(_, old){
    return !old;
});