Cautare in site

Articol

Curs jQuery – lectia 6 – Manipularea vizibilitatii cu  .addClass si .removeClass

Curs jQuery – lectia 6 – Manipularea vizibilitatii cu .addClass si .removeClass

In articolul trecut am vazut cum putem aplica proprietati multiple cu ajutorul unui obiect literal Java Script. In acest caz regulile de stil css sunt scrise direct in functia jQuery.

In aceasta lectie vom vedea o alternativa mai simpla si mai eficienta pentru manipularea regulilor css. Regulile de stil este bine sa fie mentinute in cadrul unei foi de stil sparate care sa se numeasca de exemplu style.css si care se ataseaza documentului nostru HTML.  Pentru comoditate in acest articol vom scrie regulile de stil css in cadrul sectiunii head a paginii nostre HTML.

jQuery ne da posibilitatea de a manipula in varii moduri vizibilitatea claselor css aplicate elementelor din DOM. Acest lucru il putem face utilizand metodele .addClass si .removeClass. Elementului div cu id wrap ii vom adauga clasa .awesome in care gazduim regulile de stil cum este padding-ul de 20px, culoarea de fundal pe albastru si culoarea textului pe alb.

<head>
<style>
.awesome {
background-color:#09F;
text-align:center;
color:#FFF;
padding:20px;
}
</style>
</head>
<body>
<div id="wrap"><h2>Manipularea vizibilitatii cu .addClass / .removeClass</h2></div>
<script>
$(document).ready(function(){
$('#wrap').addClass('awesome');
});
</script> 
</body>

In browser vom vizualiza acest rezultat:

2

Adaugand clasa div-ului in HTML si folosind metoda .removeClass vom vizualiza div-ul in browser fara formatarea continuta in clasa .awesome.

Putem specifica si clase multiple in interiorul acestor metode. Vom realiza o alta clasa cu numele .fantastic in interiorul careia vom gazdui regulile CSS per formatarea marginilor.

Noua clasa o vom separa de prima printr-un spatiu in acest mod:

<style>
.awesome {
background-color:#09F;
text-align:center;
color:#FFF;
padding:20px;
}
.fantastic {
background-color: #09F;
border: 10px solid #4C4C4C;
}
</style>
<script>
$(document).ready(function(){
$('#wrap').addClass('awesome fantastic');
});
</script>

Rezultatul obtinut in browser va fi urmatorul:

1

Vezi aici pagina HTML pentru metoda addClass

Vezi aici pagina HTML pentru metoda removeClass

Metodele .addClass si .removeClass se utilizeaza impreuna cu un event (eveniment). Despre evenimente in jQuery vom vorbi in articolul urmator.

In articolul urmator vom discuta Evenimentele in jQuery, instructiunile .show / .hide sau .toggle.


CUPRINS MINI-CURS JQUERY

  1. Introducere la jQuery, download / CDN si plasare in documentul HTML
  2. Alias-ul, semantica instructiunilor si inserarea lor in documentul HTML
  3. Instructiunea Document Ready in jQuery si specificarea selectorilor
  4. Selectorii :even si :odd si functia .css
  5. Proprietati multiple cu functia .css utilizand un obiect “literal”
  6. Manipularea vizibilitatii cu .addClass si .removeClass
  7. Evenimentele in jQuery, instructiunile .show / .hide sau .toogle
  8. Cuvantul cheie “this” si schimbarea textului pentru declansatorul functiei .toogle in jQuery
  9. Selectorul :hidden – aplicarea functiei .toogle asupra unui element initial ascuns
  10. Adaugarea si plasarea elementelor in DOM cu ajutorul functiilor .insertAfter si .insertBefore
  11. Adaugarea elementelor child in DOM cu ajutorul functiilor .prependTo si .appendTo


Nu sunt comentarii

Adauga Comentariu

Adresa ta de e-mail nu va fi publicata.