admin管理员组

文章数量:1318981

Given jQuery's philosophy of write less, do more, I'm always surprised when I see this:

$(this).prop('checked')

… instead of this:

this.checked

Looking at the latest jQuery source, prop() provides convenience for these two gotchas:

1. $(elem).prop('for') is equivalent to elem.htmlFor.
2. $(elem).prop('class') is equivalent to elem.className.

It also normalizes tabIndex to:

• 0 for tabbable elements without a tab index.
• -1 for non-tabbable elements.

prop() is certainly useful for setting properties for multiple elements at once, and for chaining properties on a single element.

But is there any advantage (other than idiomatic) to use prop() to set or retrieve a single property on a single element except when normalizing tabIndex – specifically when you have a reference to the element (such as this in a callback)?

Given jQuery's philosophy of write less, do more, I'm always surprised when I see this:

$(this).prop('checked')

… instead of this:

this.checked

Looking at the latest jQuery source, prop() provides convenience for these two gotchas:

1. $(elem).prop('for') is equivalent to elem.htmlFor.
2. $(elem).prop('class') is equivalent to elem.className.

It also normalizes tabIndex to:

• 0 for tabbable elements without a tab index.
• -1 for non-tabbable elements.

prop() is certainly useful for setting properties for multiple elements at once, and for chaining properties on a single element.

But is there any advantage (other than idiomatic) to use prop() to set or retrieve a single property on a single element except when normalizing tabIndex – specifically when you have a reference to the element (such as this in a callback)?

• javascript
• jquery

Share Improve this question Follow asked Apr 10, 2015 at 13:53 Rick HitchcockRick Hitchcock 35.7k55 gold badges5050 silver badges8383 bronze badges 14

• 11 No, there's no advantage. It's convenient when the only thing you've got is already a jQuery object, but making a new jQuery object just so that .prop() can be called is silly. – Pointy Commented Apr 10, 2015 at 13:54
• 2 @px5x2 — Not when reading a value from it as per this example. – Quentin Commented Apr 10, 2015 at 13:57
• 1 I like this thread - not sure it requires an answer, but you illustrate one of the many reasons I only use 5% as much of the jQuery lib as I did 5 years ago. The vanilla approach even makes total sense with basic js types, e.g. the checked property on document.querySelector('input[type=checkbox]') will give me a boolean since it's finding a checkbox, but document.querySelector('div') will be undefined. – Josh from Qaribou Commented Apr 10, 2015 at 14:01
• 1 @RickHitchcock: Sometimes that form is used for consistency with the rest of the code, or to not confuse newbies, or simply wasn't edited when copying code from a question to an answer. Despite better knowledge. – Bergi Commented Apr 10, 2015 at 14:02
• 1 jQuery does some corrections for certain properties, e.g. src and href in IE, tabIndex , ... – t.niese Commented Apr 10, 2015 at 14:05

 |  Show 9 more ments

1 Answer 1

Sorted by: Reset to default 7

.prop as a getter has no real advantage, in fact, it is less performant than directly accessing the property.

The real utility of .prop is when used as a setter.

If you read the DOC, there is 3 way of setting something with .prop.

---

.prop(prop, value)

The first way has no advantage for a single element(except maybe if there is patibility issue).

In fact this.check = true; is the same as $(this).prop('checked', true), but faster.

If you have a set of element though, there is an advantage. You don't have to manually loop all elements, jQuery does it for you.

---

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

The second way is useful when you have multiple properties to change. Instead of listing every properties you want to change like that :

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

You can pass an object like that :

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

---

.prop(prop, callback)

The third way is in my opinion my favorite one. Using a callback function allow you to set every element individually on a set of condition. The callback receive 2 arguments: the index and the old value.

A good example of the use of a function is to reverse the state of every checkbox:

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

本文标签： javascript(this)prop(39property39) vs thispropertyStack Overflow