.prop () එදිරිව .attr ()

එබැවින් jQuery 1.6 හි නව ශ්‍රිතය prop()ඇත.

$(selector).click(function(){
    //instead of:
    this.getAttribute('style');
    //do i use:
    $(this).prop('style');
    //or:
    $(this).attr('style');
})

නැත්නම් මේ අවස්ථාවේ දී ඔවුන් කරන්නේ එකම දේද?

මම නම් කරන්න භාවිතා මාරු වීමට ඇති prop()සියලු පැරණි attr()ඇමතුම් i 1.6 මාරු නම් කඩා බිඳ දමනු ඇත?

යාවත්කාලීන කරන්න

selector = '#id'

$(selector).click(function() {
    //instead of:
    var getAtt = this.getAttribute('style');
    //do i use:
    var thisProp = $(this).prop('style');
    //or:
    var thisAttr = $(this).attr('style');

    console.log(getAtt, thisProp, thisAttr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id='id' style="color: red;background: orange;">test</div>

(මෙම ප්‍රබන්ධයද බලන්න: http://jsfiddle.net/maniator/JpUF2/ )

කොන්සෝලය getAttributeනූලක් ලෙසත්, නූලක් ලෙසත් ලොග් වේ attr, නමුත් propa ලෙස CSSStyleDeclaration, ඇයි? අනාගතයේදී එය මගේ කේතීකරණයට බලපාන්නේ කෙසේද?

යාවත්කාලීන කිරීම 2012 නොවැම්බර් 1

මගේ මුල් පිළිතුර විශේෂයෙන් jQuery 1.6 ට අදාළ වේ. මගේ උපදෙස් එලෙසම පවතින නමුත් jQuery 1.6.1 දේවල් තරමක් වෙනස් කර ඇත: බිඳුණු වෙබ් අඩවි වල පුරෝකථනය කර ඇති ගොඩවල් හමුවේ, jQuery කණ්ඩායම බූලියන් ගුණාංග සඳහා එහි පැරණි හැසිරීමට ආසන්න (නමුත් හරියටම සමාන නොවේ) වෙත ආපසු හැරී ගියේයattr() . ජෝන් රෙසිග් ද ඒ ගැන බ්ලොග් කළේය . ඔවුන් මුහුණ දුන් දුෂ්කරතාවය මට පෙනේ, නමුත් ඔහු කැමති වීමට ඔහු කළ නිර්දේශයට තවමත් එකඟ නොවේ attr().

මුල් පිළිතුර

ඔබ කවදා හෝ භාවිතා කර ඇත්තේ jQuery මිස සෘජුවම DOM නොවේ නම්, මෙය ව්‍යාකූල වෙනසක් විය හැකිය, එය අනිවාර්යයෙන්ම සංකල්පමය වශයෙන් වැඩිදියුණු කිරීමකි. මෙම වෙනසෙහි ප්‍රති break ලයක් ලෙස කැඩී බිඳී යන jQuery භාවිතා කරන අඩවි බිලියන ගණනකට එතරම් හොඳ නැත.

මම ප්රධාන ගැටළු සාරාංශ කරමි:

• ඔබට සාමාන්‍යයෙන් අවශ්‍ය වන්නේ prop()වඩා attr().
• බොහෝ අවස්ථාවන්හීදී, කළ prop()දේ attr()කරයි. ඇමතුම් වෙනුවට attr()සමග prop()ඔබගේ කේතය දී සාමාන්යයෙන් වැඩ කරනු ඇත.
• ගුණාංග සාමාන්‍යයෙන් ගුණාංගවලට වඩා සරල ය. ගුණාංගයේ අගය නූලක් පමණක් විය හැකි අතර දේපලක් ඕනෑම වර්ගයක විය හැකිය. උදාහරණයක් ලෙස, checkedදේපල බූලියන් වේ, styleදේපල යනු එක් එක් ශෛලිය සඳහා තනි දේපල සහිත වස්තුවකි, sizeදේපල අංකයකි.
• එකම නමක් සහිත දේපලක් සහ ගුණාංගයක් පවතින විට, සාමාන්‍යයෙන් එකක් යාවත්කාලීන කිරීම අනෙක යාවත්කාලීන කරයි, නමුත් ආදාන වල ඇතැම් ගුණාංග සඳහා මෙය එසේ නොවේ : valueසහ checked: මෙම ගුණාංග සඳහා, දේපල සැමවිටම වත්මන් තත්වය නියෝජනය කරන අතර ආරෝපණය (IE හි පැරණි අනුවාදයන් හැර) ආදානයේ පෙරනිමි අගය / පරික්ෂා කිරීම අනුරූප වේ ( defaultValue/defaultChecked දේපලෙහි .
• මෙම වෙනස මගින් ගුණාංග සහ ගුණාංග ඉදිරියේ සිරවී ඇති මැජික් jQuery ස්තරය ඉවත් කරයි, එනම් jQuery සංවර්ධකයින්ට ගුණාංග සහ ගුණාංග අතර වෙනස ගැන ටිකක් ඉගෙන ගත යුතුය. මේක හොඳ දෙයක්.

ඔබ jQuery සංවර්ධකයෙකු නම් සහ දේපල සහ ගුණාංග පිළිබඳව මෙම සමස්ත ව්‍යාපාරයම ව්‍යාකූල වී ඇත්නම්, ඔබ පියවරක් පසුපසට ගොස් ඒ ගැන මඳක් ඉගෙන ගත යුතුය, මන්ද jQuery තවදුරටත් මෙම දේවලින් ඔබව ආරක්ෂා කිරීමට එතරම් උත්සාහ නොකරන බැවිනි. මෙම විෂය පිළිබඳ බලයලත් නමුත් තරමක් වියළි වචනය සඳහා, පිරිවිතර ඇත: DOM4 , HTML DOM , DOM Level 2 , DOM Level 3 . මොසිල්ලා හි DOM ප්‍රලේඛනය බොහෝ නවීන බ්‍රව්සර් සඳහා වලංගු වන අතර පිරිවිතරයන්ට වඩා කියවීමට පහසුය, එබැවින් ඔබට ඔවුන්ගේ DOM යොමු කිරීම ප්‍රයෝජනවත් වේ. එය තියෙනවා අංගයක් ගුණ පිළිබඳ කොටස .

ගුණාංගවලට වඩා දේපල සමඟ කටයුතු කිරීම සරල වන ආකාරය පිළිබඳ උදාහරණයක් ලෙස, මුලින් පරීක්ෂා කළ පිරික්සුම් කොටුවක් සලකා බලන්න. මෙය සිදු කිරීම සඳහා වලංගු HTML කෑලි දෙකක් මෙන්න:

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

ඉතින්, jQuery සමඟ පිරික්සුම් කොටුව සලකුණු කර ඇත්දැයි ඔබ සොයා ගන්නේ කෙසේද? තොග පිටාර ගැලීම දෙස බලන්න, ඔබ සාමාන්‍යයෙන් පහත යෝජනා සොයා ගනු ඇත:

• if ( $("#cb").attr("checked") === true ) {...}
• if ( $("#cb").attr("checked") == "checked" ) {...}
• if ( $("#cb").is(":checked") ) {...}

checked1995 සිට සෑම ප්‍රධාන ස්ක්‍රිප්ට් බ්‍රව්සරයකම පවතින හා දෝෂ රහිතව ක්‍රියා කර ඇති බූලියන් දේපල සමඟ කළ හැකි සරලම දේ මෙයයි :

if (document.getElementById("cb").checked) {...}

දේපල මඟින් පිරික්සුම් කොටුව පරීක්ෂා කිරීම හෝ පරීක්ෂා කිරීම සුළුපටු නොවේ:

document.getElementById("cb").checked = false

JQuery 1.6 හි මෙය නිසැකවම බවට පත්වේ

$("#cb").prop("checked", false)

checkedපිරික්සුම් කොටුවක් ස්ක්‍රිප්ට් කිරීම සඳහා ගුණාංගය භාවිතා කිරීමේ අදහස උදව්වක් සහ අනවශ්‍යය. දේපළ යනු ඔබට අවශ්‍ය දෙයයි.

• පිරික්සුම් කොටුව භාවිතා කිරීමට හෝ පරීක්ෂා කිරීමට නිවැරදි ක්‍රමය කුමක්ද යන්න පැහැදිලි නැත checked 'විශේෂණය
• ආරෝපණ අගය වර්තමාන දෘශ්‍ය තත්වයට වඩා පෙරනිමිය පිළිබිඹු කරයි (IE හි සමහර පැරණි අනුවාදයන් හැර, එමඟින් දේවල් වඩාත් අපහසු වේ). පිටුවේ ඇති පිරික්සුම් කොටුව සලකුණු කර තිබේද යන්න ගැන ගුණාංගය ඔබට කිසිවක් නොකියයි. Http://jsfiddle.net/VktA6/49/ බලන්න .

මම හිතන්නේ ටිම් ඒක හොඳට කිව්වා , නමුත් අපි ආපසු යමු:

DOM මූලද්‍රව්‍යයක් යනු වස්තුවකි, මතකයේ ඇති දෙයක්. OOP හි බොහෝ වස්තූන් මෙන්, එයට ගුණාංග ඇත. මූලද්‍රව්‍යයේ අර්ථ දක්වා ඇති ගුණාංගවල සිතියමක් ද එහි ඇත (සාමාන්‍යයෙන් මූලද්‍රව්‍යය නිර්මාණය කිරීම සඳහා බ්‍රව්සරය කියවූ සලකුණු වලින් පැමිණේ). එම මූලද්රව්යය ගේ සමහර ගුණ ඔවුන්ගේ ලබා මූලික අගයන් ගුණාංග සමාන නම් සහිත ( valueඇති "අගය" අංග එහි මූලික අගය ලැබෙන, hrefඇති "තියෙන <a>" අංග එහි මූලික අගය ලැබෙන, නමුත් එය හරියටම එම අගය නොවේ;className සිට "පන්ති" ගුණාංගය). වෙනත් දේපලවල ආරම්භක අගයන් වෙනත් ආකාරවලින් ලබා ගනී: නිදසුනක් ලෙස, parentNodeදේපලෙහි වටිනාකම ලැබෙන්නේ එහි මව් මූලද්‍රව්‍යය මත පදනම්ව ය;style දේපල, එයට “ශෛලීය” ලක්ෂණයක් තිබේද නැද්ද යන්න.

පිටුවක මෙම නැංගුරම සලකා බලමු http://example.com/testing.html:

<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>

සමහර අනවශ්‍ය ASCII කලාව (සහ බොහෝ දේ අතහැර දමයි):

+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
| HTMLAnchorElement |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
| href: "http://example.com/foo.html" |
| නම: "fooAnchor" |
| id: "fooAnchor" |
| className: "එකක් පරීක්ෂා කරන්න" |
| ගුණාංග: |
| href: "foo.html" |
| නම: "fooAnchor" |
| id: "fooAnchor" |
| පන්තිය: "එකක් පරීක්ෂා කරන්න" |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

ගුණාංග සහ ගුණාංග එකිනෙකට වෙනස් බව සලකන්න.

දැන්, ඒවා එකිනෙකට වෙනස් වුවත්, මේ සියල්ල පරිණාමය වී ඇත්තේ බිම් මට්ටමේ සිට නිර්මාණය කර ඇති නිසා නොව, ඔබ ඒවා සැකසුවේ නම් ඒවායින් ලබාගත් ගුණාංගයට ගුණාංග ගණනාවක් නැවත ලියයි. නමුත් සියල්ලම එසේ නොවන අතර, ඔබට hrefඉහළින් පෙනෙන පරිදි, සිතියම්ගත කිරීම සැමවිටම "අගය පසුකර යන්න" නොවේ, සමහර විට අර්ථ නිරූපණයන් ද ඇත.

දේපල වස්තුවක ගුණාංග වීම ගැන කතා කරන විට, මම කතා කරන්නේ වියුක්තව නොවේ. JQuery නොවන කේත කිහිපයක් මෙන්න:

var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"

(එම අගයන් බොහෝ බ්‍රව්සර් වලට අනුව ය; යම් වෙනසක් ඇත.)

මෙම linkවස්තුව සැබෑ දෙයක් වන අතර, ඔබ ප්රවේශ අතර සැබෑ වෙනසක් තියෙනවා දකින්න පුළුවන් දේපල ඒ, ඒ හා ප්රවේශ විශේෂණය .

ටිම් පැවසූ පරිදි, බොහෝ විට, අපට අවශ්‍ය වන්නේ දේපල සමඟ වැඩ කිරීමයි. අර්ධ වශයෙන් එසේ වන්නේ ඒවායේ අගයන් (ඔවුන්ගේ නම් පවා) බ්‍රව්සර් හරහා වඩාත් අනුකූල වන බැවිනි. අපට වැඩිපුරම අවශ්‍ය වන්නේ ගුණාංග හා සම්බන්ධ දේපලක් නොමැති විට (අභිරුචි ගුණාංග) හෝ එම විශේෂිත ගුණාංගය සඳහා, ගුණාංගය සහ දේපල 1: 1 නොවන බව අප දන්නා විට ( hrefඉහත සහ “href” වැනි) .

සම්මත ගුණාංග විවිධ DOM පිරිවිතරයන්හි දක්වා ඇත:

• DOM2 HTML (බොහෝ දුරට යල්පැන ඇති, ඒ වෙනුවට HTML පිරිවිතර බලන්න )
• DOM2 හරය (යල්පැන ඇති)
• DOM3 හරය (යල්පැන ඇති)
• DOM4

මෙම පිරිවිතරයන්ට විශිෂ්ට දර්ශක ඇති අතර ඒවාට සබැඳි තබා ගැනීමට මම නිර්දේශ කරමි; මම ඒවා නිතරම භාවිතා කරමි.

නිදසුනක් ලෙස, data-xyzඔබේ කේතයට මෙටා-දත්ත සැපයීම සඳහා මූලද්‍රව්‍යයන් මත තැබිය හැකි ඕනෑම ගුණාංගයක් අභිරුචි ගුණාංගවලට ඇතුළත් වේ (දැන් එය data-උපසර්ගයට ඇලී සිටින තාක් කල් HTML5 අනුව වලංගු වේ ). (JQuery හි මෑත සංස්කරණ මඟින් ඔබට ශ්‍රිතය data-xyzහරහා මූලද්‍රව්‍ය වෙත ප්‍රවේශය ලබා දෙයි data, නමුත් එම ශ්‍රිතය හුදෙක් ගුණාංග සඳහා ප්‍රවේශයක් පමණක් නොවේdata-xyz [එය ඊට වඩා වැඩි හා අඩු දෙකම කරයි]; ඔබට එහි විශේෂාංග අවශ්‍ය නොවන්නේ නම්, මම attrශ්‍රිතය අන්තර්ක්‍රියා කිරීමට භාවිතා කරමි data-xyzගුණාංගය සමඟ .)

මෙම attrකාර්යය ඔවුන් ඔබ අවශ්ය කල්පනා දේ ලැබෙන්නේ, වඩා වචනාර්ථයෙන් විශේෂණය වටේම සමහර සංකීර්ණ තර්ක ඇති කිරීම සඳහා භාවිතා. එය සංකල්ප සම්බන්ධ කළේය. වෙත ගමන් කිරීම propසහ ඒවා අවුල් කිරීම attrසඳහා අදහස් කරන ලදි. V1.6.0 jQuery කෙටියෙන් ඒ පිළිබඳ වැඩි දුර ගිය නමුත්, ක්රියාකාරිත්වය ඉක්මනින් ආපහු එක් කරන ලදී කිරීමට attrජනතාව භාවිතා කරන තැන පොදු තත්ත්වයන් හැසිරවීමට attrතාක්ෂණික ඔවුන් භාවිතා කළ යුතු විට prop.

මෙම වෙනස jQuery සඳහා දීර් time කාලයක් තිස්සේ පැමිණ ඇත. වසර ගණනාවක් තිස්සේ, ඔවුන් attr()බොහෝ දුරට DOM ගුණාංග ලබා ගත් නම් කරන ලද ශ්‍රිතයකින් සෑහීමකට පත්වේ, ඔබ නමෙන් බලාපොරොත්තු වන ප්‍රති result ලය නොවේ. HTML ගුණාංග සහ DOM ගුණාංග අතර ඇති වියවුල්සහගත තත්වයන් සමනය කිරීමට attr()සහ වෙන් prop()කිරීමට උපකාරී වේ. $.fn.prop()නිශ්චිත DOM ගුණාංගය $.fn.attr()අල්ලා ගන්නා අතර නිශ්චිත HTML ගුණාංගය අල්ලා ගනී.

ඒවා ක්‍රියා කරන ආකාරය සම්පූර්ණයෙන් වටහා ගැනීම සඳහා, HTML ගුණාංග සහ DOM ගුණාංග අතර වෙනස පිළිබඳ පුළුල් පැහැදිලි කිරීමක් මෙන්න.

HTML ගුණාංග

වාක්‍ය ඛණ්ඩය:

<body onload="foo()">

අරමුණ: සිදුවීම්, විදැහුම්කරණය සහ වෙනත් අරමුණු සඳහා සලකුණු සම්බන්ධ කිරීමට දත්ත වලට ඉඩ දෙන්න.

දෘශ්‍යකරණය: පන්තියේ ගුණාංගය මෙහි දැක්වේ. එය පහත කේතය හරහා ප්‍රවේශ විය හැකිය:

var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");

ගුණාංග සංගීත ස්වරූපයෙන් ආපසු ලබා දෙන අතර බ්‍රව්සරයේ සිට බ්‍රව්සරයට නොගැලපේ. කෙසේ වෙතත්, සමහර අවස්ථාවන්හිදී ඒවා ඉතා වැදගත් වේ. ඉහත උදාහරණ ලෙස, IE 8 Quirks Mode (සහ පහළ) DOM දේපලක නම ගුණාංගයේ නම වෙනුවට ලබා ගැනීමට / සැකසීමට / ඉවත් කිරීමට බලාපොරොත්තු වේ. වෙනස දැන ගැනීම වැදගත් වීමට මෙය බොහෝ හේතු වලින් එකකි.

DOM ගුණාංග

වාක්‍ය ඛණ්ඩය:

document.body.onload = foo;

අරමුණ: මූලද්‍රව්‍ය නෝඩ් වලට අයත් ගුණාංග වලට ප්‍රවේශය ලබා දේ. මෙම ගුණාංග ගුණාංගවලට සමාන නමුත් ප්‍රවේශ විය හැක්කේ ජාවාස්ක්‍රිප්ට් හරහා පමණි. DOM ගුණාංගවල කාර්යභාරය පැහැදිලි කිරීමට මෙය වැදගත් වෙනසක් වේ. මෙම සිදුවීම් හසුරුවන්නාගේ පැවරුම නිෂ් less ල වන අතර එය සිදුවීම නොලැබෙන බැවින් ගුණාංග ගුණාංගවලට වඩා සම්පූර්ණයෙන්ම වෙනස් බව කරුණාවෙන් සලකන්න .

දෘශ්‍යකරණය:

මෙන්න, ෆයර්බග් හි "ඩොම්" ටැබය යටතේ ඇති දේපල ලැයිස්තුවක් ඔබට පෙනෙනු ඇත. මේවා DOM ගුණාංග වේ. ඔබ නොදැනුවත්වම ඒවා භාවිතා කර ඇති බැවින් ඒවායින් කිහිපයක් ඔබ වහාම දකිනු ඇත. ඒවායේ අගයන් ඔබට ජාවාස්ක්‍රිප්ට් හරහා ලැබෙනු ඇත.

ප්‍රලේඛනය

• ජාවාස්ක්‍රිප්ට්: ඩේවිඩ් ෆ්ලැනගන් විසින් නියත මාර්ගෝපදේශය
• HTML ගුණාංග, මොසිල්ලා දේව් මධ්‍යස්ථානය
• DOM Element Properties, Mozilla Dev Centre

උදාහරණයක්

HTML: <textarea id="test" value="foo"></textarea>

JavaScript: alert($('#test').attr('value'));

JQuery හි පෙර සංස්කරණ වලදී, මෙය හිස් නූලක් ලබා දෙයි. 1.6 දී, එය නිසි අගය ලබා දෙයි , foo.

එක් එක් ශ්‍රිතය සඳහා නව කේතය දෙස නොබලා, කේතයට වඩා HTML ගුණාංග සහ DOM ගුණාංග අතර වෙනස සමඟ ව්‍යාකූලතාවයට වැඩි යමක් ඇති බව මට විශ්වාසයෙන් කිව හැකිය. බලාපොරොත්තුවෙන්, මෙය ඔබ වෙනුවෙන් යම් යම් දේ ඉවත් කර ඇත.

-මැට්

දේපලක් DOM හි ඇත; ගුණාංගයක් DOM තුළට විග්‍රහ කර ඇති HTML හි ඇත.

වැඩි විස්තර

ඔබ ලක්ෂණයක් වෙනස් කරන්නේ නම්, වෙනස DOM තුළ පිළිබිඹු වේ (සමහර විට වෙනත් නමක් සහිතව).

උදාහරණය: ටැගයක classගුණාංගය වෙනස් classNameකිරීමෙන් DOM හි එම ටැගයේ ගුණාංග වෙනස් වේ. ඔබට ටැගයක කිසිදු ලක්ෂණයක් නොමැති නම්, ඔබට තවමත් අනුරූප DOM දේපල හිස් හෝ පෙරනිමි අගයක් ඇත.

උදාහරණය: ඔබේ ටැගයට කිසිදු classලක්ෂණයක් නොමැති අතර , DOM දේපල classNameහිස් නූල් අගයක් සමඟ පවතී.

සංස්කරණය කරන්න

ඔබ එකක් වෙනස් කළහොත්, අනෙක පාලකයෙකු විසින් වෙනස් කරනු ඇති අතර අනෙක් අතට. මෙම පාලකය jQuery හි නොව බ්‍රව්සරයේ ස්වදේශීය කේතයේ ඇත.

එය HTML ගුණාංග සහ ව්‍යාකූලත්වයට හේතු වන DOM වස්තු අතර වෙනස පමණි. DOM මූලද්‍රව්‍යයන් මත ක්‍රියා කිරීමට පහසු අය සඳහා ස්වදේශික දේපල this.src this.value this.checkedයනාදිය .propපවුලට සාදරයෙන් පිළිගනිමු. අනෙක් අයට එය ව්‍යාකූලත්වයේ අතිරේක තට්ටුවක් පමණි. එය පැහැදිලි කරමු.

අතර ඇති වෙනස දැකීමට ඇති පහසුම ක්‍රමය .attrසහ .propපහත උදාහරණය:

<input blah="hello">

1. $('input').attr('blah'): 'hello'අපේක්ෂිත පරිදි ප්‍රතිලාභ . මෙහි අධිපති නැත.
2. $('input').prop('blah'): ප්‍රතිලාභ undefined- එය කිරීමට උත්සාහ කරන නිසා [HTMLInputElement].blah- සහ එම DOM වස්තුවෙහි එවැනි දේපලක් නොමැත. එය පවතින්නේ එම මූලද්‍රව්‍යයේ ලක්ෂණයක් ලෙස පමණි[HTMLInputElement].getAttribute('blah')

දැන් අපි එවැනි කරුණු කිහිපයක් වෙනස් කරමු:

$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');

1. $('input').attr('blah'): ආපසු 'apple'එහ්? මෙම මූලද්‍රව්‍යය මත මෙය අවසන් වරට සකසා ඇති බැවින් "මුතු" නොකරන්නේ ඇයි? දේපල ආදාන ගුණාංගය මත වෙනස් කර ඇති නිසා මිස DOM ආදාන අංගය නොවේ - ඒවා මූලික වශයෙන් පාහේ එකිනෙකාගෙන් ස්වාධීනව ක්‍රියා කරයි.
2. $('input').prop('blah'): ප්‍රතිලාභ 'pear'

ඔබ සැබවින්ම පරෙස්සම් විය යුතු දෙය නම් ඉහත හේතුව නිසා ඔබේ යෙදුම පුරාම එකම දේපල සඳහා මේවා භාවිතා කිරීම මිශ්‍ර නොකරන්න .

වෙනස නිරූපණය කරන ෆෙඩල් එකක් බලන්න: http://jsfiddle.net/garreh/uLQXc/

.attrඑදිරිව .prop:

පළමු වටය: විලාසය

<input style="font:arial;"/>

• .attr('style') - ගැලපෙන මූලද්‍රව්‍යය සඳහා පේළිගත ශෛලීන් ලබා දෙයි "font:arial;"
• .prop('style') - ශෛලීය ප්‍රකාශන වස්තුවක් ලබා දෙයි CSSStyleDeclaration

දෙවන වටය: අගය

<input value="hello" type="text"/>   

$('input').prop('value', 'i changed the value');

• .attr('value')- ප්‍රතිලාභ 'hello'*
• .prop('value') - ප්‍රතිලාභ 'i changed the value'

* සටහන: jQuery සඳහා මෙම .val()ක්‍රමයට ක්‍රමයක් ඇත, එය අභ්‍යන්තරව සමාන වේ.prop('value')

ටීඑල්; ඩී.ආර්

භාවිතා prop()පුරා attr()බහුතර අවස්ථා ගැන.

ඒ දේපල ආදාන අංගයක් වත්මන් රාජ්ය වේ. ක විශේෂණය ප්රකෘති අගය වේ.

දේපලකට විවිධ වර්ගවල දේවල් අඩංගු විය හැකිය. ගුණාංගයකට අඩංගු විය හැක්කේ නූල් පමණි

අපිරිසිදු පරීක්ෂාව

මෙම සංකල්පය වෙනස නිරීක්ෂණය කළ හැකි උදාහරණයක් සපයයි: http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

එය අත්හදා බලන්න:

• බොත්තම ක්ලික් කරන්න. පිරික්සුම් කොටු දෙකම පරීක්ෂා කර ඇත.
• පිරික්සුම් කොටු දෙකම සලකුණු නොකරන්න.
• බොත්තම නැවත ක්ලික් කරන්න. propපිරික්සුම් කොටුව පමණි . බං!

$('button').on('click', function() {
  $('#attr').attr('checked', 'checked')
  $('#prop').prop('checked', true)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>attr <input id="attr" type="checkbox"></label>
<label>prop <input id="prop" type="checkbox"></label>
<button type="button">Set checked attr and prop.</button>

වැනි සමහර ලක්ෂණ සඳහා disabledමත buttonඅන්තර්ගතය විශේෂණය එකතු කිරීම හෝ ඉවත් කිරීම, disabled="disabled"සෑම විටම (HTML5 දී IDL විශේෂණය ලෙස හැඳින්වෙන) දේපල ටොගල නිසා http://www.w3.org/TR/html5/forms.html#attr-fe-disabled පවසයි:

ආබාධිත IDL ගුණාංගය අක්‍රීය අන්තර්ගත ගුණාංගය පිළිබිඹු කළ යුතුය.

එබැවින් එය අනවශ්‍ය ලෙස HTML වෙනස් කරන බැවින් එය කැත වුවත් ඔබට එයින් ගැලවිය හැකිය.

checked="checked"සක්‍රීය කිරීම වැනි වෙනත් ගුණාංග සඳහා input type="checkbox", දේවල් කැඩී යයි, මන්ද ඔබ එය මත ක්ලික් කළ විට එය අපිරිසිදු වන අතර පසුව checked="checked"අන්තර්ගත ගුණාංගය එකතු කිරීම හෝ ඉවත් කිරීම මඟින් පරීක්ෂා කිරීම තවදුරටත් ටොගල් නොකරයි .

.propHTML වෙනස් කිරීමේ සංකීර්ණ අතුරු ආබාධ මත යැපීම වෙනුවට property ලදායී දේපල කෙරෙහි සෘජුවම බලපාන බැවින් ඔබ වැඩිපුරම භාවිතා කළ යුත්තේ මේ නිසා ය .

සියල්ල ලේඛනයේ ඇත :

විශේෂිත අවස්ථා වලදී ගුණාංග සහ ගුණාංග අතර වෙනස වැදගත් විය හැකිය. JQuery 1.6 ට පෙර .attr () ක්‍රමය සමහර ගුණාංග නැවත ලබා ගැනීමේදී දේපල අගයන් සැලකිල්ලට ගත් අතර එය නොගැලපෙන හැසිරීමට හේතු විය හැක. JQuery 1.6 වන විට .prop () ක්‍රමය මඟින් දේපල අගයන් පැහැදිලිව ලබා ගැනීමට ක්‍රමයක් සපයන අතර .attr () ගුණාංග ලබා ගනී.

ඒ නිසා මුක්කු භාවිතා කරන්න!

ගුණාංග ඔබගේ HTML පෙළ ලේඛනයේ / ගොනුවේ ඇත (== මෙය ඔබගේ HTML සලකුණු විග්‍රහයේ ප්‍රති result ලයක් යැයි සිතන්න), නමුත්
ගුණාංග HTML DOM ගසෙහි ඇත ප්‍රති (== මූලික වශයෙන් JS අර්ථයෙන් යම් වස්තුවක සත්‍ය දේපලකි).

වැදගත් වන්නේ, ඒවායින් බොහොමයක් සමමුහුර්ත කර ඇත (ඔබ classදේපල යාවත්කාලීන කරන්නේ නම් , classhtml හි ඇති ගුණාංග ද යාවත්කාලීන වනු ඇත; නමුත් උදා: - සමහර ගුණාංග අනපේක්ෂිත ගුණ වෙත සමමුහුර්ත කළ හැක විශේෂණය checked කිරීමට අනුරූප දේපල defaultChecked ඒ නිසා,

• අතින් සලකුණු කොටුව පරීක්ෂා වෙනස් වනු ඇත .prop('checked')අගය, නමුත් වෙනස් නොවන .attr('checked')හා .prop('defaultChecked')සාරධර්ම
• සැකසුම $('#input').prop('defaultChecked', true)ද වෙනස් වේ .attr('checked'), නමුත් මෙය මූලද්‍රව්‍යයක නොපෙනේ.

නියමය : .prop()බූලියන් ගුණාංග / ගුණාංග සහ html හි නොපවතින ගුණාංග සඳහා (window.location වැනි) ක්‍රමය භාවිතා කළ යුතුය. අනෙක් සියලුම ගුණාංග (ඔබට html හි දැකිය හැකි) .attr() ක්‍රමවේදය සමඟ දිගටම හැසිරවිය හැකිය . ( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/ )

.prop()වඩාත් කැමති තැන පෙන්වන වගුවක් මෙන්න ( .attr()තවමත් භාවිතා කළ හැකි වුවද ).

නිල වශයෙන් උපදෙස් දෙනු ලබන .attr () වෙනුවට .prop () භාවිතා කිරීමට ඔබට අවශ්‍ය ඇයි?

1. .prop()ඕනෑම වර්ගයක් ආපසු ලබා දිය හැකිය - නූල්, නිඛිල, බූලියන්; අතර .attr()සෑම විටම වැලක් පැමිණේ.
2. .prop()වඩා 2.5 ගුණයකින් වේගවත් යැයි කියනු ලැබේ .attr().

.attr():

• ගැලපෙන මූලද්‍රව්‍ය සමූහයේ පළමු මූලද්‍රව්‍යය සඳහා ගුණාංගයක අගය ලබා ගන්න .
• පිටු පැටවීමේදී html හි අර්ථ දක්වා ඇති පරිදි මූලද්‍රව්‍යයේ වටිනාකම ඔබට ලබා දෙයි

.prop():

• දේපලක වටිනාකම ලබා ගන්නගැලපෙන මූලද්‍රව්‍ය සමූහයේ පළමු මූලද්‍රව්‍යය සඳහා .
• Javascript / jquery හරහා වෙනස් කරන ලද මූලද්‍රව්‍යයන්ගේ යාවත්කාලීන අගයන් ලබා දෙයි

සාමාන්යයෙන් ඔබට දේපල භාවිතා කිරීමට අවශ්ය වනු ඇත. සඳහා පමණක් ගුණාංග භාවිතා කරන්න:

1. අභිරුචි HTML ලක්ෂණයක් ලබා ගැනීම (එය DOM ගුණාංගයක් සමඟ සමමුහුර්ත වී නොමැති බැවින්).
2. DOM දේපල සමඟ සමමුහුර්ත නොවන HTML ලක්ෂණයක් ලබා ගැනීම, උදා. වැනි සම්මත HTML ගුණාංගයක “මුල් අගය” ලබා ගන්න. <input value="abc">.

attributes -> HTML

properties -> DOM

JQuery 1.6 ට පෙර, සමහර විටattr() ක්‍රමය විට ගුණාංග ලබා ගැනීමේදී දේපල අගයන් සැලකිල්ලට ගත් අතර මෙය තරමක් නොගැලපෙන හැසිරීමට හේතු විය.

prop()ක්‍රමවේදය හඳුන්වාදීම මඟින් දේපල අගයන් පැහැදිලිව ලබා ගැනීමට ක්‍රමයක් සපයන අතර .attr()ගුණාංග ලබා ගනී.

ලියකියවිලි:

jQuery.attr() ගැලපෙන මූලද්‍රව්‍ය සමූහයේ පළමු මූලද්‍රව්‍යය සඳහා ගුණාංගයක අගය ලබා ගන්න.

jQuery.prop() ගැලපෙන මූලද්‍රව්‍ය සමූහයේ පළමු මූලද්‍රව්‍යය සඳහා දේපලක වටිනාකම ලබා ගන්න.

භාවිතා කිරීම ගැන මෘදු ලෙස මතක් කිරීම prop(), උදාහරණය:

if ($("#checkbox1").prop('checked')) {
    isDelete = 1;
} else {
    isDelete = 0;
}

පිරික්සුම් කොටුව 1 පරීක්ෂා කර ඇත්දැයි පරීක්ෂා කිරීමට ඉහත ශ්‍රිතය භාවිතා කරයි: පරීක්ෂා කර ඇත්නම්: ආපසු 1; එසේ නොවේ නම්: ආපසු 0. මෙහි GET ශ්‍රිතයක් ලෙස භාවිතා කරන ශ්‍රිත මුක්කු ().

if ($("#checkbox1").prop('checked', true)) {
    isDelete = 1;
} else {
    isDelete = 0;
}

ඉහත ශ්‍රිතය පරික්ෂා කිරීම සඳහා පිරික්සුම් කොටුව 1 සැකසීමට භාවිතා කරන අතර සෑම විටම ආපසු පැමිණේ 1. දැන් ශ්‍රිත මුක්කු () SET ශ්‍රිතයක් ලෙස භාවිතා කරයි.

අවුල් කරන්න එපා.

P / S: මම රූප src දේපල පරික්ෂා කරන විට . නම් src හිස්, මුක්කුවක් පිටුව (වැරදි) වත්මන් URL, සහ නැවත attr ආපසු හිස් අගයක් (දකුණේ).

.attr()කළ නොහැකි එක් දෙයක් කළ .prop()හැකිය: CSS තේරීම්කරුවන්ට බලපාන්න

මෙන්න මම අනෙක් පිළිතුරු වල නොදකින ප්‍රශ්නයක්.

CSS තේරීම් කාරකය [name=value]

• ප්‍රතිචාර දක්වනු ඇත .attr('name', 'value')
• නමුත් සෑම විටම එසේ නොවේ .prop('name', 'value')

.prop() බලපාන්නේ ගුණාංග-තේරීම් කරන්නන් කිහිප දෙනෙකුට පමණි

• input[name] (ස්තූතියි imTimDown )

.attr() සියලුම ගුණාංග-තේරීම්කරුවන්ට බලපායි

• input[value]
• input[naame]
• span[name]
• input[data-custom-attribute]( .data('custom-attribute')මේ තේරීම් කාරකයටද බලපාන්නේ නැත )

1) දේපලක් DOM හි ඇත; ගුණාංගයක් DOM තුළට විග්‍රහ කර ඇති HTML හි ඇත.

2) ele (elem) .attr ("check") (1.6.1+) "check" (String) පිරික්සුම් කොටුවේ තත්වය සමඟ වෙනස් වේ

3) ele (elem) .attr ("පරීක්ෂා කර ඇත") (1.6 ට පෙර) සත්‍ය (බූලියන්) පිරික්සුම් කොටුවේ තත්වය සමඟ වෙනස් කර ඇත

• බොහෝ විට අපට අවශ්‍ය වන්නේ DOM වස්තුව සඳහා වන අතර පසුව අභිරුචි ගුණාංග වැනි ය data-img, data-xyz.

• එමෙන්ම සමහර වෙනසක් වෙත ප්රවේශ වෙන විට checkboxවටිනාකම සහ href සමග attr()හා prop()සමග DOM නිෂ්පාදනයක් සහිත දෙයක් වෙනස් ලෙස prop()සිට සම්පූර්ණ සබැඳිය ලෙස originහා Booleanසලකුණු කොටුව වටිනාකමක් (pre-1.6)

• අපට ප්‍රවේශ විය හැක්කේ DOM මූලද්‍රව්‍ය propවෙනත් ඒවා සමඟ පමණිundefined

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
    p {
      margin: 20px 0 0;
    }
    b {
      color: blue;
    }
  </style>

</head>

<body>

  <input id="check1" type="checkbox" checked="checked">
  <label for="check1">Check me</label>
  <p></p>

  <script>
    $("input").change(function() {
      var $input = $(this);
      $("p").html(
        ".attr( \"checked\" ): <b>" + $input.attr("checked") + "</b><br>" +
        ".prop( \"checked\" ): <b>" + $input.prop("checked") + "</b><br>" +
        ".is( \":checked\" ): <b>" + $input.is(":checked")) + "</b>";
    }).change();
  </script>

</body>

</html>

මුක්කු () එදිරිව attr () හි තවත් සලකා බැලීම් කිහිපයක් තිබේ:

• selectIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected..etc ලබාගෙන .prop () ක්‍රමය සමඟ සැකසිය යුතුය. මේවාට අනුරූප ගුණාංග නොමැති අතර ඒවා ගුණාංග පමණි.

• ආදාන වර්ගයේ පිරික්සුම් කොටුව සඳහා

     .attr('checked') //returns  checked
     .prop('checked') //returns  true
     .is(':checked') //returns true

• මුක්කු ක්‍රමය මඟින් පරීක්ෂා කරන ලද, තෝරාගත්, අක්‍රීය කළ, කියවීමට පමණක් කියවන බූලියන් අගය ලබා දෙයි. එබැවින්, ඔබට .prop ('check') නම් කොන්දේසිය යටතේ කෙලින්ම භාවිතා කළ හැකිය.

• .attr () ඇමතුම් .prop () අභ්‍යන්තරව .attr () ක්‍රමය .prop () හරහා කෙලින්ම ඒවාට ප්‍රවේශ වීමට වඩා තරමක් මන්දගාමී වනු ඇත.

කේතය එලෙස ලියා ඇත්නම් ගැටළුව විසඳීම සඳහා ගැරී හෝල් පිළිතුර ඉතා අදාළ වේ

obj.prop("style","border:1px red solid;")

මුක්කු ක්‍රියාකාරී ප්‍රතිලාභ CSSStyleDeclarationවස්තුව බැවින්, ඉහත කේතය සමහර බ්‍රව්සරයක නිසියාකාරව ක්‍රියා නොකරනු ඇත (පරීක්ෂා කර ඇතIE8 with Chrome Frame Plugin මගේ නඩුවේදී ඇත).

මේ අනුව එය පහත කේතයට වෙනස් කිරීම

obj.prop("style").cssText = "border:1px red solid;"

ගැටලුව විසඳීය.