attr методу

attr методу элементтин каалаган атрибутун алууга жана өзгөртүүгө мүмкүндүк берет.

Элементтердин касиеттери менен атрибуттарын чаташтырбоо маанилүү. 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 1">
<input type="text" value="bbb 2">
<input type="text" value="ccc 3">

Ошондой эле караңыз

removeAttr методу,
элементтердин атрибуттарын өчүрүүгө мүмкүндүк берет
prop методу,
элементтердин касиеттери менен иштөөгө мүмкүндүк берет
val методу,
элементтин учурдагы маанисин алууга жана өзгөртүүгө мүмкүндүк берет