jQuery, a legelterjedtebb JS könyvtár

A jQuery egy gyors, funkcióban gazdag JavaScript könyvtár, melynek alapja a Document Object Model (DOM).

Ez egy ingyenes, nyílt forráskódú szoftver, mely 2006-ban készült New York-ban John Resig által.

A nagy IT cégek közül is sokan alkalmazzák a jQuery-t saját a projektjeikben, például a Microsoft erre építette a Visual Studióban is elérhető ASP.NET AJAX platformját. A jQuery célja az, hogy amennyire csak lehetséges, leválassza a JavaScript kódot a HTML-ből, és különböző eseményvezérlőkön, és azonosítókon keresztül kommunikáljon a weblap HTML elemeivel.

A jQuery alapja a Document Object Model (DOM) manipulációs könyvtár. A jQuery egyszerűsíti a szintaxist a DOM elemek megtalálásához, kiválasztásához és manipulálásához. Például a jQuery használható a dokumentumban lévő elem megtalálására egy bizonyos tulajdonsággal (pl. Minden h1 taggal ellátott elem), egy vagy több attribútumának megváltoztatásával (pl. Szín, láthatóság), vagy egy eseményre adott válasz ( pl. egy egérkattintással).

Azt is célul tűzték ki, hogy más, jól használt JavaScript funkciókat is beépítsen (pl. fadeIn és fadeOut, ha elrejti az elemeket, animációkat a CSS tulajdonságok manipulálásával). A jQuery fejlesztésének alapelvei a JavaScript és a HTML elválasztása.

Mivel a jQuery egy JavaScript könyvtár, ami abban segít, hogy sokkal gyorsabban és rövidebb kóddal elérjük ugyan azt a kívánt eredményt, ettől függetlenül nem helyettesítheti az egész JS-t. Minden jQuery kód JavaScript, de nem minden JavaScript kód jQuery.

Története

A jQuery-t eredetileg 2006 januárjában hozta létre John Resig, a BarCamp NYC-nél, melynek ötletét Dean Edwards korábbi cssQuery könyvtára adta. Jelenleg a Timmy Willison által vezetett fejlesztői csapat tart fent.

A jQuery-t eredetileg a CC BY-SA 2.5 alatt adták ki, és 2006-ban a MIT licenchez került. 2006 végén kettős licencet kapott a GPL és az MIT licencek alapján. Mivel ez zavart okozott, 2012-ben a GPL-t elhagyták, és most már csak az MIT-engedély alapján engedélyezték .

2015-ben a jQuery-t a legjobb 1 millió webhely 63% -ánál használták (a BuiltWith szerint), valamint az összes internetes weboldal 17%-ánál. 2018 júniusától a jQuery-t 73% -ban használják az első millió millió weboldalon, és 22,4% -ánál az összes webhelynek (a BuiltWith szerint).

Használata

A jQuery könyvtár jellemzően egyetlen JavaScript fájlként van elosztva, amely meghatározza az összes interfészt.

Ha leszeretnénk tölteni a js file-t, ide kattintva megtehetjük a jQuery oldaláról, majd a következő sorral a kódunk head részébe beillesztve használhatjuk is.

<script src="jquery.js"></script>

Ha viszont csak sima CDN linkként akarunk rá hivatkozni, annak a kódját itt találhatjuk meg.

Fontosabb selectorok

Sok olyan műveletet valósíthatunk meg röviden, amit JS-ben hosszú kódokkal tudnánk csak megírni, pl ilyen a fadeIn, fadeOut, fadeTo stb...

Míg JavaScriptben getElementsByClassName("example") kóddal tudunk hivatkozni egy osztályra, jQuery-ben elég annyit írnunk, hogy $(".example), itt a '$' helyettesíti a 'jQuery' szót, hogy még rövidebb és átláthatóbb legyen a kódunk, az idézőjelbe írt karakter pedig jelzi, hogy mire akarunk hivatkozni (ID, Class, Html tag), mint a CSS-ben.

Példának pár fontosabb selector, hogyan érhetjük el őket:

ID alapján - $("#example");
Osztály alapján - $(".example");
HTML tag alapján - $("p");
Osztály és HTML tag alapján - $(".example p");
Az osztály alapján, amit épp kiválasztunk - $(".example", this);

Fontosabb függvények

Pár fontosabb függvény, amiket szinte mindig használunk:

addClass(), removeClass(), hasClass() - adott elemhez hozzáad, elvesz vagy ellenőrzi, hogy van e rajta olyan osztály
attr() - egy adott elemnek lehet vele bizonyos tulajdonságait könnyedén beállítani
change() - a change esemény akkor valósul meg, amikor egy bizonyos elemnek az értéke megváltozik (csak input, textarea és select html tageknél működik)
click() - amikor a megadott elemre rákattintunk, akkor valósul meg
css() - egy adott elemnek tudjuk beállítani a css értékét, vagy visszakapni azt
delay() - időzítést tudunk vele beállítani
fadeIn(), fadeOut(), fadeTo(), fadeToggle() - animált megjelenítés, eltüntetés
hover() - az elemre való egér ráhúzásakor lép életbe
keypress() - adott gomb lenyomásakor lép életbe
mousedown() - addig megy, amíg az egér gomb lenyomva tartva marad
resize() - amikor az oldal átméreteződik, akkor lép életbe
scroll() - amikor az oldalon görgetés történik, akkor lép életbe
show(), hide() - megmutatja, elrejti az adott elemet
slideUp(), slideDown(), slideToggle() - animáltan kinyitja, összecsukja az adott elemet
trigger() - megvalósítja egy adott elemnek azt az eseményét, ami pl. egy kattintásra vagy gomblenyomásra történne

jQuery-re a következő jellemzők igazak:

CSS szelektorokon alapul, amelyek elemneveket és attribútumokat használnak, mint például az ID és a Class
Eventek
Effektek és animációk
Ajax
Bővíthetőség pluginokon keresztül
Segédprogramok
Sokfajta böngésző kompatibilitás