???? ?? ?? ????? Select ????? ??? ????:

setSelects jquery 1.9.0? ??? ? Firefox?? ???? ????. ?? jQuery 1.8.3 ??? ???? ??? jQuery 1.9.0 ??? ??? ? ?? ????.

???? ??? ??? ?????. 1.9.0 ?????

<input type="checkbox" />
<script>
????$(function()?{
????????$('input').click(function()?{
????????????$(this).attr('checked');
????????});
????});
</script>

???? ?????. ??? ?? ???? ????.

??? 1.8.3 ????? ??? ???? ???? ????.

?? ?? attr() ??? ??? ??? ??? ?? ?? ???, ?? ??? ????? jQuery 1.6?? ??? ??? prop()? ??? ? ?? ???. , ??? ? ?? ??? ?? ????. ????? ?? ??? ??? ????? ???? ????? ? prop() ???? ???? ????

Before?jQuery?1.6,?the?.attr()?method?sometimes?took?property?values?into?account?when?retrieving?some?attributes,?which?could?cause?inconsistent?behavior.

jQuery 1.6 ???? attr()? ???? ??? ???? ??

? ??????. ?? ?? attr()? ???? ?? prop()? ??????

To?retrieve?and?change?DOM?properties?such?as?the?checked,?selected,?or?disabled?state?of?form?elements,?use?the?.prop()?method.

?? ?? ??? ???:

?? true? false? ?? ??? prop()? ???? ?? ??? attr()? ?????? ???? attr('checked')? ?????. ??? ??? ????? prop('checked')? ?????.

???, ?? ??? ???? ?? ? ????. ??? ???? attr()? ???? ? jQuery 1.8.3? 1.9.0 ??? ??? ?? ??? ??????

?? ??? ???? ?? ???, ?? ?? ??? ?? ??? ?? ????:

1.8.3 attr():

attr:?function(?elem,?name,?value,?pass?)?{????var?ret,?hooks,?notxml,
????????nType?=?elem.nodeType;????//?don't?get/set?attributes?on?text,?comment?and?attribute?nodes
????if?(?!elem?||?nType?===?3?||?nType?===?8?||?nType?===?2?)?{????????return;
????}????if?(?pass?&&?jQuery.isFunction(?jQuery.fn[?name?]?)?)?{????????return?jQuery(?elem?)[?name?](?value?);
????}????//?Fallback?to?prop?when?attributes?are?not?supported
????if?(?typeof?elem.getAttribute?===?"undefined"?)?{????????return?jQuery.prop(?elem,?name,?value?);
????}

????notxml?=?nType?!==?1?||?!jQuery.isXMLDoc(?elem?);????//?All?attributes?are?lowercase
????//?Grab?necessary?hook?if?one?is?defined
????if?(?notxml?)?{
????????name?=?name.toLowerCase();
????????hooks?=?jQuery.attrHooks[?name?]?||?(?rboolean.test(?name?)???boolHook?:?nodeHook?);
????}????if?(?value?!==?undefined?)?{????????if?(?value?===?null?)?{
????????????jQuery.removeAttr(?elem,?name?);????????????return;

????????}?else?if?(?hooks?&&?"set"?in?hooks?&&?notxml?&&?(ret?=?hooks.set(?elem,?value,?name?))?!==?undefined?)?{????????????return?ret;

????????}?else?{
????????????elem.setAttribute(?name,?value?+?""?);????????????return?value;
????????}

????}?else?if?(?hooks?&&?"get"?in?hooks?&&?notxml?&&?(ret?=?hooks.get(?elem,?name?))?!==?null?)?{????????return?ret;

????}?else?{

????????ret?=?elem.getAttribute(?name?);????????//?Non-existent?attributes?return?null,?we?normalize?to?undefined
????????return?ret?===?null??
????????????undefined?:
????????????ret;
????}
}

1.9.0 attr():

?attr:?function(?elem,?name,?value,?pass?)?{???
??var?ret,?hooks,?notxml,
????????nType?=?elem.nodeType;????
??//?don't?get/set?attributes?on?text,?comment?and?attribute?nodes
????if?(?!elem?||?nType?===?3?||?nType?===?8?||?nType?===?2?)?{????????
???????????return;
????}????
???if?(?pass?&&?jQuery.isFunction(?jQuery.fn[?name?]?)?)?{????????
????????return?jQuery(?elem?)[?name?](?value?);
????}????
????????//?Fallback?to?prop?when?attributes?are?not?supported
????if?(?typeof?elem.getAttribute?===?"undefined"?)?{???????
?????????return?jQuery.prop(?elem,?name,?value?);
????}

????notxml?=?nType?!==?1?||?!jQuery.isXMLDoc(?elem?);????
???//?All?attributes?are?lowercase
????//?Grab?necessary?hook?if?one?is?defined
????if?(?notxml?)?{
????????name?=?name.toLowerCase();
????????hooks?=?jQuery.attrHooks[?name?]?||?(?rboolean.test(?name?)???boolHook?:?nodeHook?);
????}????
???if?(?value?!==?undefined?)?{????????
???????if?(?value?===?null?)?{
????????????jQuery.removeAttr(?elem,?name?);????????????
????????????return;

????????}?else?if?(?hooks?&&?"set"?in?hooks?&&?notxml?&&?(ret?=?hooks.set(?elem,?value,?name?))?!==?undefined?)?{????????????
????????????return?ret;

????????}?else?{
????????????elem.setAttribute(?name,?value?+?""?);???????????
?????????????return?value;
????????}

????}?else?if?(?hooks?&&?"get"?in?hooks?&&?notxml?&&?(ret?=?hooks.get(?elem,?name?))?!==?null?)?{??????
???????????????return?ret;

????}?else?{

????????ret?=?elem.getAttribute(?name?);????????
??????//?Non-existent?attributes?return?null,?we?normalize?to?undefined
????????return?ret?===?null??
????????????undefined?:
????????????ret;
????}
}

prop of 1.8.3 1.9.0 ()? ?????:

prop:?function(?elem,?name,?value?)?{????
??var?ret,?hooks,?notxml,
???nType?=?elem.nodeType;????
???//?don't?get/set?properties?on?text,?comment?and?attribute?nodes
????if?(?!elem?||?nType?===?3?||?nType?===?8?||?nType?===?2?)?{????????
????return;
????}

????notxml?=?nType?!==?1?||?!jQuery.isXMLDoc(?elem?);????
????if?(?notxml?)?{????????
????//?Fix?name?and?attach?hooks
????????name?=?jQuery.propFix[?name?]?||?name;
????????hooks?=?jQuery.propHooks[?name?];
????}???
?????if?(?value?!==?undefined?)?{????????
?????????if?(?hooks?&&?"set"?in?hooks?&&?(ret?=?hooks.set(?elem,?value,?name?))?!==?undefined?)?{???????????
??????????return?ret;

????????}?else?{????????????
????????return?(?elem[?name?]?=?value?);
????????}

????}?else?{????????
???????if?(?hooks?&&?"get"?in?hooks?&&?(ret?=?hooks.get(?elem,?name?))?!==?null?)?{????????????
???????return?ret;

????????}?else?{????????????
????????return?elem[?name?];
????????}
????}
}

首先，我們看下?attr() 和 prop() 的區(qū)別：

attr() 里面，最關(guān)鍵的兩行代碼

elem.setAttribute(?name,?value?+?""?);?
ret?=??elem.getAttribute(?name?);

很明顯的看出來(lái)，使用的 DOM 的 API setAttribute() 和 getAttribute() 方法操作的屬性元素節(jié)點(diǎn)。

prop() 里面，最關(guān)鍵的兩行代碼

return?(?elem[?name?]?=?value?);return?elem[?name?];

可以理解為 document.getElementById(el)[name] = value，這是轉(zhuǎn)化成 element 的一個(gè)屬性。

對(duì)比調(diào)試?1.9.0 和 1.8.3 的 attr() 方法，發(fā)現(xiàn)兩者的區(qū)別在于

hooks.get(?elem,?name?))

返回的值不一樣，具體的實(shí)現(xiàn)：

1.8.3 中

boolHook?=?{
????get:?function(?elem,?name?)?{????????
????//?Align?boolean?attributes?with?corresponding?properties
????????//?Fall?back?to?attribute?presence?where?some?booleans?are?not?supported
????????var?attrNode,
????????????property?=?jQuery.prop(?elem,?name?);????????
????????????return?property?===?true?||?typeof?property?!==?"boolean"?&&?(?attrNode?=?elem.getAttributeNode(name)?)?&&?attrNode.nodeValue?!==?false??
????????????name.toLowerCase()?:???????????
?????????????undefined;
????}
}

1.9.0 中

boolHook?=?{????get:?function(?elem,?name?)?{???????
?var
????????????//?Use?.prop?to?determine?if?this?attribute?is?understood?as?boolean
????????????prop?=?jQuery.prop(?elem,?name?),??????????
??????????????//?Fetch?it?accordingly
????????????attr?=?typeof?prop?===?"boolean"?&&?elem.getAttribute(?name?),
????????????detail?=?typeof?prop?===?"boolean"??

????????????????getSetInput?&&?getSetAttribute??
????????????????????attr?!=?null?:???????????????????
?????????????????????//?oldIE?fabricates?an?empty?string?for?missing?boolean?attributes
????????????????????//?and?conflates?checked/selected?into?attroperties
????????????????????ruseDefault.test(?name?)??
????????????????????????elem[?jQuery.camelCase(?"default-"?+?name?)?]?:
????????????????????????!!attr?:???????????????
?????????????????????????//?fetch?an?attribute?node?for?properties?not?recognized?as?boolean
????????????????elem.getAttributeNode(?name?);???????
?????????????????return?detail?&&?detail.value?!==?false??
????????????name.toLowerCase()?:
????????????undefined;
????}
}

由此可見，1.9.0 開始不建議使用 attr() 來(lái)對(duì)具有 true 和 false 兩個(gè)屬性的屬性進(jìn)行操作了。

那么我們的結(jié)論是：

具有 true 和 false 兩個(gè)屬性的屬性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()，具體見下表：

? ??? jquery?? ?? attr()? ???? ?? prop()? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!