Метод attr

Метод attr элементнинг istalgan атрибутини олиш ва ўзгартириш имконини беради.

Элементларнинг хусусиятлари ва атрибутларини аралаштириб юбориш мухим эмас. 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,
у элементнинг жорий қийматини олиш ва ўзгартириш имконини беради