Die attr-metode

Die metode attr laat jou toe om enige kenmerk van 'n element te verkry of te verander.

Dit is belangrik om nie eienskappe en kenmerke van elemente te verwar nie. Wanneer die DOM-boom geskep word, word kenmerke omskep in die ooreenstemmende DOM-eienskappe van die elemente. Hulle name stem nie altyd ooreen nie, net soos hulle waardes. Sommige eienskappe mag ook nie ooreenstemmende kenmerke hê nie; hulle kan slegs verkry of gestel word wanneer die metode prop gebruik word, bv. die eienskap tagName.

Sintaksis

Verkry die waarde van 'n kenmerk:

$(selekteerder).attr(kenmerknaam);

Verander die waarde van 'n kenmerk:

$(selekteerder).attr(kenmerknaam, nuwe waarde);

Verander die waardes van verskeie kenmerke:

$(selekteerder).attr({eerste_kenmerk: nuwe_waarde, tweede_kenmerk: nuwe_waarde, ...});

Pas 'n funksie op elke element in die stel toe:

$(selekteerder).attr(kenmerknaam, function(nommer in stel, huidige kenmerkwaarde));

Voorbeeld

In die volgende voorbeeld kry ons 'n invoerveld deur sy id en vertoon die waarde van sy value-kenmerk op die skerm:

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

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

Voorbeeld

Laat ons nou 'n nuwe waarde 'www' in dieselfde kenmerk skryf:

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

Die HTML-kode sal so lyk:

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

Voorbeeld

Kom ons verander gelyktydig die type- en value-kenmerke:

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

Die HTML-kode sal so lyk:

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

Voorbeeld

Laat ons die value-kenmerk vir elke invoerveld verander - voeg die volgordelike nommer van die element in die stel by die huidige value:

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

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

Die HTML-kode sal so lyk:

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

Sien ook

die metode removeAttr,
wat jou toelaat om kenmerke van elemente te verwyder
die metode prop,
wat jou toelaat om met eienskappe van elemente te werk
die metode val,
wat jou toelaat om die huidige waarde van 'n element te kry of te verander