Hello Readers,

.attr() and .prop() in jquery:

1. Both .attr() and .prop() are jquery methods.

2. jquery.attr() is used to get the value of an attribute for the set of matched elements while jquery .prop() is used to get the value of a property for the set of matched elemnts.

3. .attr() gives the value of the element on page load and it is define in the html while the .prop() method get the current or updated values of elements which is modified via jquery or javascript.

   4. .prop() is faster than .attr() in jquery is approx 2.5 times faster.
   5. .attr() always returns string while .prop() method returns string,integer,boolean.
   6. .prop('value') method is equivalent to .val() method in jquery because both gives the current value result while .attr() work only on page load.
   7. .attr() method in jquery carry some additional information about the HTML element and used as name = 'value' pairs while .prop() method is a representation of an attribute in the HTML DOM tree.
   8. .prop() is a new method as compared to .attr() method and .prop() is introduced in jquery 1.6.
   9. .attr() method shorten as (attributes -> HTML) while .prop() method shorten as (properties -> DOM).
   10. Code Examples of .attr() and .prop() method:

   Code Example using style :

<input style="font:arial;"/>

.attr('style')- returns inline styles for the matched element ("font:arial;")

.prop('style') - returns an style declaration object (CSSStyleDeclaration)

Code Example using value :

<input value="hello" type="text"/> 

$('input').prop('value', 'prop changed the value');

.attr('value') - returns 'hello'

.prop('value') - returns 'prop changed the value'

11. Below is the another Example which is used both the methods:

$('button').on('click', function() {
  $('#attr').attr('checked', 'checked')
  $('#prop').prop('checked', true)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>attr <input id="attr" type="checkbox"></label>
<label>prop <input id="prop" type="checkbox"></label>
<button type="button">checked attr and prop.</button>

In the above code, when we click the button both checkboxes got checked. After that if we uncheck both the checkboxes and click button again then only prop checkbox got checked because its property set true and its work on current elements only.