A jQuery fogalmát legelőször  a bootstrap áttekintőben említettem meg, de mi is ez valójában? Legegyszerűbben fogalmazva egy JavaScript könyvtár. Lehetőség van a következő dolgokra a segítségével:

• Lerövidíthetjük a JavaScript kódunkat, gyorsabbá, és böngésző függetlenné tudjuk alakítani azt.
• Manipulálhatjuk a HTML -ünket, mint például előhozhatunk vagy elrejthetünk dolgokat.
• Eseményeket kezelhetünk vele – ha mondjuk a felhasználó rákattint egy gombra, vagy egyéb más dolgot csinál az egérrel, az adott eseményhez rendelt akciót hajtja végre.
• animációk – például az oldalunk egy részét beúsztatjuk, vagy csak egyszerűen valamit mozgatni szeretnénk.
• AJAX – szerver kéréseket hajthatunk végre vele anélkül, hogy az oldalt frissíteni kellene.

A jQuery használatához létre kell hoznunk egy HTML fájlt, amiben megadjuk az alapvető tageket, majd a záró body tag előtt megadhatjuk a CDN, vagy saját jQuery linkelését. Először létrehozok egy gombot, amelynek meg kell adni egy ID -t.

<button id='myButton'>Click to Toggle</button>

Majd megadok egy <p> tag -et, ami az eltüntetendő szöveget tartalmazza:

<p> Lorem ipsum dolor sit amet, … </p>

Végül hozzáadom a scriptet, ami eltüntetni a kívánt részt:

<script>
$("#myButton").click(function () {
$("p").slideToggle("slow");
});
</script>

Míg ebben az esetben szimplán beraktam az oldalra a scriptet, a valóságban ez nem pont így működik. Először meg kell várni amíg az oldal betölt, majd csak utána futtatni a scriptünket. Ezt a küvetkező képpen lehet megvalósítani:

$(document).ready(function() { … });

Érdemes megemlíteni továbbá az elem kiválasztásának különböző fajtáit is. Az alap kiválasztók:

• $(„#myButton”); Ebben az esetben csak egy elemet jelöl ki
• $(„.myClass”); Kiválasztja az összes myClass elemet
• $(„button”); Az összes gomb elemet kiválasztjuk
• $(div); Az összes div elemet kiválasztjuk
• $(a); Az összes linket kiválasztjuk

Persze ennek van még több változata, minden egyes html elemhez, most csak a legáltalánosabbakat soroltam fel. A korábbi példában a click(). eljárást használtam, de ennél jóval több funkció található a könyvtárban, mint pl.:

• $("form").submit(function(){ … } Amikor egy form -ot elküldünk, mondjuk adatbázisnak
• $("#myDiv").hover(function(){ … } Ha a felhasználó az adott html elem felett tartja az egeret legyen valami esemény
• $("#myTextbox").keyup(function(){ … } Esemény történjen, amikor a felhasználó gépel a textbox -ba

Végül pedig lehetőség van az animációk fajtáját, sebességét is megadni:

• $("p").slideToggle("slow"); A korábbi példában is használt animáció, sebességét lehet állítani a „slow”, vagy „fast” -al
• $("p").slideToggle(1000, function() {  … }; Legyen valami esemény, amikor fel, vagy lefele csúszik az elem.
• $( "#book" ).slideUp( "slow", function() { … }; Adott elem eltakarása csúszó mozdulattal
• $( "#book" ).fadeToggle( "fast", function() { … }; Elem elrejtése, vagy mutatása az áttettszőség állításával