jQuery este o librarie de functii JavaScript creata de John Resig.
jQuery e centrat pe lucrul si manipularea elementelor HTML si CSS in pagina web. Are de asemenea utilitati Ajax pentru transmitere de date la server, functii pt. lucru cu obiecte, array si evenimente.
Aproape toate scripturile facute cu jQuery functioneaza la fel in principalele navigatoare web.
Includere jQuery
Ca sa lucrati cu jQuery trebuie mai intai sa includeti libraria de functii jQuery in pagina HTML, ca orice fisier cu cod JavaScript.
Puteti gasi si descarca ultima versiune de la pagina
Download jQuery. Salvati libraria jQuery pe server, intr-un fisier cu extensia ".js", apoi includeti-l in documentul HTML, folosind urmatoarea sintaxa (
in sectiunea HEAD):
<script src="jquery_file.js"></script>
Sau, in loc de a avea fisierul cu jQuery pe serverul dv., o metoda alternativa de a include libraria jQuery este prin Google:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Acest tutorial foloseste versiunea lansat in mai 2011 (
jQuery 1.6.1).
Pentru a putea interactiona cu elementele HTML in pagina, instructiunile script-ului trebuie executate dupa incarcarea paginii, astfel tot codul jQuery se scrie in interiorul unei functii speciale "
document ready", aceasta executa codul din ea dupa incarcarea paginii.
Sintaxa:
<script src="jquery_file.js"></script>
$(document).ready(function() {
// tot codul jQuery se scrie aici
});
- Aproape toate comenzile si functiile jQuery se adauga in acest "
document-ready". In interiorul functiei "
ready()" puteti adauga orice cod JavaScript, precum variabile noi, obiecte, instructiuni if(), for(), etc.
In urmatorul exemplu creem o simpla fereastra alert de test, ca sa ne asiguram ca am inclus bine libraria jQuery:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Simplu jQuery</title>
<script type="text/javascript" src="jquery_library.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
alert('Mesaj de test');
});
--></script>
</head>
<body>
Continut HTML
</body>
</html>
Se poate inlocui
$() cu
jQuery() ; acesta e util ca sa se evite conflicte cu alte aplicatii JavaScript care folosesc "
$()".
Exemplu:
<script type="text/javascript"><!--
jQuery(document).ready(function() {
alert('Mesaj de test');
});
--></script>
Selectare elemente HTML in jQuery
Elementele (X)HTML se selecteaza cu jQuery prin adaugarea lor in
$("") (sau
jQuery("") , se pot folosi ghilimele duble sau simple).
De exemplu, daca vreti sa selectati toate elementele <h3>, se foloseste:
$('h3') (sau
jQuery('h3') ).
Daca vreti sa selectati tag-ul cu
id="unid" , se scrie
$('#unid').
Urmatorul exemplu afiseaza o fereastra Alert cu continutul unui DIV cu
id="div1":
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Simplu select</title>
<script type="text/javascript"
src="jquery_library.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
var ctn = $('#div1').html(); // preia continutul din tag-ul cu id="div1"
alert(ctn);
});
--></script>
</head>
<body>
<div id="div1">Curs jQuery</div>
<div id="div2">marplo.net/javascript/curs-jquery-tutoriale-js</div>
</body>
</html>
Cand adaugati un selector jQuery in $(), returneaza un obiect jQuery ce contine un set cu elementele selectate, potrivite cu acel selector.
Functia
html() este o metoda jQuery care returneaza continutul HTML din elementul la care e aplicata.
Selectorii jQuery sunt foarte asemanatori cu selectorii CSS, iata cateva example:
$('*') - selecteaza toate elementele.
$('div') - selecteaza toate tag-urile <div>.
$('#un_id') - selecteaza un tag HTML cu id="un_id".
$('.a_class') - selecteaza toate tag-urile HTML cu class="a_class".
$('p#un_id') - selecteaza tagul <p> cu id="un_id".
$('li.a_class') - toate tag-urile <li> cu class="a_class".
$('li a') - toate tag-urile <a> din elementele <li>.
$('div a.a_class') - tag-urile <a> cu class="a_class", care sunt adaugate in DIV-uri.
$('div.a_class p span') - toate tag-urile <span> din <p>-uri care sunt adaugate in <div>-uri cu class="a_class".
jQuery suporta folosirea tuturor selectorilor CSS, inclusiv cei din CSS3. Iata cateva example:
$('p>a') - selecteaza toate tag-urile <a> care sunt incluse direct in paragrafe (<p>).
$('a:first') - selecteaza primul tag <a>.
$('h3:last') - selecteaza ultimul <h3> din pagina.
$('input[type=text]') - selecteaza elementele input care au tipul (type) specificat la text.
$('p:odd') - selecteaza toate paragrafele cu numar de ordine impar.
$('li:first-child') - selecteaza primul <li> din fiecare lista cu tag-uri <li>.
jQuery are si cativa selectori proprii:
$(':button') - selecteaza elementele de tip buton (input sau button).
$(':radio') - selecteaza butoanele tip radio.
$(':checkbox') - selecteaza checkbox.
$(':checked') - selecteaza elementele checkbox sau radio care sunt selectate.
$(':header') - selecteaza elementele de tip Header (h1, h2, h3, etc.).
$(':contains("String")') - selecteaza elementele care contin textul specificat la "String".
• jQuery poate selecta mai multi selectori intr-o singura declaratie, separati prin virgula, intr-un singur sir.
De exemplu, daca vrem sa selectam fiecare <h2>, <div> cu
class="clas1", si <p> cu
class="cls2" intr-o singura expresie, folosim urmatoarea instructiune:
$('h2, div.clas1, p.cls2')
- Lista completa cu selectorii folositi in jQuery o gasiti pe site-ul oficial, la pagina
Selectori.
• Pentru a obtine numarul de elemente selectate se foloseste proprietatea
length.
Sintaxa:
$('selector').length
Exemplu:
<script type="text/javascript"><!--
$(document).ready(function() {
var div_nr = $('div').length; // obtine numarul de DIV-uri din pagina
alert(div_nr);
});
--></script>
<div id="div1">Curs jQuery</div>
<div id="div2">marplo.net/javascript/curs-jquery-tutoriale-js</div>
Evenimente in jQuery
Evenimentele sunt actiuni pe care utilizatorul le efectueaza in pagina web, cum ar fi click, miscarea mouse-ului, deschiderea unei ferestre de browser, derularea paginii, apasarea unui buton la tastatura, etc..
Se poate specifica executarea unor instructiuni cand un eveniment este declansat, folosind urmatoarea sintaxa:
$('selector').tip_eveniment(function() {
// instructiuni care sa fie executate
// cand actiunea specificata la "tip_eveniment"
// este efectuata la elementele reprezentate de "selector"
});
Exemplu:
<script type="text/javascript"><!--
$(document).ready(function() {
// inregistreaza un eveniment de tip click la tag-urile <div>
$('div').click(function() {
var div_txt = $(this).text(); // preia textul din DIV-ul pe care s-a apasat click
alert(div_txt);
});
});
--></script>
<div id="div1">Curs jQuery</div>
<div id="div2">marplo.net/javascript/curs-jquery-tutoriale-js</div>
- Instructiunea
$(this) returneaza elementul curent, "
acesta" (la care s-a declansat evenimentul).
- Metoda
text() returneaza textul din obiectul la care e aplicata.
- Codul din interiorul
function() va fi executat doar cand se apasa click pe un <div>.
Demo (
apasati click pe urmatoarele linii de text)
Curs jQuery
marplo.net/javascript/curs-jquery-tutoriale-js
• Iata alte cateva tipuri de evenimente ce pot fi utilizate in jQuery:
blur - e declansat cand un element pierde "atentia" (cursorul nu mai e pe el).
focus - e declansat cand se intra intr-un element.
hover - executa instructiunile cand mouse-ul este in cadrul obiectului.
mouseover - declansat cand mouse-ul intra in cadrul obiectului.
mousemove - declansat cand mouse-ul se misca in cadrul elementului.
keydown - actionat cand utilizatorul apasa un buton pe tastatura.
load - actionat cand un element si toate sub-elementele lui au fost incarcate.
resize - trimis la obiectul window cand dimensiunea ferestrei browser-ului e modificata.
scroll - declansat cand pagina (sau un anume obiect) e derulata.
submit - actionat cand utilizatorul incearca sa trimita datele dintr-un formular.
select - declansat cand utilizatorul selecteaza un text adaugat intr-o caseta <input type="text">, sau <textarea>.
- O lista completa cu evenimentele folosite in jQuery, gasiti pe site-ul oficial, la pagina
Evenimente jQuery.
Puteti adauga codul jQuery intr-un fisier extern ".js", apoi sa includeti fisierul in documentul HTML, dupa codul care include libraria jQuery; precum in aceasta sintaxa:.
<head>
<title>Titlu paginii</title>
<script type="text/javascript" src="jquery_library.js"></script>
<script type="text/javascript" src="codul_tau.js"></script>
</head>