jQuery源码分析-09属性操作
属性操作主要介绍prop、attr、val三个接口的实现，相对于其他的接口，这三个的源码实现复杂，更容易让人混淆，一不小心就回使用错误的接口或返回错误的值，因此重点分析。
9.1 .prop() vs .attr()
9.1.1 概述
1.6.1相对1.5.x最大的改进，莫过于对属性.attr()的重写了。在1.6.1中，将.attr()一分为二：.attr()、.prop()，这是一个令人困惑的变更，也是一个破坏性的升级，会直接影响到无数的网站和项目升级到1.6。
简单的说，.attr()是通过setAttribute、getAttribute实现，.prop()则通过Element[ name ]实现：
jQuery.attr
setAttribute, getAttribute
jQuery.removeAttr
removeAttribute, removeAttributeNode(getAttributeNode )
jQuery.prop
Element[ name ]
jQuery.removeProp
delete Element[ name ]
事实上.attr()和.prop()的不同，是HTML属性（HTML attributes）和DOM属性（DOM properties）的不同。HTML属性解析的是HTML代码中的存在的属性，返回的总是字符串，而DOM属性解析的是DOM对象的属性，可能是字符串，也可能是一个对象，可能与HTML属性相同，也可能不同。
9.1.2 测试
看个例子，让我们对HTML属性和DOM属性的区别有个直观的概念：
HTML代码：
<a href="abc.html" class="csstest" style="font-size: 30px;">link</a>
<input type="text" value="123">
<input type="checkbox" checked="checked">
JavaScript代码：
console.info( $('#a').attr('href') ); // abc.html
console.info( $('#a').prop('href') ); // file:///H:/open/ws-nuysoft/com.jquery/jquery/abc.html
console.info( $('#a').attr('class') ); // csstest
console.info( $('#a').prop('class') ); // csstest
console.info( document.getElementById('a').getAttribute('class') ); // csstest
console.info( document.getElementById('a').className ); // csstest
console.info( $('#a').attr('style') ); // font-size: 30px;
console.info( $('#a').prop('style') ); // CSSStyleDeclaration { 0="font-size", fontSize="30px", ...}
console.info( document.getElementById('a').getAttribute('style') ); // font-size: 30px;
console.info( document.getElementById('a').style ); // CSSStyleDeclaration { 0="font-size", fontSize="30px", ...}
console.info( $('#text').attr('value') ); // 123
console.info( $('#text').prop('value') ); // 123
console.info( $('#checkbox').attr('checked') ); // checked
console.info( $('#checkbox').prop('checked') ); // true
可以看到HTML属性和DOM属性在属性名、属性值上都诸多不同。
9.1.3 区别
不同之处总结如下：
属性名可能不同，尽管大部分的属性名还是相似或一致的
HTML属性值总是返回字符串，DOM属性值则可能是整型、字符串、对象，可以获取更多的内容
DOM属性总是返回当前的状态（值），而HTML属性（在大多数浏览）返回的初始化时的状态（值）
DOM属性只能返回固定属性名的值，而HTML属性则可以返回在HTML代码中自定义的属性名的值
相对于HTML属性的浏览器兼容问题，DOM属性名和属性值在浏览器之间的差异更小，并且DOM属性也有标准可依
9.1.4 建议
下边让我们回到.attr()和.prop()，经过以上测试和分析，可以得出对.attr()和.prop()的使用建议如下
优先使用.prop()，因为.prop()总是返回最新的状态（值）
只有涉及到自定义HTML属性时使用.attr()，或者可以说，忘掉.attr()吧
9.1.5 源码
jQuery.attr
// 设置或获取HTML属性
// http://stackoverflow.com/questions/5874652/prop-vs-attr
attr: function( elem, name, value, pass ) {
var nType = elem.nodeType;
// don't get/set attributes on text, comment and attribute nodes
// 忽略文本、注释、属性节点
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
return undefined;
}
// 遇到与方法同名的属性，则执行方法
// 如果遇到的是扩展或需要修正的属性，则执行相应的方法
if ( pass && name in jQuery.attrFn ) {
return jQuery( elem )[ name ]( value );
}
// Fallback to prop when attributes are not supported
// 如果不支持getAttribute，则调用jQuery.prop
// 求助于prop？prop是从attr中分化出来的，居然要求助于prop，看来attr要被放弃了
if ( !("getAttribute" in elem) ) {
return jQuery.prop( elem, name, value );
}
var ret, hooks,
notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
// Normalize the name if needed
// 格式化name（修正tabindex > tabIndex）
name = notxml && jQuery.attrFix[ name ] || name;
// 属性钩子：type tabIndex
hooks
补充：web前端 , JavaScript ,
