Obtine Atibutul 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:

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

<<-Adauga, Sterge elemente HTML .. -- Adauga, Sterge, Modifica Atribute ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>

Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?

block list-item inline-block

.some_class {
  display: list-item;
}

Care instructiune JavaScript transforma un obiect in sir JSON.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)

lived living liveing

I`m living here.
- Traiesc /Locuiesc aici.

Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?

vivió vivido viviendo

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.

Obtine Atibutul ID, Class, Name, Title, Src cu jQuery

Curs Javascript

Obtine valoarea atributului unui element, dupa Class

Obtine valoarea atributului unui element, dupa ID

Preia valoarea atributului unui element, dupa Nume Tag

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Last accessed pages

Popular pages this month