.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 :

javascript code 
<input id=“wiki" type=“wiki" value=“wiki">
[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

javascript code 
<input style="font:arial;"/>
.attr('style') – It returns inline styles for the matched element i.e. "font:arial;"
.prop('style') – It returns an style declaration object i.e. CSSStyleDeclaration

value

javascript code 
<input value="wikitechy" type="text"/>   
$('input').prop('value', 'i changed the value');

.attr('value') -- returns 'wikitechy' *
.prop('value') -- returns 'i changed the value'
[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.
[ad type=”banner”]
  • 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 :
javascript code 
<input id="cb" type="checkbox" checked>
<input id="cb" type="checkbox" checked="checked">

So, how to find out if the checkbox is checked with jQuery:

javascript code 
if ( $("#cb").attr("checked") === true ) {...}
if ( $("#cb").attr("checked") == "checked" ) {...}
if ( $("#cb").is(":checked") ) {...}
  • This is actually the simplest thing in the world to do with the checked Boolean property.
javascript code 
if (document.getElementById("cb").checked) {...}
  • The property also makes checking or unchecking the checkbox trivial:
javascript code 
document.getElementById("cb").checked = false
  • In jQuery 1.6,
javascript code 
$("#cb").prop("checked", false)
[ad type=”banner”]

The idea of using the checked attribute for scripting a checkbox is unnecessary.

  1. It’s not obvious what the correct way to check or uncheck the checkbox is using the checked attribute
  2. 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.

Categorized in:

JAVASCRIPTJQUERY

Tagged in:

, , , , , , , , , , , , , , , , , ,