.attr()
Get the value of an attribute for the first element in the set of matched elements.
.prop()
Get the value of a property for the first element in the set of matched elements.
What is Attributes?
- Attributes carry additional information about an HTML element and come in name=”value” pairs. we can set an attribute for HTML element.
Example :
[pastacode lang=”javascript” manual=”%3Cinput%20id%3D%E2%80%9Cwiki%22%20type%3D%E2%80%9Cwiki%22%20value%3D%E2%80%9Cwiki%22%3E%0A%0A” message=”javascript code” highlight=”” provider=”manual”/] [ad type=”banner”]- here, “type”,”value”, “id” are attributes of the input elements.
What is Property?
- Property is a representation of an attribute in the HTML DOM.
- once the browser parse our HTML code ,corresponding DOM node will be created which is an object thus having properties.
- since, attr() gives the value of element as it was defines in the html on page load.
- It is always recommended to use prop() to get values of elements which is modified through javascript/jquery , as it gives the original value of an element’s current state.
.attr vs .prop:
style
[pastacode lang=”javascript” manual=”%3Cinput%20style%3D%22font%3Aarial%3B%22%2F%3E%0A.attr(‘style’)%20%E2%80%93%20It%20returns%20inline%20styles%20for%20the%20matched%20element%20i.e.%20%22font%3Aarial%3B%22%0A.prop(‘style’)%20%E2%80%93%20It%20returns%20an%20style%20declaration%20object%20i.e.%20CSSStyleDeclaration%0A” message=”javascript code” highlight=”” provider=”manual”/]value
[pastacode lang=”javascript” manual=”%3Cinput%20value%3D%22wikitechy%22%20type%3D%22text%22%2F%3E%20%20%20%0A%24(‘input’).prop(‘value’%2C%20’i%20changed%20the%20value’)%3B%0A%0A.attr(‘value’)%20–%20returns%20’wikitechy’%20*%0A.prop(‘value’)%20–%20returns%20’i%20changed%20the%20value’%0A” message=”javascript code” highlight=”” provider=”manual”/] [ad type=”banner”]Note:
jQuery for this reason has a .val() method, which internally is equivalent to .prop(‘value’)
What is the difference between .prop() and .attr():
| .prop() | .attr() |
| A property is the current state of the input element | An attribute is the default value. |
| jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() only retrieves attributes. | jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. |
| properties are in HTML DOM tree (== basically an actual property of some object in JS). | attributes are in HTML text document/file (== imagine this is the result of our html markup parsed), |
| .prop() | .attr() |
| .prop() changes properties for that HTML tag as per the DOM tree. | .attr() changes attributes for that HTML tag. |
| .prop() can return any type – string, integer, Boolean. | .attr() always returns a string |
| When we are checking Image src property. If the src is empty, prop return the current url of the page. | When we are checking Image src property. If the src is empty, attr return empty string. |
| .prop() was added later to be more semantic and it works better with value-less attributes like ‘checked’ and ‘selected’. | .attr() is used to get attributes from the HTML tags, and while it is perfectly functional. |
| .prop() | .attr() |
| Get the value of a property for the first element in the set of matched elements.
To gives the updated values of elements which is modified via javascript / jquery |
Get the value of an attribute for the first element in the set of matched elements.
To gives the value of element as it was defines in the html on page load |
| Getting a custom HTML attribute (since it’s not synced with a DOM property). | Getting a HTML attribute that doesn’t sync with a DOM property, e.g. get the “original value” of a standard HTML attribute, like <input value=“wiki”>. |
| Purpose: Gives access to properties that belong to element nodes. These properties are similar to attributes, but are only accessible through JavaScript. | Purpose: Allows markup to have data associated with it for events, rendering, and other purposes. |
- Generally, we need prop() rather than attr().
- Replacing calls to attr() with prop() in our code will generally work.
- Properties are generally simpler to deal with than attributes.
- An attribute value may only be a string whereas a property can be of any type.
- For example, the checked property is a Boolean, the style property is an object with individual properties for each style, the size property is a number.
- Both a property and an attribute with the same name exists, usually updating one will update the other, but this is not the case for certain attributes of inputs, such as value and checked: for these attributes, the property always represents the current state while the attribute (except in old versions of IE) corresponds to the default value of the input (reflected in the default Value / default Checked property).
- As an example of how properties are simpler to deal with than attributes, consider a checkbox that is initially checked. Here are two possible valid HTML :
So, how to find out if the checkbox is checked with jQuery:
[pastacode lang=”javascript” manual=”if%20(%20%24(%22%23cb%22).attr(%22checked%22)%20%3D%3D%3D%20true%20)%20%7B…%7D%0Aif%20(%20%24(%22%23cb%22).attr(%22checked%22)%20%3D%3D%20%22checked%22%20)%20%7B…%7D%0Aif%20(%20%24(%22%23cb%22).is(%22%3Achecked%22)%20)%20%7B…%7D%0A” message=”javascript code” highlight=”” provider=”manual”/]- This is actually the simplest thing in the world to do with the checked Boolean property.
- The property also makes checking or unchecking the checkbox trivial:
- In jQuery 1.6,
The idea of using the checked attribute for scripting a checkbox is unnecessary.
- It’s not obvious what the correct way to check or uncheck the checkbox is using the checked attribute
- The attribute value reflects the default rather than the current visible state (except in some older versions of IE, thus making things still harder). The attribute defines whether the checkbox on the page is checked.
nice