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 <a> pentru adresa link-ului?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Ce proprietate CSS seteaza tipul fontului utilizat?
font-family text-decoration font-size
h2 {
  font-family:"Calibri", sans-serif;
}
Ce instructiune selecteaza toate tag-urile <div> cu class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // numar elemente selectate
alert(nr_elms);
Indicati functia care returneaza suma valorilor dintr-un array.
array_sum() array_diff() array_shift()
$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Indicati forma corecta a verbului "study" (a studia) la Trecutul Simplu in aceasta propozitie: "We (study) English."
studyed studys studied
We studied English.
- Noi am studiat engleza.
Indicati forma corecta a verbului "decir" (a spune) la Prezent in aceasta propozitie: "Yo (decir) siempre la verdad."
digas digo decir
Yo digo siempre la verdad.
- Eu spun mereu adevarul.
Obtine Atibutul ID, Class, Name, Title, Src cu jQuery

Last accessed pages

  1. Curs si Tutoriale JavaScript (70095)
  2. Verbe modale - Modal verbs - CAN, COULD, MAY, MIGHT, MUST (42217)
  3. Gramatica limbii engleze - Prezentare Generala (153507)
  4. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (149750)
  5. Verbe modale 2 - Teste incepatori (4832)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (5366)
  2. Curs HTML gratuit Tutoriale HTML5 (4411)
  3. Curs si Tutoriale JavaScript (3777)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (3700)
  5. Curs CSS Online Tutoriale CSS3 (3652)