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:

$(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 atribut e folosit in tag-ul <img> pentru adresa imaginii?
href src rel
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Care din aceste coduri CSS ascunde elementul in pagina?
display: none; display: inline; position: relative;
#id {
  display: none;
}
Ce instructiune opreste executia lui while() sau for() ?
continue prompt() break
for(var i = 0; i< 8; i++) {
  if(i > 1) break;
  alert(i);
}
Indicati functia utilizata pentru a crea constante.
define() include() defined()
define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;
Care este forma de plural a substativului "class" (clasa)?
classes clases clasis
This school has three classes.
- Scoala asta are trei clase.
Care este pluralul substativului "voz" (voce)?
vose voze voces
Escuché dos voces.
- Am auzit doua voci.
Obtine Atibutul ID, Class, Name, Title, Src cu jQuery

Last accessed pages

  1. Trecutul simplu - Exercitii si teste incepatori (26612)
  2. Verbe care schimba baza: e:i (1605)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (69882)
  4. Tag-urile DIV si SPAN (10225)
  5. Data si ora - Exercitii incepatori (8394)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1362)
  2. Coduri pt culori (992)
  3. Curs HTML gratuit Tutoriale HTML5 (785)
  4. Cursuri limba engleza gratuite si lectii online (439)
  5. Gramatica limbii spaniole. Indrumator si prezentare generala (426)