Acest tutorial arata cum se obtine valoarea atributului unui element cu jQuery, orice atribut adaugat in acel tag HTML (id, class, name, title, src, etc.).
- Pentru a obtine valoarea unui atribut cu jQuery, se foloseste functia attr().
Sintaxa:

$(element).attr('nume_atribut')
    - Daca "nume_atribut" nu exista in "element", functia attr() va returna "undefined".

Pentru a face referire la elementul pe care se apasa clic, se foloseste instructiunea $(this), astfel, sintaxa de obtinere a valorii unui atribut dintr-un tag HTML pe care se apasa clic este aceasta:
$(element).click(function(){
 var attrval = $(this).attr('nume_atribut');
});
Acum, iata cateva coduri practice si exemple.

Obtine valoarea atributului unui element, dupa Class

In acest caz tag-ul HTML e selectat dupa "class".
    • Preia ID-ul:
$('.class').click(function(){
 var id = $(this).attr('id');
});

    • Preia valoarea "title" (de exemplu dintr-un <a> cu clasa specificata):
$('.class').click(function(){
 var title = $(this).attr('title');
});

    • Obtine valoarea de la "name" (de exemplu dintr-un camp de formular cu clasa specificata):
$('.class').click(function(){
 var name = $(this).attr('name');
});

Exemplu, obtine ID-ul si adresa SRC a imaginii cu class="imgs":
Clic pe aceasta imagine:
<img src="imgs/marplo.gif" alt="marplo.net/javascript/" class="imgs" id="the_id" width="200" height="30" />
<script type="text/javascript"><!--
$(document).ready(function() {
 $('.imgs').click(function(){
 var idimg = $(this).attr('id');
 var srcimg = $(this).attr('src');
 alert('ID-ul: '+ idimg+ '\n SRC: '+ srcimg);
 });
});
--></script>
Demo:
Clic pe aceasta imagine: marplo.net/javascript/
 

Obtine valoarea atributului unui element, dupa ID

In acest caz, elementul HTML e selectat dupa "id".
    • Obtine valoarea de la "class":
$('#id').click(function(){
 var class = $(this).attr('class');
});

    • Preia valoarea de la "name" (de exemplu dintr-o casuta de formular, cu "id" specificat):
$('#id').click(function(){
 var name = $(this).attr('name');
});

Exemplu, obtine atributele "class" si "alt" a unei imagini cu id="idimg", cand se apasa clic pe ea:
Clic pe aceasta imagine:
<img src="imgs/coursesweb.png" alt="Courses: www.coursesweb.net" class="clsimg" id="idimg" width="200" height="60" />
<script type="text/javascript"><!--
$(document).ready(function() {
 $('#idimg').click(function(){
 var classimg = $(this).attr('class');
 var altimg = $(this).attr('alt');
 alert('Class: '+ classimg+ '\n Alt: '+ altimg);
 });
});
--></script>
Demo:
Clic pe aceasta imagine: Courses: www.coursesweb.net
 

Preia valoarea atributului unui element, dupa Nume Tag

Daca doriti sa obtineti valoarea unui atribut dintr-un element cand se apasa clic pe el, fiind selectat dupa Numele Tag-ului, se pot folosi aceste coduri:
    • Preia ID-ul din DIV-ul pe care se face clic:
$('div').click(function(){
 var id = $(this).attr('id');
});

    • Obtine valoarea atributului "class" din paragraful (<p>) pe care se efectueaza clic:
$('p').click(function(){
 var class = $(this).attr('class');
});

    • Obtine atributul "name" dintr-o caseta "input":
$('input').click(function(){
 var name = $(this).attr('name');
});

Exemplu, preia atributele "id" si "class" din tag-ul DIV, cand se da clic pe el:
<div id="idiv" class="clsdiv">Clic pe acest text:<br/>
Cursuri Programare Web - http://www.coursesweb.net/</div>
<script type="text/javascript"><!--
$(document).ready(function() {
 $('div').click(function(){
 var idd = $(this).attr('id');
 var classdiv = $(this).attr('class');
 alert('ID-ul: '+ idd+ '\n Class: '+ classdiv);
 });
});
--></script>
Demo:
Clic pe acest text:
Cursuri Programare Web - http://www.coursesweb.net/

- Puteti sa obtineti valoarea si din alte atribute, precum "alt", "src" (in <img>), sau "rel".

• Ca sa preluati valoarea unui atribut din oricare element pe care se apasa clic, se foloseste selectorul '*'.
      Exemplu, obtine ID-ul oricarui element pe care se face clic:
$('*').click(function(){
 var id = $(this).attr('id');
});

• Similar se poate citi valoarea unui atribut dintr-un element HTML si cu alte evenimente /actiuni, precum: mouseover(), focus() .

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag se foloseste in <table> pentru a crea celula de tip "header"?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Ce proprietate CSS seteaza distanta dintre randuri?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Care functie deschide o noua fereastra.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicati functia PHP care returneaza un array cu numele fisierelor si directoarelor dintr-un director.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Care din urmatoarele forme a verbului "sleep" (a dormi) se foloseste pentru viitor?
sleeping slept will sleep
He will sleep there.
- El va dormi acolo.
Care din urmatoarele forme a verbului "dormir" (a dormi) se foloseste pentru viitor?
dormido dormirá durmiendo
Él dormirá allí.
- El va dormi acolo.
Obtine Atibutul ID, Class, Name, Title, Src cu jQuery

Last accessed pages

  1. Data si Timp - Obiect Date (2)
  2. Incarcare imagini pe server si afisare cu Ajax (6)
  3. Curs si Tutoriale Ajax (66)
  4. Bubbles3 (3489)
  5. Prezentul simplu - Exercitii si teste incepatori (758)

Popular pages this month

  1. Bubbles3 (3489)
  2. Gramatica limbii engleze - Prezentare Generala (2797)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2526)
  4. Butterfly Kyodai (2204)
  5. Zuma Deluxe (2083)