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
Ce element HTML adauga continut flash SWF in pagina web?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Browser-ul dv. nu suporta SWF.
</object>
Care pseudo-clasa CSS adauga un stil la un camp input de formular cand e cursorul in el?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Clic pe instructiunea care transforma un sir JSON in obiect JavaScript.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicati functia PHP care poate crea sau scrie un fisier pe server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "Fisierul a fost creat";
else echo "Fisierul nu poate fi creat";
Cum se spune "al treilea" in engleza?
threeth third three
I planted the third tree.
- Am plantat al treilea pom.
Cum se spune "al treilea" in spaniola?
segundo tres tercero
Yo planté el tercero árbol.
- Am plantat al treilea pom.
Obtine Atibutul ID, Class, Name, Title, Src cu jQuery

Last accessed pages

  1. Verbe modale - SHALL, SHOULD, OUGHT TO, WILL, WOULD, USED TO, BE TO, DARE (15064)
  2. Conditional IF - Exercitii si teste engleza incepatori (7392)
  3. Verbe modale - Modal verbs - CAN, COULD, MAY, MIGHT, MUST (28444)
  4. Articolul din limba engleza - The article (27796)
  5. Accentul si Pronuntia (10369)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (1983)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1682)
  3. Trecutul simplu si continuu - Past Tense Simple and Continuous (1583)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1443)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1170)