home > tutoriale > javascript-ajax > tutorial-incepatori-jquery.php
Tutoriale jquery pentru incepatori

Tutorial jQuery pentru incepatori

29 Ianuarie 2011 de Mihail Alin

Cu ajutorul acestui tutorial ne putem forma o baza in lumea jQuery .

Autor: tutorial jquery incepatori
Autor :   Mihail Alin

Pentru cei care nu stiu, jQuery este o librarie javascript , conceputa si gandita pentru a interactua cu elementele de pe o pagina web prin intermediul DOM.jQuery a ajuns cea mai cunoascuta si folosita librarie javascript datorita faptului ca are o sintaxa foarte simpla si o marime foarte mica .

De ce ar trebui sa o folosesc ?

Caracteristicile cele mai importante ar fi sintaxa foarte simpla si codul redus care trebuie scris pentru a obtine rezultatele dorite.Sa spunem ca daca ai putea face ceea ce jQuery face cu window.onload sau getElementById , nu numai ca ar trebui sa scrii mult cod, dar mai mult ca sigur ai intampina probleme pe parcurs.

Ok, sunt convins , cum incep sa folosesc jQuery ?

Ma bucur ca te-am convis sa citesti in continuare :P , raspunsul la intrebarea ta se poate rezuma in doar doua cuvinte : foarte simplu.
Primul lucru care trebuie sa il facem este sa descarcam librarie de pe pagina oficiala jQuery, odata descarcat scriptul, trebuie "legat" cu documentul in care vrem sa lucram :

        <!DOCTYPE HTML>
        <html>
        <head>
        	<title>Tutorial jQuery pentru incepatori</title>
        	<script src="jquery.js" type="text/javascript"></script>
        </head>
        <body>
        </body>
        </html>
        

Executare si sintaxa

Dupa cum am spus mai sus , jQuery are o sintaxa foarte simpla.Comenzile sunt foarte de usor de recunoscut datorita faptului ca incep cu simbolul "$"(dolar):

        $(element).event(functie-sau-parametru);
        

Comanda de executare a scriptului este utila :

$(document).ready(function(){
	//Codul aici
});
        

ready este o metoda propie jQuery, cu ajutorul acesteia se verifa DOM-ul, pentru a vedea daca este pregatit pentru folosinta.Este mai important ca window.onload, deoarece aceasta asteapta ca toate elementele ( scripts , imagini, etc. ) de pe pagina sa fie incarcate, in schimb ready asteapta decat structura paginii.

Accesul la events si elemente

Accesul la elementele de pe pagina este foarte simplu deoarece se foloseste aceeasi nomenclatura ca in CSS

Tipul elementului Modul de acces Exemple
Etichete Numele etichetei. "a","div","strong".
Element cu ID ID-ul precedat de "#". "#container","#text".
Element cu clasa(class) Numele clasei precedat de "."(punct). ".container",".stiluri".
tutorial jquery pentru incepatoriDe asemenea putem folosi selectori CSS cum ar fi : ">","*",etc.

Un exemplu simplu

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exemplu : Tutorial jQuery pentru incepatori

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (){
	//Cand se face click pe un link , ne anunta
	$("a").click(function (){
		alert("Mouse-ul tau a facut click pe un link, OMG");
	});
});
</script>
</head>
<body>
	<a href="#"> Apasa-ma! </a>
</body>
</html>
        

Este simplu, nu ? Atunci cand facem click pe oricare link din document, suntem anuntati, haideti sa trecem mai departe, sa ne aventuram un pic mai mult in lumea librariei javascript jQuery.

Adaugare si eliminare a unei clase ( class )

Atunci cand dorim ca un element sa interactioneze cu un stil CSS deja stabilit, folosim clasele.Cu jQuery putem sa le alocam dinamic:

        $("a").addClass("buton");
        

Sau putem sa le eliminam :

        $("a").removeClass("buton");
        

Haideti sa adaugam un pic de css pentru clasa "buton" si sa vedem cum se comporta jQuery :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Tutorial pentru incepatori jQuery
</title>
<script src="jquery.js" type="text/javascript">
</script>
<script type="text/javascript">
//www.rotuts.com Tutoriale si resurse web
	$(document).ready(function (){
		//Cand trecem cu mouse-ul peste link se executa codul de mai jos
		$("a").mouseover(function (){
			alert("Ai trecut cu mouse-ul peste un <a>");
			//Eliminam clasa
			$("a").removeClass("buton");
		});
		//Adauga clasa buton , la toate link-urile din document, aceasta alocare NU APARTINE FUNCTIEI care executa codul atunci cand treci cu mouse-ul peste link, deci mai intai o sa adauge clasa "buton" , dupa care se asteapta pana noi realizam trecerea peste link pentru a elimina clasa
		$("a").addClass("buton");
	});
</script>
<style type="text/css">
.buton{
	color:#f00;
	display:block;
	width:120px;
	text-align:center;
	border:#CCC solid 1px;
}
</style>
</head>
<body>
<a href="#" class="orice">Calca-ma :D! </a>
</body>
</html>
        

La o prima vedere a codului (daca nu ar fi comentariile din cod) , probabil multi va intrebati "Nu inteleg, Cum e posibil sa fie alocata clasa mai intai ?".Adevarat, daca stam sa o gandim dupa ordinea logica Sus-Jos , noi practic am eliminat clasa dupa care o alocam.
Dar, atunci cand scriptul porneste mai intai o sa execute $("a").addClass("buton"); deoarece removeClass apartine unei functii care se executa doar atunci cand noi trecem cu mouse-ul peste link.

De asemenea jQuery include si cateva efecte care ne pot fi folositoare, mai multe despre acestea puteti citi pe pagina oficiala jQuery.



Da si tu un like
  


Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta

Tutoriale din Categoria JavaScript & Ajax

  Meniu Slide-Out cu Jquery, Html si CSS   -   Cum sa centrezi o fereastra/popup   -   Cum sa faci un ceas cu JavaScript   -   Ferestre in Javascript/popups   -   Verificare formular cu JavaScript   -

Tutoriale aleatorii

  Cum sa creezi litere capitale/majuscule cu CSS   -   Un simplu meniu in CSS si HTML   -   Cum sa inserezi un sunet/melodie intr-o pagina   -   Trimiterea datelor din formular la adresa de e-mail   -   Validarea unui formular   -   Tutorial Jquery pentru incepatori   -   Cum sa centrezi o fereastra/popup   -
Spune-le prietenilor tai despre acest tutorial/articol
Nume:
Email:
Email-ul prietenului tau:
Mesajul:

Comenturi

1 comenturi pana acum... (posteaza si tu)

Postat de pe data de: Monday, 12.9.13 @ 14:44pm

Comentarii:

Nume:

Email:

Comentariu:


 

*Intrebare de verificare : Raspunde la intrebarea din imaginea de mai jos ...

 
HINT : Raspunsul este din 6 litere, incepe cu r si se termina cu s


 


Important:
E-mailul nu va fi vizibil si NU va fi folosit de catre rotuts.com .
Nu sunt permise linkuri catre alte pagini.
Va rugam , comentariile sa ramana strict relationate cu topicul.
Comentariile considerate ofensive sau care nu au nici o legatura cu topicul vor fi sterse(trolling).

Folosirea codului HTML nu este permisa.
Puteti folosi BBcode pentru a va formata textul.