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 element HTML adauga continut flash SWF in pagina web?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Browser-ul dv. nu suporta SWF.
</object>
Care pseudo-clasa CSS adauga un stil la un camp input de formular cand e cursorul in el?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Clic pe instructiunea care transforma un sir JSON in obiect JavaScript.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicati functia PHP care poate crea sau scrie un fisier pe server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "Fisierul a fost creat";
else echo "Fisierul nu poate fi creat";
Cum se spune "al treilea" in engleza?
threeth third three
I planted the third tree.
- Am plantat al treilea pom.
Cum se spune "al treilea" in spaniola?
segundo tres tercero
Yo planté el tercero árbol.
- Am plantat al treilea pom.
jQuery - stiluri CSS

Last accessed pages

  1. Trecut perfect si Trecutul perfect continuu - Past perfect and Continuous (34193)
  2. Mi s-au încredintat darurile lui Dumnezeu (11)
  3. Download carti electronice si programe pentru Limba Engleza (24394)
  4. Curs si Tutoriale Ajax (33476)
  5. Cursuri limba engleza gratuite si lectii online (35212)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1340)
  2. Curs HTML gratuit Tutoriale HTML5 (932)
  3. Curs si Tutoriale JavaScript (862)
  4. Curs si Tutoriale Ajax (835)
  5. Curs CSS Online Tutoriale CSS3 (798)