jQuery的attr()和prop()的比较

.attr()和.prop()的不同，是HTML属性（HTML attributes）和DOM属性（DOM properties）的不同。HTML属性解析的是HTML代码中的存在的属性，返回的总是字符串，而DOM属性解析的是DOM对象的属性，可能是字符串，也可能是一个对象，可能与HTML属性相同，也可能不同。

<a href="abc.html" class="csstest" style="font-size: 30px;">link</a>

<input type="text" value="123">

<input type="checkbox" checked="checked">

console.info( $('#a').attr('href') ); // abc.html

console.info( $('#a').prop('href') ); // file:///D: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 属性在属性名、属性值上都诸多不同。

参考文章：http://nuysoft.iteye.com/blog/1172122