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

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/javascript.gif” alt=”www.discant.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: www.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/javascript.gif” alt=”Courses: www.coursesweb.net” 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>

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

Similar Posts

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *