Obtine Atibutul ID, Class, Name, Title, Src cu jQuery

Curs Javascript

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:

    - 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:  

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:  

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:
- 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() .

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

#id {
  overflow: auto;
}

document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}

if(isset($_GET["id"])) {
  echo $_GET["id"];
}

Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.

Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.