attr ක්රමය
attr ක්රමය මගින් අංගයක ඕනෑම ගුණාංගයක්
ලබා ගැනීම සහ වෙනස් කිරීම සිදු කළ හැක.
අංගවල ගුණ (properties) සහ ගුණාංග (attributes) වෙන්කර හඳුනා ගැනීම වැදගත්ය.
DOM ගස නිර්මාණය වන විට ගුණාංග, ඒවාට අනුරූපිත DOM අංග ගුණ බවට පරිවර්තනය වේ. ඒවායේ
නම් සහ අගයන් සැමවිටම එකිනෙකට නොගැලපිය හැක. සමහර ගුණ සඳහා අනුරූප ගුණාංග නොමැති විය හැකි අතර,
ඒවා ලබා ගැනීම සහ සකස් කිරීම සිදු කළ හැක්කේ
prop ක්රමය භාවිතා කරන විට පමණි,
උදාහරණයක් ලෙස
tagName ගුණය.
වාග් රීතිය
ගුණාංගයක අගය ලබා ගැනීම:
$(තෝරන්නා).attr(ගුණාංගයේ නම);
ගුණාංගයක අගය වෙනස් කිරීම:
$(තෝරන්නා).attr(ගුණාංගයේ නම, නව අගය);
ගුණාංග කිහිපයක අගයන් වෙනස් කිරීම:
$(තෝරන්නා).attr({පළමු_ගුණාංගය: නව_අගය, දෙවන_ගුණාංගය: නව_අගය, ...});
කාර්යයක් එකතුවේ ඇති එක් එක් අංගයට යොදා ගැනීම:
$(තෝරන්නා).attr(ගුණාංගයේ නම, function(එකතුවේ අංකය, ගුණාංගයේ වත්මන් අගය));
උදාහරණය
පහත උදාහරණයේ අපි ආදාන ක්ෂේත්රයක් එහි id මගින් තෝරාගෙන
එහි value ගුණාංගයේ අගය පිටුවේ ප්රදර්ශනය කරමු:
<input type="text" value="!!!" id="test">
let value = $('#test').attr('value');
console.log(value);
උදාහරණය
දැන් අපි එම ගුණාංගයටම නව අගයක් 'www'
ලියා තබමු:
<input type="text" value="!!!" id="test">
$('#test').attr('value', 'www');
HTML කේතය පහත ආකාරයට පෙනෙනු ඇත:
<input type="text" value="www" id="test">
උදාහරණය
අපි එකවර type සහ
value ගුණාංග වෙනස් කරමු:
<input type="text" value="!!!" id="test">
$('#test').attr({value: 'www', type: 'password'});
HTML කේතය පහත ආකාරයට පෙනෙනු ඇත:
<input type="password" value="www" id="test">
උදාහරණය
අපි සෑම ආදාන ක්ෂේත්රයකටම එහි value ගුණාංගය වෙනස් කරමු
- වත්මන් value ට එකතුවේ ඇති අංගයේ අනුක්රමික අංකය එකතු කරමු:
<input type="text" value="aaa">
<input type="text" value="bbb">
<input type="text" value="ccc">
$('input').attr('value', function(index, value) {
return value + ' ' + index;
});
HTML කේතය පහත ආකාරයට පෙනෙනු ඇත:
<input type="text" value="aaa 0">
<input type="text" value="bbb 1">
<input type="text" value="ccc 2">
මෙයද බලන්න
-
removeAttrක්රමය,
එමගින් අංගවල ගුණාංග ඉවත් කළ හැකිය -
propක්රමය,
එමගින් අංගවල ගුණ සමඟ වැඩ කළ හැකිය -
valක්රමය,
එමගින් අංගයක වත්මන් අගය ලබා ගැනීම සහ වෙනස් කිරීම සිදු කළ හැකිය
