A jQuery segítségével nagyon egyszerű és gyors az Ajax-alapú alkalmazás létrehozása.
A jQuery-t eredetileg John Resig hozta létre 2006 elején. A jQuery projektet jelenleg a fejlesztők egy elosztott csoportja tartja karban és karbantartja nyílt forráskódú projektként.
A jQuery segítségével sok időt és erőfeszítést takaríthat meg. Tehát add hozzá ezt az oldalt a kedvenceidhez, és folytasd az olvasást
A jQuery segítségével sok más dolgot is megtehet.
A lista ezzel nem ér véget, sok más remek dolgot is megtehetsz a jQuery segítségével.
Számos előnye van annak, hogy miért érdemes a jQuery használatát választani:
A kezdéshez először töltsük le a jQuery egy példányát, majd vegyük bele a projektünkbe. A jQuery két verziója letölthető: tabletta e nincs összenyomva .
A tömörítetlen fájl alkalmasabb fejlesztésre vagy hibakeresésre; míg éles használatra a kicsinyített és tömörített fájlt javasoljuk, mert sávszélességet takarít meg, és a kisebb fájlméretnek köszönhetően javítja a teljesítményt.
A jQuery-t innen tudjuk letölteni: https://jquery.com/download/
Miután letöltötte a jQuery fájlt, láthatja, hogy annak js kiterjesztése van, azaz JavaScript-fájl. Valójában a JQuery nem más, mint egy JavaScript könyvtár, így a jQuery fájlt a HTML dokumentumba az elemmel együtt ugyanúgy, mint a szokásos JavaScript-fájlokat.
<head>
<title>Simple HTML Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Ne felejtse el, hogy az egyéni szkriptek előtt mindig szerepeltesse a jQuery fájlt; ellenkező esetben a jQuery API-k nem lesznek elérhetők, amikor a jQuery kód megpróbál hozzáférni.
Amint azt észrevette, az előző példában kihagytuk az attribútumot type="text/javascript" a címke belsejében . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiHTML5-ben és minden modern böngészőben befejeződött.
Alternatív megoldásként beágyazhatja a jQuery-t a dokumentumba a szabadon elérhető CDN (Content Delivery Network) hivatkozásokon keresztül, ha inkább elkerülné a fájl letöltését.
A CDN-ek teljesítményelőnyt kínálhatnak a betöltési idő csökkentésével, mivel a jQuery-t több szerveren tárolják szerte a világon, és amikor egy felhasználó kéri a fájlt, a legközelebbi kiszolgálóról lesz kiszolgálva.
Ennek megvan az az előnye is, hogy ha a weboldal látogatója már letöltötte a jQuery egy példányát ugyanarról a CDN-ről, miközben más oldalakat látogatott meg, akkor nem kell újra letöltenie, mivel az már a böngésző gyorsítótárában van.
Ebben az esetben a következőket kell írnia:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>A jquery projekt által biztosított CDN mellett a jQuery via-t is beillesztheti Google e microsoft cdn.
Miután látta a jQuery-könyvtár céljait és azt, hogy hogyan helyezze bele a dokumentumba, itt az ideje, hogy a jQuery-t a gyakorlatba is átültessük.
Most hajtsunk végre egy egyszerű jQuery műveletet a fejléc szövegének színének megváltoztatásával az előszínrőldefifeketétől zöldig színezett.
<head>
<title>My First jQuery Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#00ff00");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>A kódban egy egyszerű jQuery műveletet végeztünk a fejléc, azaz az elem színének megváltoztatásával a jQuery elem választójával és a css() metódussal, amikor a dokumentum készen van, ez a dokumentum kész eseménye.
A jQuery utasítás általában dollárjellel kezdődik ( $) és pontosvesszővel ( ;).
A jQueryben a dollárjel ( $) csak a jQuery álneve. Tekintsük a következő példakódot, amely a legegyszerűbb jQuery utasítást mutatja be.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>A példa egyszerűen egy figyelmeztető üzenetet jelenít meg "Hello I'm a JQuery sign” a felhasználónak. Lássunk néhány funkciót:
<script>: A jQuery csak egy JavaScript könyvtár, a jQuery kód elhelyezhető az elemen belül <script>, vagy elhelyezheti egy külső JavaScript fájlba;$(document).ready(handler); kész eseményként ismert. Hol van handler ez egy olyan függvény, amely a végrehajtandó metódusnak kerül átadásra, amint a dokumentum készen áll, azaz amikor a DOM-hierarchia teljesen fel van építve.A jQuery módszer ready() általában anonim funkcióval együtt használják. Tehát a fenti példa gyorsírással is leírható, így:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Egy függvényen belül jQuery utasításokat írhat az alapvető szintaxist követő műveletek végrehajtásához, például:
$(selector).action();Hol van, $(selector) alapvetően a HTML elemeket választja ki a DOM fából, így kezelhető és action() néhány műveletet alkalmazni a kiválasztott elemeken, mint például a CSS tulajdonság értékének megváltoztatása, vagy az elem tartalmának beállítása stb.
Most nézzünk egy másik példát, amely beállítja a bekezdés szövegét:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>A jQuery példa a választóra vonatkozik p, és ez kiválasztja az összes bekezdést, majd a metódust text() állítsa be a bekezdés szöveges tartalmát a „Hello World!".
Az előző példában szereplő bekezdés szövege automatikusan lecserélődik, amikor a dokumentum elkészül. De nézzük meg, hogyan kell ezt megtenni abban az esetben, ha a jQuery kód futtatása előtt szeretne végrehajtani egy műveletet a bekezdés szövegének helyettesítésére.
Vegyünk egy utolsó példát:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>Ebben a példában a bekezdés szövege csak akkor cserélődik le, ha egy kattintás történik a " gombraReplace Text", ami egyszerűen azt jelenti, amikor a felhasználó rákattint erre a gombra.
Az azonosítóválasztóval egyetlen egyedi azonosítóval rendelkező elemet választhat ki az oldalon.
Például a következő jQuery kód kiválaszt és kiemel egy ID attribútummal rendelkező elemet id="markid", amikor a dokumentum készen áll.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Az osztályválasztóval egy adott osztályhoz tartozó elemeket lehet kiválasztani.
Például a következő jQuery kód kijelöli és kiemeli a class attribútummal rendelkező elemeket class="markclass", amikor a dokumentum készen áll.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Az elemválasztóval tételnév alapján lehet elemeket kiválasztani.
Például a következő jQuery kód kijelöli és kiemeli az összes bekezdést, azaz az elemeket "<p>" a dokumentumból, ha az készen van.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Az attribútumválasztó segítségével kiválaszthat egy elemet annak egyik HTML-attribútuma, például egy hivatkozás attribútuma alapján targetvagy egy bemenet attribútuma typestb.
Például a következő jQuery kód kijelöli és kiemeli az összes szövegbevitelt, például elemeket "<input>" a type="text", amikor a dokumentum készen áll.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>A CSS-választókat kombinálhatja is, hogy még pontosabb legyen a kiválasztás.
Például kombinálhatja az osztályválasztót egy elemválasztóval, hogy egy bizonyos típusú és osztályú elemeket keressen a dokumentumban.
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>A választókon kívül definiti, a jQuery saját egyéni választóval rendelkezik, amely tovább javítja az oldal elemeinek kiválasztását.
<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>Az eseményeket gyakran a weboldallal való felhasználói interakció váltja ki, például amikor egy hivatkozásra vagy gombra kattint, szöveget ír be egy beviteli mezőbe vagy szövegmezőbe, kiválaszt egy kijelölőmezőt, megnyom egy billentyűt a billentyűzeten, mozgatja az egérmutatót stb. Bizonyos esetekben maga a böngésző is indíthat eseményeket, például oldalbetöltési és letöltési eseményeket.
A jQuery javítja az alapvető eseménykezelési mechanizmusokat azáltal, hogy eseménymetódusokat kínál a legtöbb natív böngészőeseményhez, ezek közül néhány ready(), click(), keypress(), focus(), blur(), change()stb.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Általában az eseményeket négy fő csoportba sorolhatjuk:
Az egéresemény akkor indul el, ha a felhasználó rákattint egy elemre, mozgatja az egérmutatót stb.
Íme néhány gyakran használt jQuery módszer az egéresemények kezelésére.
click()A módszer click() csatoljon egy eseménykezelő funkciót az esemény kiválasztott elemeihez "click“. A kapcsolt funkció akkor fut le, amikor a felhasználó rákattint az elemre. A következő példa elrejti az elemeket <p> egy oldalon, ha rákattint.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()A módszer dblclick() csatoljon egy eseménykezelő funkciót az esemény kiválasztott elemeihez "dblclick“. A csatolt funkció akkor fut le, amikor a felhasználó duplán kattint az elemre. A következő példa elrejti az elemeket <p> amikor duplán kattint rájuk.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()A módszer hover() egy vagy két eseménykezelő függvényt csatolhat a kiválasztott elemekhez, amelyek akkor futnak le, amikor az egérmutató mozog az elemekből. Az első funkció akkor fut, amikor a felhasználó az egérmutatót egy elem fölé helyezi, míg a második funkció akkor fut, amikor a felhasználó eltávolítja az egérmutatót az adott elemről.
A következő példa kiemeli az elemeket <p> amikor ráhelyezi a kurzort, a kurzor eltávolításakor a kiemelés eltűnik.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()A módszer mouseenter() eseménykezelő funkciót csatol a kiválasztott elemekhez, amely akkor fut le, amikor az egér belép egy elembe. A következő példa osztálykiemelést ad az elemhez <p> amikor ráhelyezi a kurzort.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()A módszer mouseleave() eseménykezelő funkciót csatol a kiválasztott elemekhez, amely akkor fut le, amikor az egér elhagyja az elemet. A következő példa eltávolítja az osztály kiemelését az elemből <p> amikor eltávolítja róla a kurzort.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Billentyűzet esemény lép fel, amikor a felhasználó megnyom vagy elenged egy billentyűt a billentyűzeten. Nézzünk meg néhány gyakran használt jQuery módszert a billentyűzetesemények kezelésére.
keypress()A módszer keypress() eseménykezelő funkciót csatol a kiválasztott elemekhez (általában űrlapvezérlők), amely akkor fut le, amikor a böngésző billentyűzetes bevitelt kap a felhasználótól. A következő példa egy üzenetet jelenít meg az esemény aktiválásakor keypress és hányszor aktiválódik, amikor megnyomja a billentyűt a billentyűzeten.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>A billentyűleütési esemény hasonló a billentyűlenyomás eseményhez, kivéve a módosító és a nem nyomtatható billentyűket, mint például a Shift, Esc, Backspace vagy Delete, nyílbillentyűket stb. billentyűleütési eseményeket indítanak el, de billentyűleütési eseményeket nem.
keydown()A módszer keydown() eseménykezelő funkciót csatol a kiválasztott elemekhez (általában űrlapvezérlők), amely akkor hajtódik végre, amikor a felhasználó először megnyom egy billentyűt a billentyűzeten. A következő példa egy üzenetet jelenít meg az esemény aktiválásakor keydown és hányszor aktiválódik, amikor megnyomja a billentyűt a billentyűzeten.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()A módszer keyup() eseménykezelő funkciót csatolhat a kiválasztott elemekhez (általában űrlapvezérlők), amely akkor fut le, amikor a felhasználó elenged egy billentyűt a billentyűzeten. A következő példa egy üzenetet jelenít meg az esemény aktiválásakor keyup és hányszor aktiválódik, amikor megnyom és elenged egy billentyűt a billentyűzeten.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Űrlapesemény akkor aktiválódik, amikor egy űrlapvezérlő megkapja vagy elveszíti a fókuszt, vagy amikor a felhasználó módosít egy űrlapvezérlő értéket, például szöveget ír be a szövegbevitelbe, kiválaszt egy lehetőséget a kijelölőmezőben stb. Íme néhány gyakran használt jQuery metódus az űrlapesemények kezelésére.
change()A módszer change() eseménykezelő függvényt csatolni az elemekhez <input> és akkor kerül végrehajtásra, ha az értéke megváltozik. A következő példa figyelmeztető üzenetet jelenít meg, amikor kiválaszt egy lehetőséget a legördülő választómezőben.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>A kattintónégyzetek, jelölőnégyzetek és rádiógombok esetében az esemény azonnal aktiválódik, amikor a felhasználó kiválasztja az egeret, de szövegbevitel és szövegterület esetén az esemény akkor aktiválódik, amikor az elem elveszti a fókuszt.
focus()A módszer focus() eseménykezelő függvényt csatol a kiválasztott elemekhez (általában vezérlők és űrlap-összerendelések), amely akkor fut le, amikor fókuszba kerül. A következő példa üzenetet jelenít meg, amikor a szövegbevitel fókuszba kerül.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()A módszer blur() eseménykezelő függvény csatolása olyan elemek kialakításához, mint pl <input>, <textarea>, <select> amelyet akkor hajtanak végre, amikor elveszti a fókuszt. A következő példa egy üzenetet jelenít meg, ha a szövegbevitel elveszíti a fókuszt.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()A módszer submit() eseménykezelő függvényt csatolni az elemekhez <form> amely akkor fut le, amikor a felhasználó megpróbál elküldeni egy űrlapot. A következő példa egy üzenetet jelenít meg az űrlap elküldésekor megadott érték alapján.
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>Az események olyan helyzetben is elindulnak, amikor a DOM (Document Object Model) oldal készen áll, vagy amikor a felhasználó átméretezi vagy görgeti a böngészőablakot stb. Íme néhány gyakran használt jQuery módszer az ilyen típusú események kezelésére.
ready()A módszer ready() meghatároz egy függvényt, amelyet akkor kell végrehajtani, ha a DOM teljesen betöltődött.
A következő példa lecseréli a bekezdés szövegét, amint a DOM-hierarchia teljesen fel van építve és készen áll a manipulációra.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()A módszer resize() eseménykezelő függvényt csatolni az ablakelemhez, amely akkor fut le, amikor a böngészőablak mérete megváltozik.
A következő példa megmutatja a böngészőablak jelenlegi szélességét és magasságát, amikor megpróbálja átméretezni a sarkai húzásával.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()A módszer scroll() eseménykezelő funkciót csatolni az ablakhoz vagy a iframe és görgethető elemek, amelyek akkor futnak le, amikor az elem görgetési pozíciója megváltozik.
A következő példa egy üzenetet jelenít meg a böngészőablak görgetése közben.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
A finom motoros készségek színezéssel történő fejlesztése felkészíti a gyerekeket olyan összetettebb készségekre, mint az írás. Kiszínezni…
A haditengerészeti szektor igazi világgazdasági hatalom, amely egy 150 milliárdos piac felé navigált...
Múlt hétfőn a Financial Times bejelentette, hogy megállapodást köt az OpenAI-val. Az FT engedélyezi világszínvonalú újságírását…
Emberek milliói fizetnek a streaming szolgáltatásokért, havi előfizetési díjat fizetve. Általános vélemény, hogy Ön…