真偽値
<input id="hoge" type="checkbox" checked="checked" />
console.log('prop:' + $('#hoge').prop('checked')); //true
console.log('attr:' + $('#hoge').attr('checked')); //"checked"
- disabledやreadonly等も同様
パス（URL）関係
<a id="a" href="./sample.html" />
console.log('prop:' + $('#a').prop('href')); //絶対パス/sample.html
console.log('attr:' + $('#a').attr('href')); //./sample.html
- imgのsrcやformのaction等も同様
省略してもブラウザが何とかしてくれるもの
<input id="input2" />
<!-- typeを省略した場合はtype="text"として扱われる -->
console.log('prop:' + $('#input2').prop('type')); //"text"
console.log('attr:' + $('#input2').attr('type')); //undefined
ブラウザが非対応のもの
<input id="input3" placeholder="sample" />
//inputのplaceholderに対応していないブラウザの場合
console.log('prop:' + $('#input3').prop('placeholder')); //undefined
console.log('attr:' + $('#input3').attr('placeholder')); //"sample"
//対応している場合はどちらも「sample」になります。
- これを応用すればユーザーエージェントで識別しなくてもHTML5に対応しているかどうかを判断できます。
console.log("placeholder" in document.createElement('input'));
//対応しているブラウザの場合true