Why is jQuery 1.9+ attr () method not deprecated?

Question

Can I, the developer of jQuery1.9 +, "refuse" to use the attr() method in my daily work?

---

As shown in many questions,

• .prop () vs .attr () (main)
• jQuery attr vs. prop, is there a list of details?
• jQuery attr vs prop?
• Migrating jQuery 1.8.3 to 1.9.0 - Replacing deprecated .attr ()
• ... etc....

There is a lot of confusion regarding the “use of attr or the use of prop?”, and from my (developer's) point of view, for all kinds of use of the attr() method, we can use prop instead:

• backward compatibility: the coding of new software does not need this;
• performance: John says "Accessing properties using the .attr () method will be slightly slower than accessing them directly through .prop ()";
• Change attribute value: everything can be changed using the prop(name,newvalue) .
• Remove attribute: everything can be removed using the removeProp(name) method.
• Check the values ​​of the HTML attributes: the browser uses the DOM, all the HTML has been converted to the DOM, and if the DOM affected the attr(name) method. About the "strong type" prop: better than "html string value" (for example, "checked" vs true).
• Check if the attribute was defined in the "HTML source" (if this attr method in your browser returns undefined, if it is not) ... Well, do we need this in some kind of software? In forms, the ".val () method is the recommended jQuery method to get or set form values"
• Browser compatibility: both (not just attr) are consistent methods. (this is??).

So, at this time (2013), I see no good reason to use the attr method when developing new jQuery code ... But, well, this is, in other words, the question: Are there a good reason to use the attr method in my everyday tasks?

Answer 1

My homework ... After reading @cHao and @cernunnos good explanations, and after a few months using this ... I need a different concept to decide, as a programmer, if prop and attr are used or not:

• HTML source code and presentation: the browser loads the HTML page into the browser memory space. It's nice that being in the memory browser is a DOM view, but the DOM preserves some original things, like attributes, and the cssText property , which are "sometimes persistent views."
  PS: attributes that are not defined in the "standard DOM" have no mapping to DOM properties. When a single attribute is changed (not only for reading), if there is a corresponding (displayed) property, it can be changed automatically.

• DOM state: dynamic pages need changes directly in the DOM, this is what end users see. So, if there is some click and change action on the page, every time the DOM moves to a new page view, so every time the DOM has a new state .
  When one DOM property changes, all other DOM properties (if necessary) change sequentially.

Given these concepts, we can draw a rule (for attr vs prop uses) ":

• Use prop , you have a 90% chance that it works ... 99% if you use jQuery to change DOM states (and the standard DOM hypothesis).
• If you need to change or access the data-* attributes, use the .data() method.
• Otherwise (not the DOM, non-data or non-standard things) check if there is a case of using .attr() , and reserve some time to study it (see answers above).

Answer 2

.attr() not deprecated because it is useful for what it was created for, and is the only right way to do what it did (without using the getAttribute function), which does the same thing ... or by parsing HTML itself ) The only reason we have this discussion at all is because jQuery (and some older browsers (IE cough cough)) did not properly fit attributes and properties, and that the confusion is what they seem to have fixed in 1.9.

.attr() retrieves attributes, and .prop() retrieves properties. These two different things have always been official (although the DOM often has the property of matching the attribute). If you have <p whatever="value"> where whatever not an attribute that the browser recognizes, you should use .attr() to get the attribute value. .prop() won't even be able to see it in most browsers.

When you care about the resulting DOM object, use .prop() . When you need the actual HTML attribute, use .attr() . In fact, it is neither one nor the other; you can use both in the same code, and the universe will not explode even once (provided that you used them correctly). :) Just use the one that is suitable for the work that you are doing at that time, and stop trying " denounce "things that are not broken.

Answer 3

I took the liberty of preparing a violin for you:

http://jsfiddle.net/5REVP/

Especially this part:

 <div id="example" style="padding:10px"></div> console.log("style"); var styleAttr = $("#example").attr("style"); console.log(styleAttr); // You get "padding:10px" var styleProp = $("#example").prop("style"); console.log(styleProp); // You get a CSSStyleDeclaration object 

The style example clearly shows that the attribute does not match the property (check the console).

For ease of reading, support, and backward (as well as direct) compatibility, you should always use the correct methods for the given task, otherwise there is a possibility that the method may stop behaving the way you did, -.attr () method is an example of this.

.attr () is used to get the attributes of the elements, the attributes are the SGML term, which refers to the information contained within the element tags, you can easily read this information by checking the elements.

• If you get the "style" attribute of an element, you will not receive any information other than that specifically written in this attribute.
• If you set the checked attribute on the checkbox, you will either get checked or ".

.prop () is used to get the properties of the DOM elements.

• If you get the "style" property, you do not get what the designer wrote in the style attribute, you get all the actual css properties of the element.
• If you set the “checked” property of the checkbox, you will get true or false.

Answer 4

.attr () only accesses HTML attributes, while .prop () will retrieve properties not related to HTML elements. See Documentation:

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked and defaultSelected should be extracted and set using the .prop () method. Prior to jQuery 1.6, these properties were restored using the .attr () method, but this was not the volume of attr. They do not have corresponding attributes and only properties.

http://api.jquery.com/prop/