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