A jQuery egy JavaScript könyvtár. Segítségével egyszerűbben tudunk dinamikus weboldalt készíteni! A jQuery számos előre elkészített függvényt és eszközöket biztosít, amelyekkel gyorsabban és hatékonyabban tudunk dolgozni. Mire lehet használni?
DOM manipuláció: Egyszerűen kiválaszthatunk HTML elemeket, módosíthatjuk a tartalmukat, stílusukat és az eseménykezelőket.
Animációk: Készíthetünk látványos animációkat a weboldal elemein.
AJAX: Aszinkron kérések küldésével dinamikusan tölthetünk be új tartalmakat a weboldalra az újratöltés nélkül.
Eseménykezelés: Egyszerűen kezelhetjük az felhasználói interakciókat (kattintások, görgetés stb.).
Számos plugin áll rendelkezésre, amelyek további funkciókat adnak a jQuery-hez.
A jQuery használatához szükségünk lesz a jQuery könyvtárra, amit vagy letöltünk és lokálisan tároljuk, vagy CDN linket használunk. Linkek a jQuery weblapján elérhetőek!
A jQueryben is szelektorokat használunk. Tehát kiválaszthatunk html taget, ID-t, class-t, de kombinálhatjuk is őket.
html tag
|
1 2 |
// Kiválasztunk minden <p> elemet és kék betűszínt állítunk be $("p").css("color", "blue"); |
class
|
1 2 3 4 5 6 7 |
// osztály <p class="pelda">Bekezdés osztállyal...</p> $(".pelda").css("color", "black"); // lehet kombinálni is őket <ul class="teendok">Teendőim</ul>`<br> $("ul.teendok").append("<li>Gykorolni a jQuery-t</li>"); |
ID
|
1 2 3 4 5 6 7 |
// ID használata <li id="azon">Lista elem, id-val</li> $("#azon").replaceWith("<p>Példa elem.</p>"); // ID és sima HTML tag kombinációja <h1 id="foCim">Ez az oldal címe</h1> $("h1#foCim").css("font-size", "2em"); |
Attributom alapján is beazonosíthatjuk a módosítani kívánt elemet: ([attributeName=”value”]).
|
1 2 3 4 5 6 7 |
<input name="beviteliMezo" /> $("[name='beviteliMezo']").value("Teszt"); <input name="masikMezo" />`<br> <button name="masikMezo">Button</button> $("input[name='masikMezo']").remove(); // beviteli mezőt törli |
Egyéb lehetőségek:
Pszeudo-osztályok: :first, :last, :even, :odd, :not(), :has(), :contains() stb.
Filterek: .filter(), .not(), .has()
Kombinatorok: ,, >, +, ~
|
1 2 3 4 5 |
$("li:first").css("color", "green"); // első listaelem legyen zöld $("li:last").css("color", "yellow"); // utolsó listaelem legyen sárga // lehet egyszerre több szelektorunk is $("#elso,#masodik,#marmadik").css("background-color","blue"); |