attr Metodu

attr metodu, bir öğenin herhangi bir niteliğini almanıza ve değiştirmenize olanak tanır.

Öğelerin özellikleri (properties) ve nitelikleri (attributes) karıştırmamak önemlidir. DOM ağacı oluşturulurken nitelikler, onlara karşılık gelen DOM öğe özelliklerine dönüştürülür. İsimleri ve değerleri her zaman örtüşmeyebilir. Bazı özelliklerin karşılık gelen nitelikleri olmayabilir, bunlara sadece prop metodu kullanılarak erişilebilir veya ayarlanabilir, örneğin tagName özelliği.

Sözdizimi

Nitelik değerini alma:

$(seçici).attr(nitelik adı);

Nitelik değerini değiştirme:

$(seçici).attr(nitelik adı, yeni değer);

Birden fazla niteliğin değerini değiştirme:

$(seçici).attr({birinci_nitelik: yeni_değer, ikinci_nitelik: yeni_değer, ...});

Bir fonksiyonu kümedeki her öğeye uygulama:

$(seçici).attr(nitelik adı, function(kümedeki sıra numarası, niteliğin mevcut değeri));

Örnek

Aşağıdaki örnekte, bir input öğesini id değerine göre seçip value niteliğinin değerini ekrana yazdıracağız:

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

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

Örnek

Şimdi de aynı niteliğe 'www' yeni değerini yazalım:

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

HTML kodu şu şekilde görünecektir:

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

Örnek

Şimdi aynı anda type ve value niteliklerini değiştirelim:

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

HTML kodu şu şekilde görünecektir:

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

Örnek

Şimdi her bir input öğesinin value niteliğini değiştirelim - mevcut value değerine, kümedeki öğenin sıra numarasını ekleyelim:

<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 kodu şu şekilde görünecektir:

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

Ayrıca Bakınız

Öğelerin niteliklerini silmenize olanak tanıyan removeAttr metodu
Öğelerin özellikleriyle çalışmanıza olanak tanıyan prop metodu
Bir öğenin mevcut değerini almanıza ve değiştirmenize olanak tanıyan val metodu