VI. jQuery
Külső csomagok (js fileok készítése)
A javascript kódokat nem csak a html oldalban lehet tárolni (megírni) a script tag-on belül, hanem külön álló javascript file-okban is (aminek a kiterjesztése .js). Ezeket a js file-okat lehet betölteni (include-lni) a html oldalba és ezek után a javascript kód ugyanúgy viselkedik, mintha a html oldalon belül írtuk volna a kódot. Nézünk egy konkrét példát:
document.write("Hello világ");
Ezt a kódot bemásoljuk egy fileba, amit elnevezünk pl. jsfile.js. Látható, hogy ebben az esteben nem kell köré írni a script tagot. Majd ezek után írjuk meg a következő elso.html file-t:
<html>
<head>
<title>jquery</title>
<!--Itt hívjuk be a külső javascript fileunkat -->
<script type="text/javascript" src="jsfile.js"></script>
</head>
<body>
</body>
</html>
Fontos, hogy ebben a példában a html filenak es js filenak egyazon mappában kell lennie. Nem szükségszerű, hogy ugyanabban a mappában legyen a html file és a js file, ám ekkor a src-ban a relatív útvonalat kell megadni:
<html>
<head>
<title>jquery</title>
<!--Ha a javascript file a js mappában van -->
<script type="text/javascript" src="js/jsfile.js"></script>
<!--Ha a javascript file egy könyvtárral feljebb van a src mappában van -->
<script type="text/javascript" src="../src/jsfile.js"></script>
</head>
<body>
</body>
</html>
Most hozzunk létre egy olyan js filet, amiben egy objektumot definiálunk és miután betöltöttük ezt a js filet, az objektumot használhatjuk a html oldalon belül. Először írjuk meg a js filet és mentsük el pl. package.js néven:
var csomag = {
legyenNagyBetus : function(text){
document.write(text.toUpperCase()+"<br>");
},
osszeadas : function(a,b){
var osszeg = a+b;
document.write(osszeg+"<br>");
}
};
Majd a html fileban töltsük be ezt a package.js filet és a csomag változót simán használhatjuk:
<html>
<head>
<title>jquery</title>
<!--Itt hívjuk be a külső javascript fileunkat -->
<script type="text/javascript" src="package.js"></script>
</head>
<body>
<script type="text/javascript">
csomag.legyenNagyBetus("csupa nagy betu lesz");
csomag.osszeadas(2,3);
</script>
</body>
</html>
Azaz egy külső csomag betöltése után a csomag függvényei behívhatóak a csomagnev.fuggvenynev utasítással. Persze ehhez ismernünk kell a csomagnevet, illetve a benne található függvényneveket (de hát erre van google).
A jQuery betöltése és első használata
A jQuery (jquery-3.1.1.min.js) letölthető innen (jobb klikk, mentés másként). Arra kell figyelni, hogy a jquery-3.1.1.min.js file ugyanabban a mappában legyen, ahol van a html fileunk. Ezek után a már betölthetjük a jQuery-t a html fileban:
<html>
<head>
<title>jquery</title>
<!--Itt hívjuk be a jQuery fileunkat -->
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>
<body>
</body>
</html>
Most ideje, hogy behívjunk egy jQuery függvényt. Ezt kétféleképpen tehetjük meg: jQuery.fuggvenynev vagy $.fuggvenynev. Ez első függvényünk legyen a ready parancs, ami ellenőrzni, hogy a html oldalunk teljesen betöltödött-e (azaz minden html elem létrejött) és csak ezek után hajtódnak végre a javascript parancsok:
<html>
<head>
<title>jquery</title>
<!--Itt hívjuk be a jQuery fileunkat -->
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
// minden kod ami a ready-en belul talalhato, csak akkor fut le, ha oldal betoltodott
alert("hello");
});
</script>
</head>
<body>
</body>
</html>
A html elemek kiválasztása
Egyik végső célunk, hogy a html oldal elemeit kedvünk szerint alakíthassuk (létrehozunk, törlünk, módosítunk). De ehhez meg kell 'fogni' a megfelelő html elemet. A kiválasztás alapvetően háromféleképpen történhet: id vagy class vagy html név (pl. div) alapján.
<html>
<head>
<title>jquery</title>
<!--Itt hívjuk be a jQuery fileunkat -->
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
$("#elso").append("adjuk szöveget az elso ID-hoz");
$("#masodik").append("adjuk szöveget az masodik ID-hoz");
$(".valami").append("Hozzaad minden valami osztalyu html elemhez");
});
</script>
</head>
<body>
<div id="elso"></div>
<div id="masodik"></div>
<div class="valami"></div>
<p class="valami"></p>
</body>
</html>
Azaz általánosságban elmondható, hogy egy elem kiválasztása a $(elemdefiníció) paranccsal történik. Nem meglepő módon ez a parancs egy jQuery objektummal tér vissza, aminek különböző függvényei vannak, ezeket lehet behíni:
<html>
<head>
<title>jquery</title>
<!--Itt hívjuk be a jQuery fileunkat -->
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
var div = $("#elso");
console.log(div);
div.append("Hozzafuzzunk egy szoveget");
});
</script>
</head>
<body>
<div id="elso">Elso div: </div>
</body>
</html>
Az is látható, hogyha az elemet az id-ja alapján szeretnénk kiválasztani, akkor a # jelet használjuk, például $("#idnev"), míg ha az osztálynév (class) alapján, akkor pontot teszünk az osztálynév elé: $(".classname"). Nincs egyértelmű szabály, hogy aposztrófot vagy idézőjelet kell használni, a kettő ekvivalens, azaz a $("#idnev") és $('#idnev') ugyanaz a parancs.
Button és click event
Ahhoz, hogy 'élőben' is láthassuk a jQuery müködését, hozzuk létre az első eseményünket: a gombnyomást. Ehhez létre kell hoznunk egy html gombot és egy click esemény függvényt, ami lefut (végrehajtodik), ha megnyomjuk a gombot:
<html>
<head>
<title>jquery</title>
<!--Itt hívjuk be a jQuery fileunkat -->
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
$( "#gomb" ).click(function() {
alert( "Megnyomtad a gombot." );
});
});
</script>
</head>
<body>
<button id="gomb">Gomb szövege</button>
</body>
</html>
Akárhányszor megnyomjuk a gombot mindig végrehajtódik a #gomb-hoz rendelt click függvény:
<html>
<head>
<title>jquery</title>
<!--Itt hívjuk be a jQuery fileunkat -->
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
$( "#gomb" ).click(function() {
$( "#elso" ).append("uj szoveg hozzaadasa ");
});
});
</script>
</head>
<body>
<button id="gomb">Gomb szövege</button>
<div id="elso">Kezdeti szöveg. </div>
</body>
</html>
Stílus létrehozása
A stílus határozza meg az egyes html elemeket kinézetét. Minden html elemnek van egy alap kinézette, ám ezek szinte tetszés szerint módosíthatóak. A stílus definíciókat a style tag-ok között adjuk meg a head-en belül, hasonlóan a javascript kódokhoz (csak ott script tag-ot használunk). Hasonlóan a jQuery elem kiválasztáshoz, a stílus definiíció esetén is ki kell választanunk, hogy mely html elemet szeretnénk módosítani. A #idnev használatával id alapján tudunk html elemet kiválasztani, míg .osztalynev alkalmas a class-ok általi kiválasztásra:
<html>
<head>
<title>jquery</title>
<style>
#elso{
width: 200px;
background: red;
}
.elso{
width: 400px;
background: green;
}
</style>
</head>
<body>
<div id="elso">Id alapján történő kiválsztás. </div>
<div class="elso">Class alapján történő kiválsztás. </div>
</body>
</html>
A jQuery alkalmas arra, hogy az egyes html elemek stílusát megváltoztassuk valamilyen esemény (mondjuk gombnyomás) hatására:
<html>
<head>
<title>jquery</title>
<style>
#elso{
width: 200px;
background: red;
}
.elso{
width: 400px;
background: green;
}
</style>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
$( "#gomb" ).click(function() {
$( "#elso" ).css("background", "blue");
$( "#elso" ).css("width", "300px");
$( ".elso" ).css("background", "yellow");
$( ".elso" ).css("width", "350px");
});
});
</script>
</head>
<body>
<div id="elso">Id alapján történő kiválsztás. </div>
<div class="elso">Class alapján történő kiválsztás. </div>
<button id="gomb">Módosít</button>
</body>
</html>
A jQuery-vel létre is hozhatunk új, eddig nem létező html elemeket, amiket hozzáadhatunk egy mást létező html elemhez:
<html>
<head>
<title>jquery</title>
<style>
#elso{
width: 200px;
background: red;
}
</style>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
$( "#gomb" ).click(function() {
var ujdiv = $("<div>");
ujdiv.css("background"," blue");
ujdiv.css("color","white");
ujdiv.attr("id", "masodik");
ujdiv.append("Az új div szövege");
$("#elso").append(ujdiv);
});
});
</script>
</head>
<body>
<div id="elso">Ehhez adjuk hozzá új div-et</div>
<button id="gomb">Hozzáad</button>
</body>
</html>
Nemcsak létrehozhatunk új html elemet, hanem törölhetünk is már létező html elemet a remove parnccsal:
<html>
<head>
<title>jquery</title>
<style>
#torlendo{
background: #81BEF7;
width:250px;
}
.toroljuk{
background: #A9F5F2;
width:350px;
}
</style>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
$( "#gomb1" ).click(function() {
$("#torlendo").remove();
});
$( "#gomb2" ).click(function() {
$(".toroljuk").remove();
});
});
</script>
</head>
<body>
<div id="elso">Külső div
<div id="torlendo">Ezt a div-t töröljük id alapján. </div>
<div class="toroljuk">Ezt a div-t töröljük class alapján. </div>
<div class="toroljuk">Ezt a div-t töröljük class alapján. </div>
</div>
<button id="gomb1">Törlés ID alapján</button>
<button id="gomb2">Törlés CLASS alapján</button>
</body>
</html>
A hexadecimális szín kódok pl. innen vehetőek.
Page builder
Feladatunk legyen a következő oldal megírása:
Azaz a 'Div Hozzáadása' gomb megnyomása lértehoz egy új div-et az aktuális div-en belül, ami tartalmazz két gombot: a 'Div Hozzáadása' és 'P Hozzáadása'. A 'P Hozzáadása' gomb egy p-t hozz létre az aktuláis div-en belül. Persze a gombok akárhányszor, tetszőleges kombinációban megnyomhatóak. Elő példa:
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
function createDiv(parentDiv)
{
var div = $("<div>");
div.css("background","#81DAF5");
div.css("padding", "10px");
div.css("border", "1px solid black");
var buttondiv = $("<button>");
buttondiv.text("Div Hozzáadása");
buttondiv.click(function(){
createDiv($(this).parent());
});
div.append(buttondiv);
var buttonp = $("<button>");
buttonp.text("P Hozzáadása");
buttonp.click(function(){
createP($(this).parent());
});
div.append(buttonp);
div.append("<br/>Az új div szövege");
parentDiv.append(div);
}
function createP(parentDiv)
{
var pelem = $("<p>");
pelem.css("background","#81F7D8");
pelem.css("padding", "10px");
pelem.css("border", "1px solid black");
pelem.append("Az új p szövege");
parentDiv.append(pelem);
}
$( "#divgomb" ).click(function() {
createDiv($(this).parent());
});
$( "#pgomb" ).click(function() {
createP($(this).parent());
});
});
</script>
</head>
<body>
<div id="fodiv">
<button id="divgomb">Div Hozzáadása</button>
<button id="pgomb">p Hozzáadasa</button>
</div>
</body>
</html>
Az előző példában használtuk a parent() függvényt, ami visszaadja az adott html elem szülő elemét. Hasonlóan használható a children() függvény(ami vissza adja az adott html elem gyermekeit), illetve a sibling() függvény (ami a testvér elemek adja vissza). Pl:
<html>
<head>
<title>jquery</title>
<style>
.root{
background: #9FF781;
padding:10px;
border: 1px solid black;
font-size:22px;
}
.children{
background: #00BFFF;
padding:10px;
border: 1px solid black;
font-size:22px;
}
.chch{
background: #BE81F7;
padding:10px;
border: 1px solid black;
font-size:22px;
}
</style>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
$( "#gomb1" ).click(function() {
$("#elso").siblings().css("background", "white");
});
$( "#gomb2" ).click(function() {
$("#elso").children().css("background", "white");
});
$( "#gomb3" ).click(function() {
$("#negyedik").siblings().css("background", "white");
});
$( "#gomb4" ).click(function() {
$(".root").children().css("background", "white");
});
$( "#gomb5" ).click(function() {
$("#otodik").parent().css("background", "white");
});
});
</script>
</head>
<body>
<div id="elso" class="root">
Az elso div
<div id="masodik" class="children">
A masodik div
</div>
<div id="harmadik" class="children">
A harmaik div
</div>
<div id="negyedik" class="children">
A negyedik div
<div id="otodik" class="chch">
Az otodik div
</div>
<div id="hatodik" class="chch">
A hatodik div
</div>
</div>
</div>
<div id="hetedik" class="root">
A hetedik div
<div id="nyolcadik" class="children">
A nyolcadik div
<div id="kilencedik" class="chch">
A kilencedik div
</div>
<div id="tizedik" class="chch">
A tizedik div
</div>
</div>
</div>
<button id="gomb1">Elso div tesói</button>
<button id="gomb2">Elso div gyerekei</button>
<button id="gomb3">Negyedik div tesói</button>
<button id="gomb4">Minden root gyermekei</button>
<button id="gomb5">Otodik div szülője</button>
</body>
</html>
Form elemek
Input mező
A legalapvetőbb beviteli eszköz. Az új (HTML5) irányelvekben számos input mező fajtát definiáltak már:
<html>
<head>
<title>jquery</title>
</head>
<body>
<b>Sima input mezők</b><br><br>
<form>
Vezetéknév: <input type="text" name="veznev"><br><br>
Keresztnév: <input type="text" name="kernev"><br><br>
Mezőérték: <input type="text" value="Előre deiniált szöveg"><br><br>
<input type="text" placeholder="Kedvenc színed"><br><br>
<input type="reset"><br><br>
Jelszó: <input type="password" name="psw"><br><br>
<b>HTML5 input mezők</b><br><br>
Kedvenc színed: <input type="color" name="favcolor"><br><br>
Születésnapod: <input type="date" ><br><br>
Email: <input type="email" ><br><br>
Számok: <input type="number" min="1" max="5"><br><br><br><br>
<input type="submit" value="Elküld">
</form>
</body>
</html>
Change esemény
Az input mező megváltozását a change() függvénnyel kezelhetjük le:
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
$("#inputmezo").change(function() {
$("#result").append("<br>"+$(this).val());
});
});
</script>
</head>
<body>
Input mező: <input type="text" name="veznev" id="inputmezo">
<div id="result"></div>
</body>
</html>
Rádió gombok
Rádió gombok alkalmasak egyszeres kiválasztásra több lehetőség közül. A változás lekezelése úgyszintén a change() függvénnyel történik:
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
$("input[name=gender]").change(function() {
$("#result").append("<br>"+$(this).val());
});
$("input[name=menu]").change(function() {
$("#result").append("<br>"+$(this).val());
});
});
</script>
</head>
<body>
Neme:
<input type="radio" name="gender" value="male" checked> Férfi
<input type="radio" name="gender" value="female"> Nő
<input type="radio" name="gender" value="other"> Egyéb
<br><br>
Menü:
<input type="radio" name="menu" value="nonvega" checked> Sima
<input type="radio" name="menu" value="vega"> Vega
<div id="result"></div>
</body>
</html>
Show / hide függvények és társaik
A jQuery-vel effektusokat is létre tudunk hozni, amik alkalmasak egész html részeket eltűntetni, visszahozni:
<html>
<head>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("input[name=page]").change(function() {
$("#panel1").hide();
$("#panel2").hide();
$("#panel3").hide();
if($(this).val() == "elso")
$("#panel1").show();
if($(this).val() == "masodik")
$("#panel2").show();
if($(this).val() == "harmadik")
$("#panel3").show();
});
$("#panel1").show();
});
</script>
<style>
#panel1, #panel2, #panel3, #pagenumber {
padding: 5px;
text-align: center;
border: solid 1px #c3c3c3;
}
#pagenumber {
background-color: #e5eecc;
}
#panel1 {
background-color: #F78181;
}
#panel2 {
background-color: #82FA58;
}
#panel3 {
background-color: #81DAF5;
}
#panel1, #panel2, #panel3 {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="pagenumber"><input type="radio" name="page" value="elso" checked> 1. oldal
<input type="radio" name="page" value="masodik"> 2. oldal
<input type="radio" name="page" value="harmadik"> 3. oldal</div>
<div id="panel1">Első Panel!</div>
<div id="panel2">Második Panel!</div>
<div id="panel3">Harmadik Panel!</div>
</body>
</html>
Szebb effekt hozható létre a slideUp() és slideDown() függvények segítségével:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
var actpanel;
$("input[name=page]").change(function() {
actpanel.slideUp();
if($(this).val() == "elso")
{
$("#panel1").slideDown();
actpanel = $("#panel1");
}
if($(this).val() == "masodik")
{
$("#panel2").slideDown();
actpanel = $("#panel2");
}
if($(this).val() == "harmadik")
{
$("#panel3").slideDown();
actpanel = $("#panel3");
}
});
$("#panel1").show();
actpanel = $("#panel1");
});
</script>
<style>
#panel1, #panel2, #panel3, #pagenumber {
padding: 5px;
text-align: center;
border: solid 1px #c3c3c3;
}
#pagenumber {
background-color: #e5eecc;
}
#panel1 {
background-color: #F78181;
}
#panel2 {
background-color: #82FA58;
}
#panel3 {
background-color: #81DAF5;
}
#panel1, #panel2, #panel3 {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="pagenumber"><input type="radio" name="page" value="elso" checked> 1. oldal
<input type="radio" name="page" value="masodik"> 2. oldal
<input type="radio" name="page" value="harmadik"> 3. oldal</div>
<div id="panel1">Első Panel!</div>
<div id="panel2">Második Panel!</div>
<div id="panel3">Harmadik Panel!</div>
</body>
</html>
Legördülö menü (select)
A Legördülö menü alkalmas még az egyszeres kiálasztásra, a változást ismét a change() függvény adja vissza:
<html>
<head>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#auto").change(function() {
$("#res").append("<br>"+$(this).val());
});
});
</script>
</head>
<body>
Válassz egy autot:
<select id="auto">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<div id="res"></div>
</body>
</html>
Checkbox menü
A checkbox-ok alkalmasak többszörös kiválasztásra:
<html>
<head>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("input[name='sport']").change(function() {
var favorite = [];
$.each($("input[name='sport']:checked"), function(){
favorite.push($(this).val());
});
$("#res").append("<br>"+favorite);
});
});
</script>
</head>
<body>
Kedvenc sportom:
<input type="checkbox" value="football" name="sport"> Football
<input type="checkbox" value="baseball" name="sport"> Baseball
<input type="checkbox" value="boxing" name="sport"> Boxing
<input type="checkbox" value="racing" name="sport"> Racing
<input type="checkbox" value="swimming" name="sport"> Swimming
<div id="res"></div>
</body>
</html>
Szövegmező
A szövegmező (textarea) alkalmas nagyobb mennyiségű szöveg bevitelére:
<html>
<head>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#szoveg").change(function() {
$("#res").html($(this).val());
});
});
</script>
</head>
<body>
Szövegmező<br/>
<textarea name="message" id="szoveg" rows="10" cols="30">
Ez lehetne itt életem legszebb szövege, de ez nem az :(
</textarea>
<br/>
<div id="res"></div>
</body>
</html>