attr մեթոդը

attr մեթոդը թույլ է տալիս ստանալ և փոփոխել տարրի ցանկացած ատրիբուտ:

Կարևոր է չխառնել տարրերի հատկությունները և ատրիբուտները: DOM ծառի ստեղծման ժամանակ ատրիբուտները վերածվում են դրանց համապատասխան DOM հատկությունների: Նրանց անվանումները միշտ չէ, որ համընկնում են, ինչպես նաև նրանց արժեքները: Որոշ հատկություններ կարող են նաև չունենալ դրանց համապատասխան ատրիբուտներ, դրանք կարող են ստացվել և սահմանվել միայն prop մեթոդի օգտագործման դեպքում, օրինակ tagName հատկությունը:

Շարահյուսություն

Ատրիբուտի արժեքի ստացում.

javascript$(ընտրիչ).attr(ատրիբուտի անուն);

Ատրիբուտի արժեքի փոփոխում.

javascript$(ընտրիչ).attr(ատրիբուտի անուն, նոր արժեք);

Մի քանի ատրիբուտների արժեքների փոփոխում.

javascript$(ընտրիչ).attr({առաջին_ատրիբուտ: նոր_արժեք, երկրորդ_ատրիբուտ: նոր_արժեք, ...});

Ֆունկցիայի կիրառում հավաքածուի յուրաքանչյուր տարրի նկատմամբ.

javascript$(ընտրիչ).attr(ատրիբուտի անուն, function(հերթական համար հավաքածուում, ատրիբուտի ընթացիկ արժեք));

Օրինակ

Հաջորդ օրինակում մենք կստանանք inputը իր id-ով և կարտածենք էկրանին իր value ատրիբուտի արժեքը.

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

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

Օրինակ

Իսկ այժմ նույն ատրիբուտում գրենք 'www' նոր արժեքը.

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

javascript$('#test').attr('value', 'www');

HTML կոդը կունենա հետևյալ տեսքը.

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

Օրինակ

Եկեք միաժամանակ փոխենք type և value ատրիբուտները.

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

javascript$('#test').attr({value: 'www', type: 'password'});

HTML կոդը կունենա հետևյալ տեսքը.

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

Օրինակ

Եկեք յուրաքանչյուր inputի համար փոխենք value ատրիբուտը` ավելացնելով ընթացիկ value-ին տարրի հերթական համարը հավաքածուում.

html<input type="text" value="aaa">
<input type="text" value="bbb">
<input type="text" value="ccc">

javascript$('input').attr('value', function(index, value) {
  return value + ' ' + index;
});

HTML կոդը կունենա հետևյալ տեսքը.

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

Տես նաև