jQuery alapokkal foglalkozó cikk sorozat, első alapozó része.

Mi az a JQuery:

A JQuery egy JavaScript könyvtár (Keretrendszer, Eszköztár), amivel egyszerűsödnek a JavaScript feladatok a HTML dokumentumokon, mivel számtalan megoldást készen kapunk benne. De a legnagyobb előnye, hogy a jól megírt produktum, nagy valószínűséggel az összes böngészőben fog futni.

Milyen eszközöket ad a kezünkbe a JQuery:

• Eseménykezelések
• Effektek
• Módosítók
• Kijelölők
• Attribútum módosítók
• AJAX kérések kezdeményezéséhez és lekezeléséhez
• Felhasználói interfész
• …

A lista nem teljes mivel az elérhető Pluginekkel szinte minden feladatra találunk megoldás pl.: *.csv kezelés, audió és videó lejátszáshoz stb..

JQuery-ről általánosságban:

• Unobtrusive JavaScript (Diszkrét javaScript) kódolásra nevel
• Böngésző ‘független’ JavaScript fejlesztéseket készíthetünk.
• Rendkívül kisméretű, de nagy tudású keretrendszer (tömörítve 15 KB).
• CSS 1-3 kompatibilis.
• Nem ad kész megoldásokat, a programozó nem hiányozhat a gépezetből.
• Rengetek kész Plugin érhető el hozzá, Plugin repója van
• Rendkívül jól dokumentált, több könyv is elérhető hozzá.
• Felhasználói interfészt is elérhető hozzá.
• Folyamatos fejlesztés alatt van.
• Több nagy projekt a JQuery mellet tette le a voksát.
• Könnyen tanulható, kevés kóddal tudunk látványos produktumokat készíteni.
• MIT licenc alatt használható és tölthető le.

Mit kell tenned azért, hogy elkezd használni, tanulni a JQuery:

Ha nem programoztál még semmilyen programnyelvben ebből a cikkből nem fogsz megtanulni, viszont ha a sikerek láttán elkap a gépszíj akkor már nincs kiszállás. A JQueryt megtanulni nem nehéz, de türelem kell hozzá, viszont cserébe nagyon izgalmas utad lesz. Életet vihetsz egy statikus HTML oldalba, vagy akár GUI-val (grafikus felhasználói interfész) rendelkező szoftverektől megszokott kényelmi funkciókat plántálhatsz webes alkalmazásaidba.

Én személy szerint fontosak tartom az effekteket, de ennél is fontosabb az, hogy a honlapod a felhasználók számára egyszerűen kezelhető legyen. A JQuery-vel minden eszközöd megvan egy jó navigáció vagy egy egyszerűen használható adminisztrációs felület létrehozásához.

Az első JQuery szkripted:

Töltsd le a hivatalos oldalról a legújabb JQuery változatot, majd linkeld be a HTML dokumentumod [head] és [/head] közötti részbe. A példa letölthető, de a hivatalos oldalon is elolvashatod.

Mint a példában is láthatod, ha betöltődött a JQuery Lib utána ellenőrizzük az oldal betöltődését, majd jöhet a saját kódod.

[html][head]				[script type="text/javascript" src="jquery-1.2.6.min.js"][/script]		 [script type="text/javascript"]

       		       //ellenőrzi a dokumentum betöltődését			       $(document).ready(function(){

   			// A kódodat itt helyezd el   			alert("ok, az oldal betöltődött");

 		       });

	    [/script]    	[/head]

[body]	[!-- HTML body, Ide kerül HTML tartalom --][/body][/html]

Teszt

$("button.teszt").click(function(){     alert("ok, az oldal betöltődött!");});

Ha szkriptet letöltöd, vagy kipróbálod és minden jól ment, akkor a képen látható eredményt láthatod.

Konfliktus kezelés

A JQuery gondolt arra is, ha Te netán másik JavaScript keretrendszert is használnál és a $ ‘karakter’ foglalt volna. (Lásd Prototype JS). Fontos, hogy ennek a műveletnek a Prototype Js betöltődése előtt kell megtörténnie.

[script type="text/javascript"]   //így a $ jel helyett a $j használhatjuk   var $j = jQuery.noConflict();

   $j(document).ready(function(){		// A kódodat itt helyezd el		alert("ok, az oldal betöltődött");	});  [/script]

A megoldásoknak néhány variációját itt találod.

Az opendir Site ezt használja:

jQuery.noConflict();jQuery(document).ready(function($){    //így a $ használható továbbra is    $("div").css("border","1px solid #f00");});

Nem csak egy járható út van:

1. Prototype JS és egy nagyszerű magyar cikksorozat
2. script.aculo.us, És megint csak egy kiváló cikksorozat
3. YUI
4. MooTools
5. ExtJS
6. MochiKit
7. DojoToolKit

A tesztfájlt a letöltések között találod.

hasonló bejegyzés:

1. JavaScript 1. Minden kezdet nehéz?
2. JQuery puska