[TUT] Obtine Atributul (ID, Class, Name, Title, Src) cu jQuery

[ActiON_]

Obtine Atributul (ID, Class, Name, Title, Src) cu jQuery

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:

Code: [Select]

$(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 click, se foloseste instructiunea $(this), astfel, sintaxa de obtinere a valorii unui atribut dintr-un tag HTML pe care se apasa click este aceasta:

Code: [Select]

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

Code: [Select]

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

Code: [Select]

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

Code: [Select]

$('.class').click(function(){
  var name = $(this).attr('name');
});
Exemplu, obtine ID-ul si adresa SRC a imaginii cu class="imgs":

Code: [Select]

Clic pe aceasta imagine:
<img src="imgs/javascript.gif" alt="www.skilledg.com" 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>

Obtine valoarea atributului unui element, dupa ID

In acest caz, elementul HTML e selectat dupa "id".
    • Obtine valoarea de la "class":

Code: [Select]

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

Code: [Select]

$('#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:

Code: [Select]

Clic pe aceasta imagine:
<img src="imgs/javascript.gif" alt="Gaming: www.skilledg.com" class="clsimg" id="idimg" width="200" height="30" />
<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>

Preia valoarea atributului unui element, dupa Nume Tag

Daca doriti sa obtineti valoarea unui atribut dintr-un element cand se apasa click pe el, fiind selectat dupa Numele Tag-ului, se pot folosi aceste coduri:
    • Preia ID-ul din DIV-ul pe care se face click:

Code: [Select]

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

Code: [Select]

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

Code: [Select]

$('input').click(function(){
  var name = $(this).attr('name');
});
Exemplu, preia atributele "id" si "class" din tag-ul DIV, cand se da click pe el:

Code: [Select]

<div id="idiv" class="clsdiv">Clic pe acest text:<br/>
Gaming is not a crime - www.skilledg.com/</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>
- 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 click, se foloseste selectorul '*'.
      Exemplu, obtine ID-ul oricarui element pe care se face click:

Code: [Select]

$('*').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() .

Sursa: marplo.net