Curs Javascript

In acest tutorial sunt prezentate cateva efecte simple ce pot fi create cu jQuery.

Ascundere Elemente

Pentru a ascunde un element in pagina, se poate folosi metoda hide().
Sintaxa
$('selector').hide('durata');
- "durata" - (optional) determina viteza animatiei de ascundere. Poate fi unul din sirurile "fast" si "slow", sau un numar care indica durata in milisecunde.

Exemplu:
<style type="text/css"><!--
.cls { cursor:pointer; text-decoration:underline; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // cand se da click pe un <span> cu class="cls", ascunde elementul parinte
  $('span.cls').click(function(){
    $(this).parent().hide('slow');
  });
});
--></script>

<div>Cursuri gratuite Web Development, jQuery tutorial ... <span class="cls">Close</span>.</div>
<div>Alte cursuri de programare Web: marplo.net ... <span class="cls">Close</span>.</div>
Acest cod ascunde (cu o animatie "slow") elementele care contin un tag <span> cu class="cls", cand acesta e apasat.
Demo:
Cursuri gratuite Web Development, jQuery tutorial ... Close.
Alte cursuri de programare Web: marplo.net ... Close.

- Functia parent() - returneaza elementul parinte (cel in care este inclus).
- $(this).parent() - returneaza elementul parinte al obiectului curent.
In exemplul de mai sus, returneaza elementul HTML in care tag-ul <span> este inclus. In acest caz, metoda hide() va ascunde obiectul parinte si tot continutul lui (inclusiv acel <span> pe care se da click).
Daca vreti sa ascundeti doar obiectul curent, folositi:   $(this).hide();
Ca sa ascundeti un anume element, se foloseste:   $('#unElement').hide();

• Daca vreti sa fie executate anumite instructiuni dupa ce efectul de ascundere e complet, puteti folosi urmatoarea sintaxa:
$('selector').hide('durata', function() {
  // cod ce trebuie executat
});

Exemplu:
<style type="text/css"><!--
.cls { cursor:pointer; text-decoration:underline; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // cand se da click pe un <span> cu class="cls", ascunde parintele lui
  $('span.cls').click(function(){
    $(this).parent().hide('slow', function() {
      alert('Inchis');
    });
  });
});
--></script>

<div>Cursuri gratuite Web Development, jQuery tutorial ... <span class="cls">Close</span>.</div>
<div>Alte cursuri de programare Web: marplo.net ... <span class="cls">Close</span>.</div>
De aceasta data am adaugat o functie cu un alert() sa fie executat cand efectul de ascundere e complet.
Demo:
Cursuri gratuite Web Development, jQuery tutorial ... Close.
Alte cursuri de programare Web: marplo.net ... Close.

Afisare Elemente

Pentru a face vizibil un element ascuns (de obicei cu display:none;), se foloseste metoda show().
Sintaxa:
$('selector').show('durata');
- "durata" - (optional) indica durata animatiei de afisare. Poate fi unul din sirurile "fast" and "slow", sau un numar ce seteaza durata in milisecunde.

Daca vreti sa fie executate anumite instructiuni dupa ce efectul de afisare e complet, se foloseste formula:
$('selector').show('durata', function() {
  // cod ce trebuie executat
});

Exemplu:
<script type="text/javascript"><!--
$(document).ready(function() {
  // face vizibil tag-ul cu id="idd", cand tag-ul cu id="btn" e apasat
  $('#btn').click(function(){
    $('#idd').show('slow', function() {
      $('#btn').hide(650);
    });
  });
});
--></script>

<div id="idd" style="display:none;">Cursuri gratuite Web Development, jQuery tutorial.</div>
<button id="btn">Show</button>
Cand utilizatorul apasa pe butonul "Show", tag-ul <div> cu id="idd" este afisat, iar dupa ce efectul de afisare e complet, butonul va fi ascuns (in 650 milisecunde).
Demo:

Verificare daca un element e vizibil sau ascuns

Ca sa verificati daca un element e vizibl, puteti folosi urmatoarea formula:
if ($('#unID').is(':visible')) {
  // cod ce trebuie executat daca e vizibil
}
Ca sa testati daca un element e ascuns, se foloseste formula:
if ($('#unID').is(':hidden')) {
  // cod ce trebuie executat daca e ascuns
}

Exemplu:
<script type="text/javascript"><!--
$(document).ready(function() {
  // cand se apasa click pe tag-ul cu id="btn"
  $('#btn').click(function() {
    // daca tag-ul cu id="idd" e ascuns, il face vizibil (cu text albastru)
    if ($('#idd').is(':hidden')) {
      $('#idd').show('slow').css('color', 'blue');
    }
    else if ($('#idd').is(':visible')) {
      // altfel, daca este vizibil, ii adauga o culoare de fundal
      $('#idd').css('background', '#cdfecd');
    }
  });
});
--></script>
<div id="idd" style="display:none;">Div care este initial ascuns.</div>
<button id="btn">Click</button>
Tag-ul <div> este initial ascuns; cand utilizatorul apasa prima data pe butonul "Click" afiseaza tag-ul <div> (cu text albastru). Cand utilizatorul apasa a doua oara pe buton, adauga o culoare de fundal (cu background) la acel DIV.
Demo:

• Se poate folosi ":visible" si ":hidden" direct cu selectori: ("#unID:visible") si ("#unID:hidden"), pentru a selecta obiectul cand e vizibil, respectiv ascuns.
Astfel, o varianta optimizata a exemplului de mai sus e aceasta (efectul e la fel):
$(document).ready(function() {
  // cand se apasa click pe tag-ul cu id="btn"
  $('#btn').click(function() {
    $('#idd:visible').css('background', '#cdfecd');       // aduga background la #idd vizibil
    $('#idd:hidden').show('slow').css('color', 'blue');   // afiseaza #idd si adauga culoare albastra
  });
});

Efecte cu toggle()

Metoda toogle() inverseaza starea obiectului, il ascunde daca e vizibil, si-l afiseaza daca e ascuns.
$('selector').toogle('durata');
- "durata" - (optional) indica durata efectului de ascundere/afisare. Poate fi unul din sirurile "fast" si "slow", sau un numar care seteaza durata in milisecunde.

Ca sa executati anumite instructiuni dupa ce efectul e complet, se foloseste urmatoarea sintaxa:
$('selector').toogle('durata', function() {
  // cod ce trebuie executat
});

Exemplu:
<script type="text/javascript"><!--
$(document).ready(function() {
  // cand se da click pe tag-ul cu id="btn"
  $('#btn').click(function() {
    // inverseaza starea elementului cu "#idd"
    $('#idd').toggle(800, function() {
      // schimba textul din buton, in functie de starea lui "#idd" 
      if ($('#idd').is(':visible')) {
        $('#btn').text('Ascunde');
      } else {
        $('#btn').text('Afiseaza');
      }
    });
  });
});
--></script>
<div id="idd">Continut care va fi ascuns si iar facut vizibil.</div>
<button id="btn">Hide</button>
Codul de mai sus inverseaza starea ascuns/vizibil a <div>-ului cu id="idd", apoi se foloseste instructiunea is(':visible') ca sa verifice daca acest DIV e vizibil sau nu; in functie de starea lui schimba textul din buton.
Demo:
Continut care va fi ascuns si iar facut vizibil.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Clic pe tag-ul care creaza celula in tabel.
<tr> <span> <td>
<table></tr>
  <td>Cell-1</td><td>Cell-2</td>
</tr></table>
Indicati proprietatea CSS care adauga o imagine pentru fundal
background-color background-image color
h3 {
  background-image: url("image.jpg");
}
Ce instructiune se foloseste la parcugerea elementelor unui Array?
for() [) object()
var arr = [1, "ab", "CoursesWeb.net"];
for(var i=0; i< arr.length; i++) { alert(arr[i]); };
Indicati functia PHP utilizata la parcurgerea elementelor unui Array asociativ.
for() foreach() if()
$arr =["k1"=>"v1", "k2"=>"v2", "k3"=>"v3");
foreach($arr AS $k => $v) { echo "<br/>". $k ." - ". $v; }
Care din urmatoarele cuvinte este sinonim cu "gentle" (bland)?
meek good beautiful
He is so kind and meek.
- El este atat de amabil si bland.
Care din urmatoarele cuvinte este sinonim cu "amable" (bland, prietenos)?
hermoso fuerte manso
Tu padre tiene un carácter muy manso.
- Tatal tau are un caracter foarte bland.
Efecte jQuery simple de ascundere si afisare

Last accessed pages

  1. Trecutul simplu si continuu - Past Tense Simple and Continuous (81747)
  2. Curs complet de limba engleza, incepatori (14557)
  3. Acabar + Infinitiv (1540)
  4. Lectii audio-video de initiere in limba engleza (4506)
  5. Lectii audio-video de limba engleza (24927)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1245)
  2. Coduri pt culori (903)
  3. Cursuri limba engleza gratuite si lectii online (600)
  4. Gramatica limbii engleze - Prezentare Generala (536)
  5. Gramatica limbii spaniole. Indrumator si prezentare generala (487)