Metoda attr

Metoda attr lejon marrjen dhe ndryshimin e çdo atributi të elementit.

Është e rëndësishme të mos ngatërrohen vetitë dhe atributet e elementeve. Gjatë krijimit të pemës DOM, atributet përkthehen në vetitë përkatëse DOM të elementeve. Emrat e tyre nuk përkojnë gjithmonë, ashtu si dhe vlerat e tyre. Disa veti gjithashtu mund të mos kenë atribute përkatëse, ato mund të merren dhe vendosen vetëm duke përdorur metodën prop, për shembull vetia tagName.

Sintaksa

Marrja e vlerës së atributit:

javascript$(selector).attr(emri i atributit);

Ndryshimi i vlerës së atributit:

javascript$(selector).attr(emri i atributit, vlera e re);

Ndryshimi i vlerave të disa atributeve:

javascript$(selector).attr({atributi_i_parë: vlera_e_re, atributi_i_dytë: vlera_e_re, ...});

Zbatimi i funksionit për çdo element në grup:

javascript$(selector).attr(emri i atributit, function(numri në grup, vlera aktuale e atributit));

Shembull

Në shembullin vijues do të marrim një input nga id i tij dhe do të shfaqim në ekran vlerën e atributit të tij value:

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

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

Shembull

Tani le të shkruajmë një vlerë të re 'www' në të njëjtin atribut:

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

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

Kodi HTML do të duket kështu:

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

Shembull

Le të ndryshojmë njëkohësisht atributet type dhe value:

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

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

Kodi HTML do të duket kështu:

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

Shembull

Le të ndryshojmë për çdo input atributin value - duke shtuar në value aktual numrin rendor të elementit në grup:

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;
});

Kodi HTML do të duket kështu:

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

Shihni gjithashtu