jquery prop 和 attr 区别

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>TODO write content</div>
        <input type="checkbox" id="test1"/>
        <input type="checkbox" checked="" id="test2"/>
        <input type="checkbox" checked="checked" id="test3"/>
        <script src="jquery-3.1.1.js"></script>
        <script>
            elem  = document.getElementById("test3");
            console.log(elem.checked)    //true (Boolean) 将随着复选框状态的改变而改变
            console.log($(elem).prop("checked"))    //true (Boolean) 将随着复选框状态的改变而改变
            console.log(elem.getAttribute("checked"))    //"checked" (String) 复选框的初始状态;不会改变
            console.log($(elem).attr("checked"))        //(1.6)    "checked" (String) 复选框的初始状态;不会改变
            
            $("#test3").click(function(){
                console.log(this.checked);
                console.log($(this).prop("checked"));
                console.log(this.getAttribute("checked"));
                console.log($(this).attr("checked"));
            });
        </script>
    </body>
</html>