What is the difference between prop and attr in jQuery?

In JQuery the operation on CheckBox is done in two phases, one before JQuery1.6 and one after 1.6

Before 1.6, we did this:

lt; i nput type ='checkbox' id='checkbox'/& lt; s cript& var isChecked = $('#checkbox').attr('checked'); $ ('#checkbox').attr('checked',true); l t; script/&

But careful classmates will find that after jQuery1.6 if you do it like above, it will definitely go wrong: $('#checkbox').attr('checked') The resulting values are not true and false but checked or undefined

So how does it work after 1.6?

jQuery made a more nuanced distinction between attributes and attributes in a later release. Features are things like checked selectedIndex tagName nodeName nodeType ownerDocument defaultChecked and defaultSelected and so on.

What's the difference between prop() and attr()?

Sharing data on build-in properties, attribute and property attribute changes have an impact on property and vice versa, but the custom properties of both are separate data, even if name is the same, and do not affect each other, which looks like the following diagram, but IE6、7 makes no distinction and still shares custom property data

Not all attribute are consistent with the corresponding property name, such as the class property of attribute just used, and this should be the case when using property operation className t.className='active2' ;

For property where the value is true/false similar to input checked attribute etc., attribute gets the value is the literal value of HTML document, property is the result of the calculation, property change does not affect the attribute literal, but attribute change always counts <input id="test3" type="checkbox"/> property

var t=document.getElementById('test3'); console.log(t.getAttribute('checked'));//null console.log(t.checked);//false

  t.setAttribute('checked','checked');
  console.log(t.getAttribute('checked'));//checked
  console.log(t.checked);//true


  t.checked=false;
  console.log(t.getAttribute('checked'));//checked
  console.log(t.checked);//false

For some path-related attributes, the values are not the same, but the same attribute acquisition is literal, property acquisition is the calculated full path <a id="test4" href="#">Click</a> js var

var t=document.getElementById('test4'); console.log(t.getAttribute('href'));//# console.log(t.href);//file:///C:Users/bsun/Desktop/ss/anonymous.html#

The above is about the difference between prop() and attr() in jQuery I hope to help you, interested students can look at the tutorial

jQuery tutorial: https://www.w3cschool.cn/jquery/

jQuery micro-class: https://www.w3cschool.cn/minicourse/play/jquerycourse