Dupa ce au fost selectate elementele HTML cu jQuery, se pot manipula proprietatile lor CSS pentru a crea diferite efecte.

Citire proprietati CSS

Proprietatile CSS ale unui element HTML se pot citi /prelua cu urmatoarea sintaxa:
$('selector').css('proprietate_css');
- selector - reprezinta un element HTML.
- proprietate_css - proprietatea CSS ce va fi citita.

Codul din urmatorul exemplu preia valorile proprietatilor "width" si "background-color" ale primului <div> cu class="cls", apoi afiseaza aceste valori intr-o fereastra Alert, cand butonul cu id="btn" e apasat:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Citire stil CSS</title>
<style type="text/css"><!--
.cls {
 width:250px;
 background-color:#bcefcd;
 border:2px solid blue;
}
--></style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // preia width si background-color ale primului <div> cu class="cls"
  var div1_width = $('div.cls:first').css('width');
  var div1_bgcolor = $('div.cls:first').css('background-color');

  // afiseaza un Alert cand tag-ul HTML cu id="btn" e apasat
  $('#btn').click(function(){
    alert('width = '+ div1_width+ ' , bgcolor = '+ div1_bgcolor);
  });
});
--></script>
</head>
<body>
<div class="cls">Curs jQuery</div>
<div class="cls">marplo.net/javascript/curs-jquery-tutoriale-js</div>
<button id="btn">Click</button>
</body>
</html>
Demo:
Curs jQuery
marplo.net/javascript/curs-jquery-tutoriale-js

jQuery obtine valoarea poprietatii CSS data de browser, nu cea adaugata in definitia CSS. Astfel, daca aveti un DIV cu inaltimea de 300 pixeli setata in CSS, dar continutul din el determina o inaltime mai mare de 300, jQuery va furniza inaltimea actuala a acelui DIV, nu cea de 300 specificata in CSS.

Setare proprietati CSS

Pentru a seta o proprietate CSS la un element HTML cu jQuery, se foloseste urmatoarea sintaxa:
$('selector').css('proprietate_css', 'valoare');
Exemplu:
<script type="text/javascript"><!--
$(document).ready(function() {
  // seteaza font-size la toate tag-urile <div> cu class="cls", cand tag-ul cu id="btn" e apasat
  $('#btn').click(function(){
    $('div.cls').css('font-size', '20px');
  });
});
--></script>
<div class="cls">Curs jQuery</div>
<div class="cls">marplo.net/javascript/curs-jquery-tutoriale-js</div>
<button id="btn">Click</button>
Codul de sus seteaza proprietatea CSS font-size:20px; la toate tag-urile <div> cu class="cls", cand tag-ul cu id="btn" e apasat.
Demo:
Curs jQuery
marplo.net/javascript/curs-jquery-tutoriale-js

Daca vreti sa setati mai multe proprietati CSS intr-o singura expresie, puteti folosi urmatoarea sintaxa:
$('selector').css({ 'prop1': 'valoare', 'prop2': 'valoare' });
- Puteti adauga oricate perechi 'prop':'valoare', separate prin virgula intre acolade.

Exemplu:
<script type="text/javascript"><!--
$(document).ready(function() {
  // setare mai multe proprietati CSS la <div> cu class="cls", cand e apasat
  $('div.cls').click(function(){
    $(this).css({'margin': '3px auto', 'background': '#bcfecd', 'color': 'blue'});
  });
});
--></script>
<div class="cls">Curs jQuery</div>
<div class="cls">marplo.net/javascript/curs-jquery-tutoriale-js</div>
Codul de sus seteaza: margin:2px auto; background':#bcfecd; color:blue; la oricare <div> cu class="cls", cand se apasa click pe el.
Ca sa vedeti efectul, apasati click pe urmatoarele doua linii de text:
Curs jQuery
marplo.net/javascript/curs-jquery-tutoriale-js

Adaugare si stergere clase

jQuery permite cu usurinta adaugarea, stergerea si comutarea claselor CSS. Iata cateva sintaxe prin care se realizeaza aceste actiuni:

    $('selector').addClass('nume_clasa');   - adauga class "nume_clasa" la elementele HTML reprezentate de "selector".
    $('selector').addClass('nume_clasa1 nume_clasa2');   - adauga class "nume_clasa1" si "nume_clasa2" la elementele HTML reprezentate de "selector".
    $('selector').removeClass('nume_clasa');   - sterge clasa "nume_clasa" din elementele HTML reprezentate de "selector".
    $('selector').toggleClass('nume_clasa');   - comuta class "nume_clasa" (o adauga daca nu e setata, si o sterge daca e adaugata).

Exemplu:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Adaugare, Stergere clase CSS</title>
<style type="text/css"><!--
.cls1 { border:2px solid #01da02; color:blue; }
.cls2 { background:#bcfecd; font-size:18px; }
--></style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // adauga class "cls2" la tag-ul cu id="id1", sterge clasa "cls1" din toate <div>
  // cand se apasa click pe tag-ul cu id="btn"
  $('#btn').click(function(){
    $('#id1').addClass('cls2');
    $('div').removeClass('cls1');
  });
});
--></script>
</head>
<body>
<div class="cls1">Cursuri pt. Web Development</div>
<div id="id1">Web site: marplo.net</div>
<button id="btn">Click</button>
</body>
</html>
Codul jQuery de mai sus adauga class "cls2" la tag-ul cu id="id1", si sterge clasa "cls1" din toate <div> cand se apasa click pe eticheta HTML cu id="btn".
Demo:
Cursuri pt. Web Development
Web site: marplo.net

Verificare daca o clasa e adaugata

Cu jQuery se poate de asemenea verifica daca elementul selectat are o anumita clasa CSS, folosind metoda hasClass().
Sintaxa:
if ($(unElement').hasClass('nume_clasa')) {
  // efectueaza ceva aici
}
- Daca elementul HTML specificat de "unElement" are clasa CSS "nume_clasa", browser-ul va executa codul dintre acolade.

Exemplu:
<script type="text/javascript"><!--
$(document).ready(function() {
  // cand mouse-ul e pe un DIV cu class="cls", ii adauga o bordura
  $('div').mouseover(function() {
    if($(this).hasClass('cls')) {
      $(this).css('border', '2px solid blue');
    }
  });
});
--></script>
<div class="cls">Div cu class="cls"</div>
<div>DIV fara class</div>
<div class="cls">Alt div cu class="cls"</div>
Acest cod adauga un chenar la fiecare DIV cu class="cls", cand mouse-ul e pe el.
Demo:
Div cu class="cls"
DIV fara class
Alt div cu class="cls"

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>?
<dt> <dd> <li>
<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.
jQuery - stiluri CSS

Last accessed pages

  1. Scriere cod CSS (740)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (19365)
  3. Introducere (412)
  4. Prezentul simplu - Exercitii si teste incepatori (6922)
  5. Gramatica limbii spaniole. Indrumator si prezentare generala (8992)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2324)
  2. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (1197)
  3. Creare si editare pagini HTML (1171)
  4. Curs HTML gratuit Tutoriale HTML5 (982)
  5. Prezentul simplu si continuu - Present Tense Simple and Continuous (886)