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