jQuery 1.6 .attr() és .prop() használata
A jQuery 1.6 verziójától kezdve az .attr() metódus mellé bevezettek egy .prop() névre hallgató metódust is a sebesség növelés miatt. Ez viszont azt eredményezi, hogy 1.5-ről 1.6-ra átállás, nem lesz felhőtlen.
jQuery 1.6-ra való áttérés nem biztos, hogy mindenkinek kellemes lesz, mivel bevezették a .prop() metódust, ami részben kiváltja az .attr()-t és ezt bizony módosítani kell a kódjainkba.
De lássuk csak, az .attr() metódussal eddig lekérhettük/módosíthattuk egy elem attribútumát, mint például egy checkbox elem checked tulajdonságát. El is érkeztünk a kulcsszóhoz, tulajdonság. Az 1.6 verziótól ezután, ami attribútum azt az .attr() metódussal, ami tulajdonság (properties) azt pedig a .prop() metódussal kezeljük.
Lényeg, hogy az olyan tulajdonságokat, mint a checked, selected, disabled... kezelését ezekután a .prop() metódussal kell csinálni. Ami nagyban segíti a programozói munkát hiszen ezentúl a .prop() használata során csak true/false értékekkel kell dolgozni, nincs szükség lekezelni a "checked" eredményt...
Figyelem! Az .attr() metódus 1.6-tól felfelé nem megbízhatóan ad vissza tulajdonság értékeket (mint pl.: checked, selected esetén a visszatérő érték undefined)!
Van azonban egy kis apropó, amiért a cikk is írodott, általában, a DOM attribútumok mutatják a DOM-ból lekért információkat, mint például a value attribútum a htmlben, <input type="text" value="abc">. DOM tulajdonság mutatja a dinamikus állapotát a dokumentumnak. Például, ha a felhasználó kattint az inputon és beleírja az abc után a def-t, akkor a .prop("value") jól vissza adja az időközben megváltozott value-t (abcdef), míg az .attr() csak az eredeti attribútumot adja vissza, vagyis abc-t.
Ezért figyeljünk ezek után, hogy a futásidőben megváltozott attribútumokat is .prop() (vagy .val() ) metódussal kérjük le!
Egy rövid összegzés .attr() és .prop() használatról:
| Attribútum/Tulajdonság | .attr() | .prop() |
| accesskey | X | |
| align | X | |
| async | X | |
| autofocus | X | |
| checked | X | |
| class | X | |
| contenteditable | X | |
| draggable | X | |
| href | X | |
| id | X | |
| label | X | |
| location | X | |
| multiple | X | |
| readOnly | X | |
| rel | X | |
| selected | X | |
| src | X | |
| tabindex | X | |
| title | X | |
| type | X | |
| width | X |
A téma további boncolgatásai:
