HTML Prop 与 Attr的区别

引言：    昨天在用bootstrap的模态框的时候，因为我需要在不同的列表中打开同一个模态框（内含一个form表单），所以需要根据列表中的内容去渲染不同的模态框，其中form表单中的有一个checkbox复选框，其中的值需要根据对应列表的值去重新渲染，我想到的做法就是通过jquery的attr方法，刚进入模态框的时候先清空checkbox复选框checked属性，然后在通过attr重现设置响应的选项checked属性为checked或者true。然后却不生效。这里就需要说一下html中prop和Attr的区别了

两者的区别在于对于自定义属性和选中属性的处理。
分别来说一下两者的区别：
一、对于自定义属性的处理
prop针对的是节点特有的属性，而arrt不单针对节点特有属性，同时可以对获取和设置自定义属性。所以涉及到自定义属性的设置和获取只能用attr。针对节点自定义属性的设置和获取推荐用prop。
例如：

    html:    <a id = "test" href = "url" action = "get"></a>    js:    var url = $("#test").prop("href")  //正确    var action = $("#test").attr("action") //正确    var action1 = $("#test").prop("action") //错误

二、对于checked、selected的处理
attr 只能获取初始值， 无论是否变化
prop 能够访问、设置变化后的值，并且以true|false的布尔型返回。
这也就是为什么我会遇到设置checkbox的时候不生效的原因了，用
attr去设置checked属性不适用运用在checked变化的情景，这时候就只能用prop就设置了

 $('input[type=checkbox]').each(function(){            if(type.indexOf(this.value) !=-1){                $(this).prop('checked',true);            }        })

注意：
用原生js也是同样的道理，涉及到原生属性的时候采用getProperty/setProperty/removeProperty
涉及到自定义属性采用getAttribute/setAttribute/removeAttribute
这只是一般建议，但是因为浏览器兼容性问题（高级浏览器（支持w3c）采用removeProperty，ie浏览器采用removeAttribute），所以设计到兼容性问题还是需要考虑一下的
总结：
当涉及到原生属性（包括selected、checked属性）采用prop，当涉及到自定义属性采用attr