difference between prop 28 29 and attr 28 29

1<input id="check1" type="checkbox" checked="checked">
2<label for="check1">Check me</label>
3<p></p>
4
5$( "input" ).change(function() {
6  var $input = $( this );
7  //  alert($input.prop( "checked" ));
8  if($input.prop( "checked" )){
9  $( "p" ).html(
10    ".attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
11    ".prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
12    ".is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
13  }else{
14    $( "p" ).html("Not Checked");
15  }
16}).change();
17
18
19Output:
20if condition is  checked
21.attr( "checked" ): checked
22.prop( "checked" ): true
23.is( ":checked" ): true
24if condition is not checked
25Not Checked