attr နည်းလမ်း

attr နည်းလမ်းသည် element တစ်ခု၏ မည်သည့် attribute ကိုမဆို ရယူခြင်းနှင့် ပြောင်းလဲခြင်းကို ခွင့်ပြုသည်။

Element များ၏ properties များနှင့် attributes များကို မရောထွေးမိစေရန် အရေးကြီးသည်။ DOM tree ဖန်တီးသည့်အခါ attributes များကို သက်ဆိုင်ရာ element များ၏ DOM properties များအဖြစ် ပြောင်းလဲပေးသည်။ ၎င်းတို့၏ အမည်များနှင့် တန်ဖိုးများသည် အမြဲတမ်းတူညီချင်မှတူညီမည် မဟုတ်ပါ။ အချို့သော properties များသည် ၎င်းတို့နှင့် သက်ဆိုင်ရာ attributes များ မရှိဘဲလည်း ရှိနိုင်ပြီး၊ ၎င်းတို့ကို prop နည်းလမ်းကို အသုံးပြုသည့်အခါမှသာ ရယူနိုင် သို့မဟုတ် သတ်မှတ်နိုင်ပါသည်။ ဥပမာအားဖြင့် tagName property.

Syntax

Attribute တစ်ခု၏ တန်ဖိုးကို ရယူခြင်း:

$(selector).attr(attribute name);

Attribute တစ်ခု၏ တန်ဖိုးကို ပြောင်းလဲခြင်း:

$(selector).attr(attribute name, new value);

Attribute အများအပြား၏ တန်ဖိုးများကို ပြောင်းလဲခြင်း:

$(selector).attr({first_attribute: new_value, second_attribute: new_value, ...});

Set ထဲရှိ element တစ်ခုစီအတွက် function တစ်ခုကို အသုံးပြုခြင်း:

$(selector).attr(attribute name, function(index in set, current attribute value));

ဥပမာ

အောက်ပါဥပမာတွင် ကျွန်ုပ်တို့သည် input တစ်ခုကို ၎င်း၏ id ဖြင့် ရယူကာ ၎င်း၏ value attribute ၏ တန်ဖိုးကို screen ပေါ်တွင် ပြသပါမည်:

<input type="text" value="!!!" id="test">

let value = $('#test').attr('value');
console.log(value);

ဥပမာ

ယခု ထို attribute ထဲသို့ 'www' အသစ်တန်ဖိုးကို ရေးထည့်ကြပါစို့:

<input type="text" value="!!!" id="test"> $('#test').attr('value', 'www');

HTML code သည် အောက်ပါအတိုင်း ဖြစ်သွားပါမည်:

<input type="text" value="www" id="test">

ဥပမာ

type နှင့် value attributes နှစ်ခုလုံးကို တစ်ပြိုင်နက် ပြောင်းလဲကြည့်ရအောင်:

<input type="text" value="!!!" id="test"> $('#test').attr({value: 'www', type: 'password'});

HTML code သည် အောက်ပါအတိုင်း ဖြစ်သွားပါမည်:

<input type="password" value="www" id="test">

ဥပမာ

Input တစ်ခုစီတွင် value attribute ကို ပြောင်းလဲကြည့်ရအောင် - လက်ရှိ value ထဲသို့ set ထဲရှိ element ၏ အစဉ်လိုက် အညွှန်း (index) ကို ပေါင်းထည့်ကြပါစို့:

<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 code သည် အောက်ပါအတိုင်း ဖြစ်သွားပါမည်:

<input type="text" value="aaa 0">
<input type="text" value="bbb 1">
<input type="text" value="ccc 2">

ဆက်လက်လေ့လာရန်

removeAttr နည်းလမ်း,
သည် element များ၏ attributes များကို ဖယ်ရှားရန် ခွင့်ပြုသည်
prop နည်းလမ်း,
သည် element များ၏ properties များနှင့် အလုပ်လုပ်ရန် ခွင့်ပြုသည်
val နည်းလမ်း,
သည် element တစ်ခု၏ လက်ရှိတန်ဖိုးကို ရယူခြင်းနှင့် ပြောင်းလဲခြင်းကို ခွင့်ပြုသည်