Szabó László István az informatika tudományok tanára: JQuery JavaScript keretrendszer

Mi az a jQuery?

A jQuery nem más, mint egy gyors és tömör JavaScript nyelvű függvénykönyvtár, ami előre megírt függvényeket tartalmaz. A hagyományos programozási nyelvektől eltérően “csak” értelmez, nem pedig végrehajt. A jQuery megpróbálja leegyszerűsíteni a bonyolultabb dolgokat a JavaScript-ből, (például az AJAX-hívások, DOM-manipulációk), így sokkal könnyebben, és gyorsabban használhatjuk azt a weboldalon.

Mire használjuk?

DOM manipuláció – Lehetővé teszi a DOM elemeinek kiválasztását, tartalmának módosítását, manipulálását.

Eseménykezelés – Lehetőségünk van kattintás, görgetés, vagy egérmozgás alapú események létrehozására.

AJAX Támogatás – Az AJAX a szerverrel való adatcserét szolgálja, segítségével frissítheted a weboldal egyes részeit anélkül, hogy újra töltenéd az egész oldalt.

Animációk, effektek – Számos beépített animációs hatással rendelkezik, amelyeket egyszerű függvényekkel hívhatsz meg.

A Dokumentum Objektum Modell (DOM)

A DOM egy objektummodell, amire a HTML és az XML is épül. A modell egymással szülő-gyerek kapcsolatban álló objektumok rendszere, melyek segítségével módosíthatjuk a HTML dokumentumok elemeit, vagy a böngésző eseményeit. A DOM nem az a HTML, amit kézzel írsz, és nem is a weboldal forráskódja, hanem konkrétan az, amit a böngésző DevTools részében látsz. Ezt lehet manipulálni, nem magát az oldal forráskódját.

jQuery betöltése a weboldalba

betöltés saját tárhelyről – A jQuery könyvtárat letöltheted a tárhelyedre, és beillesztheted a HTML kódba.

betöltés külső tárhelyről – A jQuery könyvtárat közvetlenül a code.jquery.com-ról, vagy a Google-ről is betöltheted.

Az elmélet az, hogy a jQuery gyorsabban töltődik be, ha külső tárhelyről töltjük, mert valószínűleg az már eleve tárolva van a böngészőnkben (Cache).

A függvénykönyvtárat mindkét esetben két helyre tudjuk beszúrni a HTML fájlunkban: a <head> részbe és a </body> elé. A kódot mindig a </body> elé érdemes beszúrni, hogy az a HTML kód után töltődjön le. Ha a jQuery kódot a <head> részbe rakod, akkor az az előtt fog lefutni, mielőtt létre jönne maga a HTML dokumentum, így mivel a JS kód lefutásakor a HTML fizikailag még nem létezik, módosítani/hozzáférni sem lehet.

Ha betöltöttük a weboldalba a JS könyvtárat, akkor közvetlenül utána hívjuk be a saját JS fájlunkat, amibe írjuk a weboldalra vonatkozó módosításainkat, nevezzük mondjuk custom.js-nek.

A $() szelektor

A jQuery szelektorok a dollárjelzéssel és zárójelekkel kezdődnek – $(). Ezen belül háromféle mód létezik a HTML dokumentum elemeinek kiválasztására:

Címke neve – A DOM-ban elérhető címke nevét képviseli. Például $(‘p’), $(‘div’), $(‘li’), amellyel kiválaszthatod az összes ilyen elemet a HTML dokumentumban.

Azonosító (id) – A megadott azonosítóval is elérhetőek a címkét. Például $(‘#lablec’), amellyel kiválaszthatod az egyedi elemet a HTML dokumentumban.

Osztály (class) – Az adott osztályhoz tartozó címke. Például $(‘.service’) a dokumentumban szereplő összes olyan elemet választja ki, amely ilyen osztályú.

+1 Változó – A 3 közül bármelyik megadható előzőleg meghatározott változóval is. $(valtozonev)

A fenti elemek önmagukban, vagy más szelektorokkal kombinálva is használhatók. Például: $(‘#main .service ul li’)

Hogyan hívhatunk meg jQuery függvényeket?

Az oldal nem manipulálható zökkenőmentesen, amíg a HTML dokumentum “nem áll készen“. Erre van is egy függvény a $( document ).ready(function() {…}); Ezen belül elhelyezett kód csak akkor fog futni, ha az oldal DOM-ja készen áll, ha már az összes HTML betöltődött.

[js]$(document).ready(function(){ alert( "A DOM betöltődött!" ); });[/js]

A $( window ).on( “load”, function() {…}); belsejében szereplő kód pedig akkor fog futni, ha az egész oldal (képek, iframek is, nem csak a DOM) “készen áll “. Ezt csak indokolt estben használd, mert nagyon lassítja az oldalt.

[js]$(window).on("load", function(){ alert("minden betöltődött!"); });[/js]

Egyszerű és hatékony programozási felülete, jó dokumentáltsága miatt. Az egyik legnépszerűbb JavaScript keretrendszer, rengeteg bővítmény tölthető le hozzá. Használata megkönnyíti HTML dokumentumok bejárását, manipulálását, animálását, stílusok módosítását, események kezelését, az AJAX-os kommunikációt. A benne írt kódunk böngészőfüggetlen lesz, azaz bármelyik böngésző bármelyik verziójában ugyanazt az eredményt kapjuk. A jQuery-t az utóbbi időben több projektre bontották, a jQueryUI különböző felületi komponenseket definiál, míg a jQuery Mobile mobilalkalmazások készítését könnyíti meg jQuery alapokon különböző felületi elemeket definiálva.

Használat

A jQuery használatához le kell tölteni az aktuális verziót a jQuery oldaláról, és azt a dokukmentumunk <head> részében egy <script> elemmel külső forrásként betölteni. Ekkor már lokálisan tudunk vele dolgozni.

Állandó internetkapcsolat mellett másik lehetőség egy CDN szerveren tárolt változat használata.

A következőkben ismertetett példák tesztoldalául példaalkalmazásunk egyik oldalát választottuk.

Meghívása!

A jquery használatához, mindig meg kell hívni, valamelyik jquery motor típusát, a <head> szakaszban. (Lehetőleg, a legújabbat.)

Alapismeretek elsajátításához, megismeréséhez, a következő jQuery meghívása is, megfelel:

Meghívása ugyan úgy történik, mint a JavaScript fájlok meghívása.

A jquery motor típusait, lásd a következő címeken:

1. https://code.jquery.com/jquery/

2. https://jquery.com/download/

JavaScript programunkat megírhatjuk közvetlen a html fájlban vagy külső js fájlban.

Script megírása vagy külső js fájl meghívása hól legyen, ezt a program készítője dönti el.

1. Script megírása vagy külső js fájl meghívása a head szakaszban. (Ez a gyakorlati alkalmazás.)

2. Script megírása vagy külső js fájl meghívása body szakaszban, a szövegfolyamban.

3. Script megírása vagy külső js fájl meghívása body szakaszban, a szövegfolyam végén.

A ready metódussal közöljük a program felé, hogy ebben a függvényben (function) megírt scriptünk betöltődése, az oldal tartalmának betöltődése után történjen.

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

Példák

1. Példa.

<head>

<title>jquery</title>

// Valamelyik jquery verzió meghívása.

$(document).ready(function(){

// Ide jön, vagy jönnek a jquery vagy JavaScript meghatározások.

});

</script>

</head>

<body>

<h1>Címsor</h1>

<p>html tartalom.</p>

</body>

2. Példa.

<head>

<title>jquery</title>

// Valamelyik jquery verziójának meghívása.

</head>

<body>

<h1>Címsor</h1>

<p>html tartalom.</p>

$(document).ready(function(){

// Ide jön, vagy jönnek a jquery vagy JavaScript meghatározások.

});

</script>

<p>html tartalom.</p>

</body>

3. Példa.

<head>

<title>jquery</title>

// Valamelyik jquery verziójának meghívása.

</head>

<body>

<h1>Címsor</h1>

<p>html tartalom.</p>

$(document).ready(function(){

// Ide jön, vagy jönnek a jquery vagy JavaScript meghatározások.

});

</script>

</body>

Bemutató példa.

Stílusok meghatározása, CSS fájlban:

.kek{font-weight: bold; color: blue;}

.sargah{background-color: yellow; padding-right: 5px; padding-left: 5px;}

Első példa:A jQuery, azaz, a JavaScript programot, head szakaszban írjuk meg.

<html>

<head>

<title>A jquery.</title>

$(document).ready(function(){

$("#btn01").click(function(){

$("p.cls01").addClass("kek");

});

$("#btn02").click(function(){

$("p.cls01").addClass("sargah");

});

$("#btn03").click(function(){

$("p.cls01").removeClass("kek sargah");

});

</script>

</head>

<body>

Második példa:

A jQuery, azaz, a JavaScript programot, külön js fájlban írjuk meg.

<html>

<head>

<title>A jquery.</title>

</head>

<body>

<p class="cls01"> ----------------- Ez egy jquery teszt! ----------------- </p>

<button id="btn01">Kattints ide!</button>

<button id="btn02">Kattints ide!</button>

<button id="btn03">Kattints ide!</button>

</body>

</html>

jquery_teszt nevű, és js kiterjesztésű fájlunk, megírása.

$(document).ready(function(){

$("#btn01").click(function(){

$("p.cls01").addClass("kek");

});

$("#btn02").click(function(){

$("p.cls01").addClass("sargah");

});

$("#btn03").click(function(){

$("p.cls01").removeClass("kek sargah");

});

Függvények

Nézzük meg a legfontosabb jQuery függvényeket példákkal

Érdemes létrehoznod magadnak egy HTML dokumentumot egy #box div-el, amibe teszel némi szöveget és végig próbálgatni mi történik az alábbi utasításokkal. Mindent a $( document ).ready(function() {…}); részen belülre írj, így:

[js]$(document).ready(function() {

$(‘#box’).hide();

});[/js]

[js]$(‘#box’).hide();[/js]

Elrejti a #box elemet, ha az látható.

[js]$(‘#box’).show();[/js]

Mutatja a #box elemet, ha az rejtve van.

[js]$(‘#box’).html(‘<strong>Hello</strong>’);[/js]

A #box elem tartalmát kicseréli a megadott sztringgel.

[js]$(‘#box’).append(‘<strong>Hello</strong>’);[/js]

A kijelölt #box elem tartalma után beilleszt egy elemet a DOM-ba.

[js]$(‘#box’).prepend(‘<strong>Hello</strong>’);[/js]

A kijelölt #box elem tartalma elé beilleszt egy elemet a DOM-ba.

[js]$(‘#box’).appendTo("selected");[/js]

A kijelölt #box elem után beilleszt egy elemet a DOM-ba.

[js]$(‘#box’).prependTo("selected");[/js]

A kijelölt #box elem elé beilleszt egy elemet a DOM-ba.

[js]$(‘#box’).css( "color", "red" );[/js]

A kijelölt #box elemhez inline style-t ad, így CSS attribútumokat tudunk megadni.

[js]$(‘#box’).attr( "src", "img/kep.jpg");[/js]

A kijelölt #box elem bármely attribútumának megadása, vagy módosítása. Itt egy kép src attribútumát cseréljük ki a megadott képpel.

[js]$(‘#box’).val();[/js]

Kiválasztja, vagy átállítja a value attribútumát a #box elemnek, itt a #box egy input mező, nem div

[js]$(‘#box’).text();[/js]

A #box elem szövegét adja vissza.

[js]$(‘#box’).find(‘p’);[/js]

Megtalálja a #box elem en belül az összes bekezdést.

[js]$(‘.box’).each();[/js]

Ismétli a kiválasztását az összes .box osztályú elemnek.

[js]$(‘#box’).addClass("selected");[/js]

“selected” osztály hozzáadása a #box elemhez.

[js]$(‘#box’).removeClass("selected");[/js]

“selected” osztály eltávolítása a #box elemről.

[js]$(‘#box’).toggleClass("selected");[/js]

“selected” osztály hozzáadása, ha nincs a #box elemen / eltávolítása, ha van a #box elemen.

[js]$(‘#box’).hasClass("selected");[/js]

Az eredmény igaz, ha a #box elemnek, van “selected” osztálya.

[js]$(‘#box’).children();[/js]

Kiválasztja a #box elem gyerek elemeit.

[js]$(‘#box’).closest("p");[/js]

Kiválasztja a #box elemhez legközelebbi bekezdést.

[js]$(‘li’).eq(3);[/js]

Elemek keresése index szerint. Minden gyermek elem nulláról indítja az indexét, így a fenti példában az .eq(3) azt jelenti, hogy a lista 4. eleme kerül kiválasztásra.

[js]$(‘#box’).find("li");[/js]

Keresi a kiválasztott elemnek megfelelő leszármazott elemeket.

[js]$(‘#box’).first();[/js]

Kiválasztja a testvér elemek közül az elsőt.

[js]$(‘#box’).last();[/js]

Kiválasztja a testvér elemek közül az utolsót.

[js]$(‘#box’).next();[/js]

Kiválasztja a testvér elemek közül a következőt.

[js]$(‘#box’).prev();[/js]

Kiválasztja a testvér elemek közül az előzőt.

[js]$(‘#box’).parent();[/js]

Kiválasztja az elem szülő elemét.

[js]$(‘.box’).siblings();[/js]

Kiválasztja az elem összes testvér elemét.

[js]$(‘#box’).animate();[/js]

#box elem animálása, a függvényen belül megadhatod, az animálás paramétereit

[js]$(‘#box’).fadeIn(300);[/js]

Előtűnés 300 milliszekundum időegység alatt.

[js]$(‘#box’).fadeOut(300);[/js]

Eltűnés 300 milliszekundum időegység alatt.

Eseménykezelés

Lehetőségünk van dinamikus weboldalak létrehozására események használatával. Az események olyan tevékenységek, amelyeket a webalkalmazás észlelhet. A következő példák a következők:

Egérkattintás .click()

Változás – .change()

Egy egér átfutása/lefutása egy elemről – .mouseenter(), .mouseleave()

Billentyű lenyomás (pl: Esc)- .keyup()

Betöltődés – .load()

Bővebben itt

Összefűzés

A jQuery lehetővé teszi, hogy többféle módszert is végrehajtsunk ugyanazon az elemen. Ezeket nevezzük utasításláncnak. Valójában azért hasznos mert megkímél Téged és a böngészőt, hogy többször meghívd ugyanazt az elemet.

[js]$("#box").text("Hello, world!").css("color", "blue");[/js]

A fenti kifejezést az jelenti, hogy válasszuk ki a #box elemet, adjunk hozzá a div-hez egy “Hello, world!” szöveget, majd szinezzük az egészet kékre.

A JavaScript egy programozási nyelv

Ami azt jelenti, hogy a programozás során tanult fogalmak itt is érvényesek, változók, utasítások, logikai műveletek itt is használhatóak.

[js]var boxtext = $("#box").text();[/js]

Egy boxtext változóbaan tárolom a #box div szöveges tartalmát.

Példa

<!DOCTYPE html>

<html>

<head>

<hta:application

id="MyApp"

applicationName="same"

version="1.0"

></hta:application>

</head>

<body>

<p>Anything ... </p>

</body>

$( document ).ready( function() {

console.log( "ready!" );

});

</script>

</html>

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]

Mobilalkalmazás

Alap

A következőkben egy kétoldalas egyszerű mobilfelületet látunk.

index.html

<!DOCTYPE html>

<html>

<head>

rel="stylesheet" type="text/css" />

</head>

<body>

<div data-role="header"><h1>Fejrész</h1></div>

A te legjobb oldalad

<a href="#az2" data-role="button">Második oldal</a>

</div>

</div>

<div data-role="header"><h1>Másik oldal fejrész</h1></div>

A másik weboldal

<a href="#az1" data-role="button">Vissza</a>

</div>

</div>

</body>

</html>

A mobilon megjelenő két oldal valójában egyetlen weblapon van. A két weboldalt egy-egy div elem tartalmazza. Egy oldal kezdete a data-role=„page” attribútumú div-el kezdődik.

A Dokumentum Objektum Modell (DOM)

A DOM egy standard objektummodell, amire a HTML, XML is épül. A modell egymással gyerek-szülő kapcsolatban álló objektumok rendszere. A kialakulása a böngészőháború kezdetére tehető, fejlődése a böngészők, illetve a JavaScript fejlődésével köthető össze. A DOM segítségével érhetjük el a HTML dokumentumunk elemeit, valamint a böngésző eseményeit, mint a kattintás, vagy a görgetés. A DOM-ban az elemeket node-nak, vagyis csomópontnak nevezzük.

Alap DOM szerkezet bemutatása:

<div>

<p>Szöveg</p>

</div>

div elem csomópont

– bekezdés elem csomópont

– – szöveg csomópont

jQuery letöltése

A jQuery-t a jQuery.com oldalról tölthetjük le. A jelenlegi legfrissebb verzió az 1.10.1 és a 2.0.2 ( a 2-es verzió számú jQuery abban különbözik az 1-es jelölésűtől, hogy elhagyták az IE 6, 7, 8 támogatását ). Választhatunk, hogy letöltjük és miután elhelyeztük a könyvtárunkban a fájlt, hivatkozunk rá. Vagy választhatjuk a CDN linket, amit az oldal alján találhatunk, valamint a Google Code-ról is belinkelhetünk.

Alap jQuery Kód

A JavaScript kódot, vagy a linket a külső fájlhoz két helyre tudjuk beszúrni a HTML fájlunkban: a head részbe és a záró body tag elé. Az utóbbinak a teljesítmény szempontjából van jelentősége, hiszen a kód a HTML kód után töltődik le.

Ezzel elő is jön az első probléma a JavaScript kódok futtatása során. Ha a JavaScript/jQuery kód a head részben található, akkor a kód az előtt fut le, mielőtt létre jönne maga a HTML dokumentum és annak a DOM-ja, vagyis mivel a kód lefutásakor még nem létezik, így módosítani/hozzáférni sem tudunk. Erre jelenthet megoldást a már említett záró body tag előtti elhelyezés, vagy a JavaScript-ben használatos onload eljárás jQuery megfelelője a ready() eljárás.

$( document ).ready(function() {

console.log( "ready!" );

});

A fenti kódrészlet belsejében található console.log() függvény akkor fut le, ha a dokumentum teljesen betöltött. A kijelelőben található document elnevezéssel a dokumentumot jelöljük ki, míg a ready() eljárás segítségével elérhetjük, hogy a kód az oldal letöltődése után fusson le, vagyis akkor amikor már kész a HTML szerkezet.

$(function() {

console.log( "ready!" );

});

Ugyanennek a megoldásnak létezik egy rövidebb változata, melyben a $ (jQuery definiáló karakter) után egy üres függvényt nyitunk, amiben elhelyezzük a futtatni kívánt kódot. Az üres függvény hívás egy megszokott eljárás jQuery-ben, amivel még sokat találkozunk az egyéb eljárások visszatérése során.

$(function() {

$("div").click(function() {

$("body").css("background", "#ccc");

});

Tehát, a fent bemutatott kódrészlet, miután betöltött a dokumentum kattinthatóvá teszi a div elemünket, ami a kattintás hatására az egész törzs hátterét #ccc értékűre állítja.

Források:

https://webdesigntanfolyam.com/bevezetes-a-jquery-be/

http://ade.web.elte.hu/wabp/lecke12_lap1.html

https://api.jquery.com/

https://hu.admininfo.info/desarrollo-de-aplicaciones-web-din-micas-con-jquery

http://weblabor.hu/cikkek/sablonkezeles-jquery-alatt

Szabó László István az informatika tudományok tanára

2021. május 28., péntek

JQuery JavaScript keretrendszer

Nincsenek megjegyzések:

Megjegyzés küldése