If I understand correctly, .prop reflects the current state of the DOM, .attr reflects the state when loaded or last updated with javascript.
If you have:
<input id="test" type="text" value="initial" />
On load, the page should show for $("#test")
.prop("value") = "initial",
.attr("value") = "initial"
Then, if you type in "current" into the 'test' input box, the page should show:
.prop("value") = "current",
.attr("value") = "initial"
without any other events taking place that would update the value.
If you have: <input id="test" type="text" value="initial" />
On load, the page should show for $("#test") .prop("value") = "initial", .attr("value") = "initial"
Then, if you type in "current" into the 'test' input box, the page should show: .prop("value") = "current", .attr("value") = "initial" without any other events taking place that would update the value.