szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:jquery|< jQuery]]

====== jQuery könyvtár ======

  * **Szerző:** Sallai András
  * Copyright (c) 2012, Sallai András
  * Szerkesztve: 2012, 2013, 2014, 2016, 2021, 2022, 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Bevezetés =====

==== Mi a jQuery? ====


A jQuery egy JavaScript **programozói könyvtár**, amelyet **John Resig** kezdett
fejleszteni. Első kiadása **2006**-ban volt. Licencét tekintve
nyílt forráskódú, kettős licenccel: GPL/MIT; 

Nagyon elterjedtnek tekinthető, segítségével könnyen bejárható egy
HTML oldal DOM-ja. Effekteket és animációt adhatunk HTML elemeinkhez.
Számtalan plugint írtak hozzá. 


==== Használat ====

Vagy letöltjük, vagy hivatkozunk a weboldalon található URL-re.
  * https://jquery.com (A jQuery honlapja)

A jQuery JavaScript programozói könyvtár letölthető vagy használható
CDN-ről.

Ha npm vagy yarn csomag és projektkezelőt használunk, akkor így is telepíthetjük: 
  npm install jquery
vagy:
  yarn add jquery



<code html index.html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Első jQuery alap weblapom</title>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="app.js"></script>

</head>
<body>

<!-- Ide jönnek a weboldal elemei -->
  
</body>
</html>
</code>

Ha a script elemet a weboldal fejlécébe tesszük, ügyeljünk
arra, hogy a HTML oldal elemei még nem töltődtek be, amikor
végrehajtódnak saját JavaScript utasításaink. 

Lehetőség van az oldal betöltődést figyelni, vagy 
írjuk a script elemet a weboldal aljára, az alábbi mintának
megfelelően.

<code html index.html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Első jQuery</title>

</head>
<body>

<!-- Ide jönnek a weboldal elemei -->

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="app.js"></script>

</body>
</html>
</code>

==== A JavaScript és a jQuery ====

Jó kérdés lehet, hogy miért jó számunkra a jQuery.

A következő példákban összehasonlítjuk egy szimpla JavaScript és egy jQuery megoldást.
Egy "p" elem tartalmát szeretnénk megváltoztatni. 

JavaScript megoldás:
<code javascript>
document.getElementsByTagName("p")[0].innerHTML = "Új tartalom";
</code>


jQuery megoldás:
<code javascript>
$("p").html("Új tartalom");
</code>

A jQuery jóval egyszerűbb. A jQuery filozófiája: "**írjunk kevesebbet, csináljunk többet**".



==== Fejlesztő eszközök ====

A fejlesztéshez szükségünk lesz egy kódszerkesztőre, például **Visual Studio Code**, és valamilyen használható böngészőre, például **Google Chrome**, Firefox, Vivaldi. Használjuk a böngészők **fejlesztő eszköz**eit. 
A Google Chrome és Firefox böngészőben bekapcsolható a F12-vel.


===== Szelektorok =====

==== DOM ====

A JavaScript és a jQuery használatához is fontos ismernünk a DOM fogalmát. 
A DOM a **Document Object Model** szavakból alkotott betűszó. Dokumentum objektum
modellnek fordítható. A HTML esetén a DOM a dokumentum szerkezetét meghatározó
elemek, mint html, head, body, h1, p, ul, li stb. A HTML DOM egy hierarchikus
faszerkezetben ábrázolható.

{{:oktatas:web:html:html_dom_pelda01.png|}}

==== A jQuery() függvény  ====


A jQuery használatához a jQuery() függvényt mindig meg kell meghívni. 

  jQuery()

Ennek egyszerűbb változata a "$". Vagyis így hívjuk a függvényt:
  $()

Így rövidebben tudjuk meghívni a jQueryt. 

==== Szelektorhasználat ====

A jQuery használata során mindig ki kell választanunk melyik HTML elemre fog vonatkozni az
adott tevékenység.


A függvénynek megadhatunk egy karaktersorozatot, vagy néhány előre definiált
objektumot:
  * <nowiki>"#azonosító"</nowiki>
  * <nowiki>".osztály"</nowiki>
  * <nowiki>this</nowiki> (eseményt kiváltó elem)
  * <nowiki>document</nowiki>
  * <nowiki>"elem"</nowiki>
  * <nowiki>"elem[tulajdonság=érték]"</nowiki>

A paraméter mondja meg, mire vonatkozzon a beállítás. 
A CSS-hez hasonlóan használhatjuk azonosítóra és osztályra, 
kettős-kereszt vagy pont karakter segítségével.
Használhatjuk elemekre is, vagy azok tulajdonságaira.

A példa kedvéért legyen egy weblapon a következő div:

<code html>
<div id="elso">

</div>
</code>

A div-re így hivatkozhatunk:
<code javascript>
jQuery("#elso");
</code>
vagy
<code javascript>
$("#elso");
</code>

A jQuery() vagy $() önálló objektumként viselkedik, ami
számunkra annyit jelent, hogy végrehajthatók rajta metódusok és vannak tulajdonságaik. 

A jQuery() objektum egyik tulajdonsága a **length**. Ezt megvizsgálva, tájékozódhatunk, hogy
egy adott azonosító vagy osztály létezik-e.

<code javascript>
jQuery("#elso").length
</code>

Azonosítók esetén a hossz 0 vagy 1 lehet. Ha weblapon létezik az adott azonosító, akkor 1-t kapunk, ha nem létezik 0-t. 

<code javascript>
if(jQuery("#elso").length)
    alert("Van ilyen");
else
    alert("Nincs ilyen);
</code>

Osztályok vizsgálata esetén kaphatunk 1-nél nagyobb számot is. 
Megkapjuk, hogy az adott weboldalon hányszor szerepel a kérdéses osztály. 


<code html>
<p class="ketto">Valami</p>
<p class="ketto">Valami</p>
</code>

<code javascript>
jQuery(".ketto").length
</code>
Eredmény: 2
===== Eseménykezelés =====

==== Az eseményekről ====

^  Esemény  ^  Metódus  ^  Leírás  ^
| click | .click() | kattintás  |
| keydown | .keydown() | egy billentyű le lett nyomva  |
| keypress | .keypress() | egy billentyű le lett nyomva |
| keyup | .keyup() | egy billentyű fel lett engedve  |
| mouseover | .mouseover() | mozgás az objektum felett |
| mouseout | .mouseout() | az egér elhagyja jelölt elemet és a gyermek elemeket is |
| mouseenter | .mouseenter() | az egér a jelölt elem felé kerül |
| mouseleave | .mouseleave() | az egér elhagyja a jelölt elemet  |
| scroll | .scroll() | görgethető elem esetén görgetés történik  |
| focus | .focus() | a fókusz megszerzése |
| blur | .blur() | a fókusz elvesztése |
| resize | .resize() | az objektum át lett méretezve |

===== Submit esemény =====

A submit eseményt az űrlapon értelmezzük a gomb helyett. 

<code javascript>
  $('#valamiform').on("submit", function(e) {
    e.preventDefault(); // Elkapja a submit eseményt

    //amit tenni szeretnék

  });
</code>

==== A lap betöltésének eseménye ====

Ha beillesztettük a jQuery elérhetőségét a HTML forrásunkba, célszerű
ellenőrizni, hogy működik-e. Erre legalkalmasabb, ha kezeljük a weblap
betöltése kész eseményt. Ezt a ready() metódussal tudjuk megtenni.
Szelektornak a document nevű objektumot adjuk meg, amely automatikusan
létezik a böngészőben.

<code javascript>
$(document).ready(function(){
    alert("Működik");
});
</code>


A ready() függvénynek átadhatunk egy paramétert, amely lehet egy függvény, ami
végrehajtódik, ha betöltődött a dokumentum. A példánkban ez egy egyszerű
párbeszédablak az alert().


==== Egyszerű eseménykezelés ====

Egy nyomógombnak szeretnénk a kattintását figyelni.

<code html>
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>JQuery</title>

</head>
<body>

<input type="button" value="Mutat" id="gomb1" />
<script src="jquery-1.6.3.js"></script>
<script src="gomb.js"></script>

</body>
</html>
</code>



<code javascript gomb.js>
$('#gomb1').click(function() {
    $('body').text('Helló Világ');
});
</code>


==== Egy elem tartalma ====


<code html>
<div id="doboz1">Lorem ipsum</div>
</code>

<code javascript>
var tartalom = $("#doboz1").text();
alert(tartalom);
</code>

A "Lorem ipsum" szöveget kapjuk.





==== Eseménykezelés másként ====

Minden p elem elrejtése:
<code javascript>
$("p").on("click", function () {
	$("p").hide();
});
</code>

Annak a p elemnek elrejtése, amelyre kattintottunk:
<code javascript>
$("p").on("click", function () {
	$(this).hide();
});
</code>


A lamba kifejezéssel létrehozott névtelen függvény
nem ismeri a this kulcsszót. Ezért:
<code javascript>
$('p').click( (event) =>{
    $(event.currentTarget).hide();
});
</code>




Adott p elemre kattintva, annak háttérszíne megváltozik:
<code javascript>
$("p").on("click", function () {
	$(this).css("background-color","blue");
	$(this).css("color","white");
});
</code>


===== Effektek =====
==== Rejtés ====

<code html>
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>JQuery</title>

</head>
<body>

<input type="button" value="Rejt" id="gomb1" />
<div id="uzenet">Üzenetem</div>

<script src="jquery-1.6.3.js"></script>
<script src="gomb.js"></script>

</body>
</html>
</code>



<code javascript>
$('#az').hide();
</code>

<code javascript>
$('#az').hide(400); //400 milliszekundum alatt
</code>


Mutata
<code javascript>
$('#az').show();
</code>

<code javascript>
$('#az').show(400);
</code>





<code javascript gomb.js>
$('#gomb1').click(function() {

	$('#uzenet').toggle('fast');

	var ertek = $('#gomb1').attr('value');	
	if(ertek == "Rejt")
	    $('#gomb1').attr('value', 'Mutat');
	else if(ertek == "Mutat")
	    $('#gomb1').attr('value', 'Rejt');
});
</code>


Néha szükség van arra, hogy ellenőrizzük egy elem milyen állapotban van. Látható vagy rejtett?
A következő részlet ezt valósítja meg:

<code javascript>
if($("#az").is(":visible"))
	$("#az").hide();
</code>
A példában meg is vizsgáljuk egy if() segítésével, és ha látható volt, akkor elrejtjük.

==== Fakítás ====

A dobozok fakítását a fadeOut() metódussal
végezzük. Az újra megjelenítést, a fadeIn()
metódussal. A kettő közötti váltásra
a fadeToggle() metódus alkalmas.


<code html index.html>
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>JQuery</title>

</head>
<body>

<p id="uzenet" style="display:none">Bekezdés</p>

<script src="jquery.js"></script>
<script src="sajat.js"></script>
</body>
</html>

</code>


<code javascript sajat.js>
$(document).ready(function(){
	$("#uzenet").fadeOut(5000);
});
</code>


A fadeOut() bemenő paramétere milliszekundumban megadott érték, de lehet 
"fast", "slow" karaktersorozat is. 

A kifakítás (eltüntetés) a fadeOut() metódussal
lehetséges, a megjelenítés a fedeIn() metódussal. 
Váltás a fadeToggle() metódussal.


=== Fakítás váltással ===

<code javascript script.js>
$("#rejto").click(function(){
	$("#szoveg").fadeToggle(5000);
});
</code>



<code html>
<input type="button" id="rejto" value="Rejt" />
<p id="szoveg">Lorem ipsum</p>
</code>



A fadeToggle() tipikus problémája, hogy ha még tart az 
animált megjelenítés vagy rejtés, és közben történik egy
újabb kattintás, akkor második kattintásnak a hatása,
csak az animáció befejezése után érvényesül. 
Erre megoldást jelenthet stop() függvény:

<code css style.css>
#doboz {
    width: 200px;
    height: 200px;
    background-color: navy;
}
</code>

<code html index.html>
...
<div id="kapcsolo">Mehet</div>
<div id="doboz">Lorem ipsum</div>

...
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="script.js"></script>
...
</code>

Leállítjuk az előző effektet, és váltunk:

<code javascript script.js>
$("#kapcsolo").click(function(){
   $("div").stop().fadeToggle(1000);
});  

</code>

===== Szelektorok mélyebben =====

Az összes p elem kiválasztása:
<code javascript>
$("p").click(function(){
	alert("Kattintás")
});
</code>



Csak az első p elem kiválasztása:
<code javascript>
$("p:first").text("Lorem ipsum");
</code>


Csak az utolsó p elem kiválasztása:
<code javascript>
$("p:last").text("Lorem ipsum");
</code>



A "be" azonosítójú elem kiválasztása:
<code javascript>
$("#be").click(function(){
	alert("Kattintás")
});
</code>


Az összes elem kiválasztása:
<code javascript>
var elemek = $("*").length
alert(elemek)
</code>


Az összes ul-en belüli elemek száma:
<code javascript>
var elemek = $("ul").find("*").length;
alert(elemek);
</code>


A gyermek elemekben keresünk egy olyan elemet, amelynek osztálya "masodik".
Ennek az elemnek a hátterét pirosra állítjuk:
<code jquery>
var elem = $('div').find('.masodik');
elem.css("background-color","red");
</code>


Egy lista elemhez kapcsolódó elemek: 
<code javascript>
//A lista első eleme
var listaElem = $('li').first()

//Az elem szülője
var szulo = listaElem.parent();

//Az elem gyermekei
var gyermekek = listaElem.children();

//A következő testvérelem
var kovetkezoTestver = listaElem.next();

//Az első listaelem testvérei
var testverek listaElem.siblings();

//Azok az őselemek, amelyek az adott osztályba tartoznak
var osok = listElem.parents(".osztalynev");

//A legközelebbi őselem, amely az adott osztályba tartozik
var os = listElem.closest(".osztalynev");


</code>


===== Űrlap tartalma =====

==== Bevitelimező tartalma ====

<code html index.html>
<label>Név</label>
<input type="text" id="name"><br>

<button id="getNameButton">Lekér</button>

<script src="./jquery-3.6.0.js"></script>
<script src="app.js"></script>
</code>


Érték kiolvasása:
<code javascript sajat.js>
$('#getNameButton').click(()=>{
    let name = $('#name').val();
    console.log(name);
    $('#name').val('');
});
</code>

==== Legördülő listadoboz kiválasztottja ====

Adott egy legördülő listadoboz:
<code html>
<select id="jarmu">
    <option value="1">Opel</option>
    <option value="2">BMW</option>
    <option value="3">Ford</option>
    <option value="4">Citroen</option>
</select>
</code>


A kiválasztott option elem value értékének lekérdezése:
<code javascript>
console.log($('#jarmu').val());
</code>

A kiválasztott érték lekérdezése:
<code javascript>
console.log($('#jarmu option:selected').text()); 
</code>




A komplett példa:

<tabbox index.html>

<code html index.html>

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<label for="jarmu">Járművek</label>
<select id="jarmu">
    <option value="1">Opel</option>
    <option value="2">BMW</option>
    <option value="3">Ford</option>
    <option value="4">Citroen</option>
</select>
<br>
<button id="getNameButton">Lekér</button>

<script src="./jquery-3.6.0.js"></script>
<script src="app.js"></script>

</body>
</html>

</code>


<tabbox app.js>

<code javascript app.js>
$('#getNameButton').click(()=>{
    console.log($('#jarmu').val());
    console.log($('#jarmu option:selected').text());    
});

</code>


</tabbox>

<html>
<br><br>
</html>
==== Jelölőnégyzet ====

<code html>
<h1>Bevásárlólista</h1>

<input type="checkbox" id="tej"> <label for="tej">Tej</label><br>
<input type="checkbox" id="tojas"> <label for="tojas">Tojás</label><br>
<input type="checkbox" id="asvanyviz"> <label for="asvanyviz">Ásványvíz</label><br>

<button id="getNameButton">Lekér</button>
</code>

A jelölőnégyzetek közül van-e bejelölve valamelyik:
<code javascript>
var vasarlas = $("input:checkbox:checked").val();
</code>
Az eredmény "on", ha bármelyik elem be van jelölve, 
"undefined" ha egyetlen elem sincs jelölve. 



Hivatkozás azonosítóra:
<code javascript>
var asvanyviz = $("input#asvanyviz:checked").val();
var tojas = $("input#tojas:checked").val();
</code>


Hivatkozás tulajdonság (attribútum alapján):
<code javascript>
var asvanyviz = $("input:checkbox[name=asvanyviz]:checked").val();	
var tojas = $("input:checkbox[name=tojas]:checked").val();
</code>


Teljes példa:
<tabbox index.html>

<code html index.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bevásárló</title>
</head>
<body>

<h1>Bevásárlólista</h1>

<input type="checkbox" id="tej"> <label for="tej">Tej</label><br>
<input type="checkbox" id="tojas"> <label for="tojas">Tojás</label><br>
<input type="checkbox" id="asvanyviz"> <label for="asvanyviz">Ásványvíz</label><br>

<button id="getNameButton">Lekér</button>

<script src="./jquery-3.6.0.js"></script>
<script src="app.js"></script>

</body>
</html>
</code>


<tabbox app.js>

<code javascript>
$('#getNameButton').click(()=>{
    console.log($('input:checkbox:checked').val());
});

</code>



</tabbox>




A rádiógombok hasonló módon érhetők el. Ahol checkboxot írtunk ott viszont "radio" szükséges helyette:
<code javascript>
$('input:radio[name=bar]:checked').val();
</code>

=== Be van-e jelölve ===

<code javascript>
if ($('#checkboxElem').is(":checked")) {
  // Ha be van jelölve
}
</code>

Másik lehetőség:
<code javascript>
if($('#checkbox').prop('checked')) {
  // mi legyen
}
</code>

==== Lista elem van kijelölve? ====

Egy listadobozban megvizsgáljuk van-e kiválasztott elem.

<code html>
<select id="listaDoboz" multiple size="10">
  <option>Ultra Piroska</option>
  <option>Nyers Mihály</option>
  <option>Kacsa Borbála</option>
</select>
</code>


<code javascript>
if( $("#listaDoboz").val() != undefined ) {
    //amit teszünk ha van kiválasztott
}
</code>
==== Lista elemei ====

Egy listadoboz elemein végigmegyünk.

<code javascript>
$( "#listBox option" ).each(function( index, element ) {
	$("#room").append('<div class="student">' + $(element).text() + '</div>');		 
});
</code>


==== Listák kezelése ====

Elem hozzáadása:
<code javascript>
$("#listBox").append('<option value="option5">option5</option>');
</code>

Elem törlése:
<code javascript>
$("#listBox option[value='option1']").remove();
</code>


<code javascript>
$("#selectBox option:selected").remove();
</code>

<code javascript>
$('#mySelect :selected').remove();
</code>

===== A DOM változtatása =====

==== A tartalom elé ====

A tartalom elé újabb elemet szeretnénk beilleszteni.
Adott egy felsorolás, amelyben a példa kedvéért gyümölcsök vannak.
Minden gyümölcsnév az "li" elemek tartalmaként van jelen. 
Szeretnénk mint gyümölcsnevet az "a" elemekkel linkké alakítani.
A megoldás a következő:

<code javascript>
$(document).ready(function () {
	$("li").prepend("a.) ");
});
</code>

<code html>
<ul>
	<li>alma</li>
	<li>körte</li>
	<li>barack</li>
	<li>szilva</li>
</ul>
</code>


==== Attribútumok beállítása és :button ====

<code html index.html>
<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>JQuery</title>

</head>
<body>

<input type="button" value="Első" />
<input type="submit" value="Másdoik" />


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sajat.js"></script>
</body>
</html>
</code>


Az 1.6 jQuery verzótól az attr() függvény helyett a
prop() függvény ajánlott.

<code javascript sajat.js>

$(':button').click(function(){
    alert("Az első működik");
});

$(':submit').click(function(){
    $(':submit').prop('value', 'Így is működik');
});
</code>


===== Egyéb =====
==== Az elemek iterálása ====

Ha adott egy elem, amelyből több is van egy oldalon, és szeretnénk minden
elemén valami mást csinálni, akkor használhatjuk az .each() metódust. 
Ilyen feladat lehet, ha egy lista elemeit meg akarjuk számozni.



<code javascript>
$(document).ready(function () {
	$("li").each(function (index, elem) {
		$(elem).prepend(index + ".) ");
	});
});
</code>

<code html>
<ul>
	<li>alma</li>
	<li>körte</li>
	<li>barack</li>
	<li>szilva</li>
</ul>
</code>

Az eredmény ehhez hasonló:
<code>
0.) alma
1.) körte
2.) barack
3.) szilva
</code>

==== Szűrés ====

=== A not(), filter() és has() ===

A not() szűrő akkor választ ki egy elemet, ha annak nincs .jelolt nevű osztálya.

<code javascript>
$(document).ready(function () {
	$("li").not(".jelolt").text("új");
});
</code>


A filter() szűrő akkor választ ki egy elemet, ha annak van .jelolt nevű osztálya.

<code javascript>
$(document).ready(function () {
	$("li").filter(".jelolt").text("új");
});
</code>



A has() szűrő akkor választ ki egy elemet, ha annak gyermekelemei között van egy 
olyan elem, amelynek van .jelolt nevű osztálya.

<code javascript>
$(document).ready(function () {
	$("p").has(".jelolt").text("új");
});
</code>


=== Osztály vizsgálata ===

Az is() metódus logikai típust ad vissza:

<code javascript>
$(document).ready(function () {
	if($( 'li' ).eq( 0 ).is(".jelolt"))
		console.log("Jelolt van 0 helyen ");
});
</code>

Az is() felfogható a not() ellentéteként, de a not() egy jQuery objektumot ad vissza. 



<code html>
<ul>
	<li class="jelolt">alma</li>
	<li>körte</li>
	<li>barack</li>
	<li>szilva</li>
</ul>
</code>


==== Tartalom átírása ====

A HTML tartalmának beállítása:

<code javascript>
$( 'p' ).html( 'Új tartalom' );
</code>

Beállítás szövegként: 
<code javascript>
$( 'p' ).text( 'Új tartalom' );
</code>



<html>
<iframe src="download/peldak/jquery/tartalom_atirasa.html" sandbox="allow-same-origin allow-scripts"></iframe>
</html>

===== CSS változtatása =====
==== Egyszerű háttérbeállítás ====

<code javascript>
$("p").css("background-color","blue");
</code>

A jQuery elfogadja a JavasScript és a CSS stílusú tulajdonságmegadást is. 
Az előbbi utasítást így is írhattam volna:

<code javascript>
$("p").css("backgroundColor","blue");
</code>


==== Egyszerre több tulajdonság ====

<code javascript>
$("p").on("click", function () {
	$(this).css({"background-color":"blue", "color":"white"});	
});
</code>

==== Tulajdonság lekérdezése ====


<code javascript>
$("p").on("click", function () {
	var a = $(this).css("background-color");
	console.log(a);
});
</code>

Az eredmény:
  rgba(0, 0, 0, 0)
==== Több tulajdonság egyszerre ====
Ha a tulajdonságokat kapcsos zárójelbe tesszük,
a tulajdonságot az értéktől kettősponttal szeparálom,
vesszővel szeparálva több tulajdonság is megadható.

<code javascript>
$("#gomb").click(function(){
   $("#egy").css({
       "backgroundColor":"blue",
       "color":"white"                   
   });
});
</code>

===== Bejárás =====
==== Tömb ====

<code javascript>
let list = ['egy', 'kettő', 'három', 'négy'];

$.each(list, function(index, value){
    console.log(index, value);
});
</code>

==== Objektum ====

<code javascript>
let obj = {
    'egy': 'első',
    'ketto': 'második'
};

$.each(obj, function(key, value){
    console.log(key, value);
});
</code>

===== Adat tárolása a DOM-ban =====

Bármely HTML elemnél elhelyezhetünk adatokat:

<code javascript>
$('#az').data('kulcs', 'érték');
$('body').data('gyumolcs', 'szilva');
$('#az2').data('szam', 50);
</code>



Az adatok lekérése:
<code javascript>
var a = $('#az').data('kulcs');
var b = $('body').data();

$('#div').html( $('body').data('gyumols') );
</code>



<code html>
<button id="gomb">Növel</button>
<div id="kimenet"></div>
</code>

<code javascript>
$("#gomb").click(function(){
    var szam = $("body").data("szam");
    if (szam == null)
        szam = 1;
    else
        szam = szam + 1;
    $("body").data("szam", szam);
    $("#kimenet").html(szam);	
});
</code>




<html>
<iframe src="download/peldak/jquery/adatok_domban.html" 
width="100" height="100" sandbox="allow-same-origin allow-scripts" ></iframe>
</html>


===== iframe tartalma =====

<code javascript>
$(document).ready(function() {
    $('#framenev').prop('src',url);
})
</code>

===== Animáció =====
==== Fontméret és szín ====

A következő példákban színváltoztatás is van, de ahhoz a jquer-ui keretrendszerre is
szükség van.

<code html>
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery-ui-1.9.2.custom.min.js"></script> 
<script src="sajat.js"></script>
</code>

<code javascript>
$("#gomb").click(function(){
    $("p").animate(
        {
            fontSize: '40px', 
            color: '#f00'
        }, 4000

    );
});

$("#gomb2").click(function(){
    $("p").animate(
        {
            fontSize: '16px',
            color: 'black'
        }, 4000
    );	
});
</code>


<code javascript>
$(document).ready(function(){
    $("body").hover(function () {
        $(this).stop().animate({ backgroundColor: "red" },500)
    }, function() {
        $(this).stop().animate({ backgroundColor: "blue" },500)}    
    );
}); 
</code>


==== Fontméret és szín újra ====

<code javascript script.js>
$("#gomb1").click(function(){
    $("p").animate(
        {
            fontSize: '40px', 
            color: '#f00'
        } , 4000	
    );	
});

$("#gomb2").click(function(){
    $("p").animate(
        {fontSize: '16px',
        color: 'black'} , 4000
    );	
});

</code>


<code html>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
...
<input type="button" id="gomb1" value="Ki" />
<input type="button" id="gomb2" value="Vissza" />

<p>alma</p>
...
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery-ui-1.9.2.custom.min.js"></script> 
<script src="script.js"></script>

</code>


==== A left érték ====

<code javascript>
$("#teglalap1").click(function(){
    $(this).animate({left: "250px"});
});
</code>


<html>
<iframe src="download/peldak/jquery/animacio_left_ertek.html" 
width="380" height="120" sandbox="allow-same-origin allow-scripts"></iframe>

</html>



==== A left érték oda-vissza ====

<code javascript>
$("#teglalap2").click(function(){
    $(this).animate({left: "250px"});
    $(this).animate({left: "0"});
});
</code>


<html>
<iframe src="download/peldak/jquery/animacio_left_oda_vissza.html" sandbox="allow-same-origin allow-scripts" width="380"></iframe>
</html>


==== A left és átlátszatlanság ====

<code javascript>
$("#teglalap3").click(function(){
    $(this).animate({left: "250px", opacity:"0.4"}, "slow");
    $(this).animate({left: "0"    , opacity:"1.0"}, "slow");    
});
</code>


Minta:

<html>
<iframe src="https://szit.hu/download/peldak/jquery/animacio1.html" 
width="380" height="120" sandbox="allow-same-origin allow-scripts"></iframe>
</html>

===== AJAX technikák =====
==== Az AJAX-ról ====

AJAX = Asynchronous JavaScript and XML.

Az AJAX lényege, hogy a weblap újratöltése nélkül küldünk és fogadunk adatokat a szervernek, illetve a szervertől.

==== Szintaxis ====
<code javascript>
$(selector).load(URL,adat,callback);
</code>

Get metódussal:
<code javascript>
$.get(URL,callback);
</code>

POST metódussal:
<code javascript>
$.post(URL,adat,callback);
</code>


==== Fájl betöltése ====

A fájl csak webszerveren keresztül érhető el.

<code javascript>
$(document).ready(function(){
  $("button").click(function(){
    $("#elso").load("adat.txt");
  });
});
</code>


<code html>
<div id="elso">Eredeti tartalom</div>
</code>

==== Adatok elküldése egy PHP scriptnek ====

Az adatokat úgy küldjük el az insert.php scriptnek, hogy az nem generál
nekünk új oldalt. 

<code html>
<form>
    <fieldset>
        <legend>Dolgozó felvétele</legend>
        <label for="nev">Név:</label>
        <input type="text" id="nev"><br>
        <label for="telepules">Település:</label>
        <input type="text" id="telepules"><br>
        <label for="fizetes">Fizetés:</label>
        <input type="text" id="fizetes"><br>
    </fieldset>
</form>

<button id="addGomb">Hozzáad</button>

</div>
</code>

<code javascript>
$("#addGomb").click(function(){
    $.post("insert.php", { 
        dNev: $("#nev").val(), 
        dTelepules: $("#telepules").val(),
        dFizetes: $("#fizetes").val()
    });
    alert("A " + $("#nev").val() + " dolgozó felvéve");
    $("#nev").val("");
    $("#telepules").val("");
    $("#fizetes").val("");	
});
</code>

Ügyeljünk arra, hogy a <button> elemnek a formon kívül kell lenni, mert másként submitgombként működik.

Az insert.php-ban már így hivatkozunk rá:

<code php>
$nev = $_POST['dNev'];
$telepules = $_POST['dTelepules'];
$fizetes = $_POST['dFizetes'];
</code>
A 'dNev' az űrlapon megadott változó.

A kinyer adatokból elkészíthetek egy SQL utasítást, amit PHP-én keresztül
elküldhetek:
<code php>
$sql = "insert into dolgozok (nev, telepules, fizetes) 
	values (\"$nev\", \"$telepules\", $fizetes)";
</code>


==== Adatok fogadása egy PHP scripttől ====

Az adatokat küldő script a küldendő adatokat a kimenetre írja, például "echo" utasítással.

Ha a küldő php script Content-type: text/html tartalmat állít elő, akkor elég az echo utasítással
a képernyőre íratni az elküldendő adatokat:

<code php>
header("Content-type: text/html; charset=utf-8");
$res = "árvíztűrő";
echo $res;
</code>

Ennél kulturáltabb megoldás ha JSON kódolást használunk:

<code php>
header("Content-type: application/json; charset=utf-8", true);
$res = "árvíztűrő";
echo json_encode($res);
</code>
Ekkor azonban nem HTML-t kell előállítanunk hanem JSON MIME típust.


Természetesen nem csak egy adatot szoktunk átadni, hanem egész tömböt, tömböket:

<code php>
header("Content-type: application/json; charset=utf-8", true);

$res['status'] = 'siker';
$res['message'] = 'Működik';

echo json_encode($res);
</code>

Figyelem! Tömböket, összetett adatszerkezetet nem tudunk a átküldeni kódolás nélkül. 
Azokat mindig JSON kódolva kell átküldeni.


A weboldalon, ahol fogadjuk az adatokat:
<code jquery>
$("#kergomb").click(function(){
    $.post( "send.php", function( data ) {
        alert(data['message']);
    });	
});
</code>

Ha az adatokat JSON kódolva kapjuk meg akkor át kell konvertálni JavaScript objektummá.

JSON konvertálása JavaScript objektummá:
<code javascript>
$("#gomb").click(function(){
    $.post("send.php", function(data){
        var o = $.parseJSON(data);

        for(i=0; i<o.length; i++)
            $("#res").append(o[i].user + " " + o[i].pass + "<br>");
    
    });
    $("#gomb").fadeOut(2000);
});
</code>

==== Hiba és siker visszajelzéssel ====

A jQuery-ben létezik fail(), done() és egy always() metódus, amelyet minden
visszatérő objektumon futtathatunk. Természetesen egyszerre mind a három 
metódus futtatható.

<code javascript>
$(document).ready(function(){
    $("button").click(function(){
        $("form").hide();       
        $.post( "insert.php", { 
            nev: $("#nev").val(), 
            telepules: $("#telepules").val(),
            lakcim: $("#lakcim").val(),
            szuletes: $("#szuletes").val(),
            fizetes: $("#fizetes").val(),
            juttatas: $("#juttatas").val(),
            kocsi: $("#kocsi").val()
        })
        .fail(function() {
            alert( "Hiba a küldés során" );
        })
        .done(function(){
            alert( "Küldés rendben" );
        })
        .always(function(){
            alert( "Küldés vége" );
        })
        ;
    });
});
</code>

==== Küldés és fogadás egyszerre ====

<code javascript>
$("#gomb").click(function(){
    $.post("feldolgozo.php", {
        dUser: "mari"
    })
    .done(function(data){
        alert(data);
    }); 
});
</code>

Elküldünk egy felhasználónevet (mari), majd a data változóban már viszont választ is várunk.

A .done rész akkor hajtódik részre, az elküldés sikeres volt előtte. 

Megjegyzés: A feldolgozo.php script hibáit itt nem tudjuk ellenőrizni.


==== Komplett példa letöltése ====
=== Dolgozó felvétel és listázás ===

  * https://szit.hu/download/oktatas/jquery/jQuery_post_minta_tomb.zip


jQuery és adatbázis is mellékelve.

Tesztelni a következő PHP fájlokkal lehet:
  * add.php
  * list.php

Az add.php segítségével felveszünk egy dolgozót.
A list.php segítségével az összes dolgozót lekérjük, listázzuk.




=== Dolgozó felvétel és Nagy fizetése ===

  * https://szit.hu/download/oktatas/jquery/jQuery_post_minta_egyAdat.zip

Tesztelni a következő PHP fájlokkal lehet:
  * add.php
  * nagy.php

Az add.php segítségével felveszünk egy dolgozót.
A nagy.php segítségével a Nagy János fizetését kérjük le.

=== A felhasználó ellenőrzése regisztrációnál ===

Ez példa tartalmazza az előzőket, de ki van egészítve egy új lehetőséggel.
A users táblába felvehetünk felhasználót, felvétel előtt ellenőrizve, hogy
létezik-e.

  * https://szit.hu/download/oktatas/jquery/userexist.zip

Teszteléshez a következő PHP fájllal lehet:
  * reguser.php
A felhasználó ellenőrzése a következő fájlban történik:
  * exist.php
A felhasználó felvétele:
  * insertuser.php


A lényegi rész:
<code javascript>
$("#addGomb").click(function(){
    $.post("exist.php", {
        dUser: $("#username").val()
    })
    .done(function(data){
        if(data == "notone")
        {
            $.post("insertuser.php", { 
            dUser: $("#username").val(), 
            dPassword: $("#password").val()     
            });
            alert("A " + $("#username").val() + " felhasználó felvéve");
            $("#username").val("");
            $("#password").val("");     
        }
        else
        {
            alert("A felhasználó már létezik!");
        }
    }); 
});
</code>

A példában két post() metódus is van. A második viszont csak akkor fut le, ha az első sikeres volt (.done()...),
és az első post() után a data változóban a notone szó jön át az exist.php fájltól.


===== Csúsztatás =====


Létrehozok két dobozt:
<code html>
  <div id="egy">a</div>
  <div id="ketto">b</div>
</code>

Adunk egy kis stílust neki:
<code css>
div {
  background-color: #ecdc5c;
  padding: 5px;
  margin: 1px 0;
}
</code>

<code jquery>
$("#egy").click(function(){
  $("#ketto").slideToggle("slow");
});
</code>


Példa:

<html>
<iframe src="https://szit.hu/download/peldak/jquery/slide.html" width="300" height="200"></iframe>
</html>


===== Következő elem =====

<code html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Következő</title>
<link rel="stylesheet" href="style.css" />

</head>
<body>

<div id="egy" style="background:blue;">a</div>
<div id="ketto">b</div>
<div id="harom">c</div>
<button id="gomb">Következő</button>
<button id="reset">Vissza</button>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="app.js"></script>

</body>
</html>
</code>

<code javascript app.js>
var $currElement = $("#egy");
$("#gomb").click(function(){
    if(!$currElement.next('div').length){
        alert("Nincs elem!");
        return false;   
    }
    $currElement = $currElement.next();
    $("div").css("background", "");
    $currElement.css("background", "blue");
});
$("#reset").click(function () {
      location.reload();
});
</code>


Működés:
<html>
<iframe src="download/peldak/jquery/kovetkezo_elem.html"
sandbox="allow-same-origin allow-scripts" width="600" height="100"></iframe>

</html>


===== HTML szövegként értelmezve =====

<code html>
<button id="gomb">Mehet</button>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="app.js"></script>
</code>

<code javascript>
$("#gomb").click(function(){	
	var tartalom = $('<html> <body>\
	<input id="a" value="12"> \
	</body></html>');
	var talalat = $(tartalom).filter("#a");
	console.log(talalat.val());	
});	
</code>

===== Csapdák és redundanciák =====
==== Hiányos szelektor ====

Gyakori hiba a szelektor hiányos megadása.

<code javascript>
$("piros").css("color","red");
</code>

A beállításunk piros azonosítóra, vagy piros osztályra vonatkozna, de elhagytuk a "#" vagy a "." karaktert.

==== Túl sok jQuery hívás ====


<code javascript>
$("#gyumolcs").append("alma");
$("#gyumolcs").css("color","red");
$("#gyumolcs").show();
</code>


Helyette használjuk így:
<code javascript>
$("#gyumolcs").append("alma").css("color","red").show();
</code>

Több sorba is írhatjuk:
<code javascript>
$("#gyumolcs").append("alma")
  .css("color","red")
  .show();
</code>


==== Felesleges hívások ====

<code javascript>
$("#egy").css("color","red");
$("#ketto").css("color","red");
$(".harom").css("color","red");
</code>

Helyette:
<code javascript>
$("#egy, #ketto, .harom").css("color","red");
</code>

==== Hatáskörök hiánya ====

<code html>
<div id="darab1">
  <div class="piros"></div>
  <div class="kek"></div>
  <div class="piros"></div>
  <div class="kek"></div>
</div>
</code>


<code javascript>
$(".piros").css("color","red");
</code>

Az előbbi példa működik. Ha sok darabból álló divünk van, akkor a böngésző
kénytelen mindegyiket átnézni, amíg megtalálja a darab1-en belülit. 
Ha viszont a hatókört is megadjuk, akkor gyorsabb működést eredményezhet.

Helyesen:
<code javascript>
$("#darab1 .piros").css("color","red");
</code>

==== Dinamikus változások ====

Ha az oldalhoz dinamikusan hozzáadunk egy button elemet
a click() metódus nem fog reagálni:
<code javascript>
$("#gomb").click(CsinallunkValamit);
</code>


Használjuk helyette a delegate() metódust.
<code javascript>
$(document).delegate("#gomb", "click", CsinalunkValamit);
</code>

==== Feleslegek termelése ====

Induljunk egy egyszerű felesleggel:
<code javascript>
$("#egy").css("display", "none");
$("#egy").css("display", "");
</code>

Használjuk helyette a hide(), show() metódust.

<code javascript>
$("#egy").hide();
$("#egy").show();
</code>

A feleslegesen megírt kódok még fokozhatók:
<code javascript>
if($("#egy").is(":visible")) 
  $("#egy").css("display", "none");
else 
  $("#egy").css("display", "");
</code>

Helyette használjuk:
<code javascript>
$("#egy").toggle();
</code>

A másik ilyen próbálkozás egy elem tartalmának kiürítése:
<code javascript>
$("#egy").html("");
</code>

Helyette:
<code javascript>
$("#egy").empty();
</code>


Felesleges jQuery hívás:
<code javascript>
var a = $(this).attr("src");
</code>

Így egyszerűbb:
<code javascript>
var a = this.src;
</code>


==== Ajax ====

Az async: false használata a böngészőt lefagyaszthatja:
<code javascript>
$.ajax({
  async: false
});
</code>

Ezt olyankor szokták használni, ha egy ajax hívás sikerétől függővé kell tenni egy másikat. 
De e helyett az ajax hívás sikerágában hajtsuk végre a másik hívást.


===== Függelék =====

==== Konfliktus más keretrendszerekkel ====





Fentebb láttuk, hogy jQuery() elérhető egy dollárjellel is, amelyet 
nagyon gyakran használunk. Előfordulhat, hogy más keretrendszer 
is használunk, amelyben szintén használatos a dollárjel.Ilyenkor
ütközés állhat fent. Futtassuk ilyenkor a noConflict() metódust: 
<code javascript>
jQuery.noConflict()
</code>

jQuery utasításainkat ez után illesszük be, dollárjel helyett 
mindig jQuery() kezdéssel.

Ha mindenképpen dollár jelet szeretnénk, megoldást jelenthet 
ha függvénybe írjuk a jQuery utasításainkat:
<code javascript>
(function($) {
$(document).ready(function(){ alert("Működik"); });
})(jQuery);
</code>

A függvénynek paraméterként adjuk át a jQuery objektumot, függvényen 
belül pedig már a szokásos $ jel segítségével hivatkozok rá.



Esetleg lehet így is:
<code javascript script.js>
var j = jQuery.noConflict();


j("#gomb").click(function(){

	j("p").animate(
		{fontSize: '40px',
		color: 'blue'} , 4000
	
	);	
});
</code>


vagy:
<code javascript script.js>
var jq = $.noConflict();
jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("Működik");
    });
});
</code>


vagy:
<code javascript script.js>
$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("Működik");
  });
});
</code>


==== jQuery be van töltve? ====

A következő példában JavaSecripttel ellenőrzöm, hogy be van-e töltve a jQuery.
Ha nincs akkor betölti, és felfűzi a body elem után.

<code javascript>
window.onload = function () {
    if (!jQuery) {
        var jq = document.createElement('script');
        jq.src = 'http://code.jquery.com/jquery-1.10.2.min.js';
        document.getElementsByTagName('body')[0].appendChild(jq);
    }

    //Amit szeretnénk jQuery-ben ...
};
</code>

==== jQuery sablon ====

<code html>
<script src="http://code.jquery.com/jquery-latest.js"></script>  

<script>  
$(document).ready(function(){  
   // Ide jön a jQuery kód
});  
</script>
</code>
szit

Felhasználói eszközök

Eszközök a webhelyen

Eszközök az oldalon
