Ez a dokumentum egy előző változata!
A jQuery egy JavaScript keretrendszer, 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á.
Vagy letöltjük, vagy hivatkozunk a weboldalon található URL-re.
A jQuery a weboldalán mindig biztosít egy linket, amelyen keresztül elérhető az aktuális stabil verzió. A verziószám a linkben mindig nő. Ha tehát ezt a linket használjuk és újabb verzióra akarunk váltani, változtatni kell a linkünkön.
A jQuery weboldaláról persze le is tölthetjük a keretrendszert, amelyet a saját webhelyünkön elhelyezhetünk.
A jQuery mivel JavaScript, ezért a script elemmel kell meghívni. A script elem nyitó tagben megadhuk egy src attribútumban, hogy található a jquery állományunk.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Első jQuery alap weblapom</title> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> //jQuery utasításaink </script> </head> <body> </body> </html>
A script elem a weboldalon bárhol elhelyezhető. Van aki a weboldal végén szereti látni. Ha weboldal végére tesszük, akkor csak az oldal letöltődése után hajtódik végre a jQuery. Ha nem ide tesszük, akkor külön gondoskodnunk kell az oldal betöltődésének figyeléséről, adott esetben. A saját jQuery hívásainkat a jQuery állomány meghívása után újabb script elemek közé tehetjük.
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:
document.getElementsByTagName("p")[0].innerHTML = "Új tartalom";
jQuery megoldás:
$("p").html("Új tartalom");
A jQuery jóval egyszerűbb. A jQuery filozófiája: „írjunk kevesebbet, csináljunk többet”.
A fejlesztéshez szükségünk lesz egy szövegszerkesztőre és valamilyen népszerű böngészőre, például Chrome vagy Firefox. Használjuk a mindkét böngésző fejlesztő eszközeit. A Chromeban bekapcsolható a F12-vel, de a Firefoxban is telepíthetünk egy Firebug nevű plugint, amely szintén a fejlesztést segíti.
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ó.
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.
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:
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:
<div id="elso"> </div>
A div-re így hivatkozhatunk:
jQuery("#elso");
vagy
$("#elso");
A jQuery() vagy $() önálló objektum orientált 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.
jQuery("#elso").length
Ennek persze úgy van értelme, ha megvizsgáljuk mekkora ez a hossz. Ha a hossz nulla, akkor ilyen azonosító vagy osztály nem létezik:
if(jQuery("#elso").length) alert("Van ilyen"); else alert("Nincs ilyen);
Az alert() helyett használhatjuk a console.log() függvényt, amely JavaScript konzolra ír.
$(document).ready(function() { console.log('Készen van'); });
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 |
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.
$(document).ready(function(){ alert("Működik"); });
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().
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery</title> </head> <body> <p onclick="$(this).hide();">Bekezdés</p> <script src="jquery-1.6.3.js"></script> </body> </html>
Működés:
Kattintásra eltűnik
Egy nyomógombnak szeretnénk a kattintását figyelni.
<!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>
$('#gomb1').click(function() { $('body').text('Helló Világ'); });
<div id="doboz1">Lorem ipsum</div>
var tartalom = $("#doboz1").text(); alert(tartalom);
A „Lorem ipsum” szöveget kapjuk.
A load() elavult függvény!
$(window).load(function(){ alert("Ablak betöltve"); });
A load() elavult függvény!
<img id="kep01" src="kep.jpg" />
$("#kep01").load(function(){ alert("Kép betöltve"); });
Ha ready() függvényt használom, előbb megjelenik az üzenet, utána töltődik a kép. Itt viszont előbb megjelenik kép és csak utána az üzenet.
Az iframe használat esetén még látványosabb lehet, a load() függvény használata. (<iframe src=„”></iframe>)
<a href="http://goolge.com">Goolge</a>
$(window).unload(function(){ alert("Elhagytad az oldalt"); });
Minden p elem elrejtése:
$("p").on("click", function () { $("p").hide(); });
Annak a p elemnek elrejtése, amelyre kattintottunk:
$("p").on("click", function () { $(this).hide(); });
Adott p elemre kattintva, annak háttérszíne megváltozik:
$("p").on("click", function () { $(this).css("background-color","blue"); $(this).css("color","white"); });
<!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 type="text/javascript" src="jquery-1.6.3.js"></script> <script type="text/javascript" src="gomb.js"></script> </body> </html>
$('#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'); });
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:
if($("#az").is(":visible")) $("#az").hide();
A példában meg is vizsgáljuk egy if() segítésével, és ah látható volt, akkor elrejtjük.
Egy szöveg lassú megjelenítése betöltéskor.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery</title> </head> <body> <p id="uzenet" style="display:none">Bekezdés</p> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="sajat.js"></script> </body> </html>
$(document).ready(function(){ $("#uzenet").fadeIn(5000); });
A fadeIn() bemenő paramétere milliszekundumban megadott érték, de lehet „fast”, „slow” karaktersorozat is.
Eltüntetés a fadeOut() függvénnyel lehetséges.
$("#rejto").click(function(){ $("#szoveg").fadeToggle(5000); });
<input type="button" id="rejto" value="Rejt" /> <p id="szoveg">Lorem ipsum</p>
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:
<style> #doboz { width: 200px; height: 200px; background-color: navy; } </style> ... <div id="kapcsolo">Mehet</div> <div id="doboz">Lorem ipsum</div> <script src="http://code.jquery.com/jquery.min.js"></script> <script> $("#kapcsolo").click(function(){ $("div").stop().fadeToggle(1000); }); </script>
Az összes p elem kiválasztása:
$("p").click(function(){ alert("Kattintás") });
Csak az első p elem kiválasztása:
$("p:first").text("Lorem ipsum");
Csak az utolsó p elem kiválasztása:
$("p:last").text("Lorem ipsum");
A „be” azonosítójú elem kiválasztása:
$("#be").click(function(){ alert("Kattintás") });
Az összes elem kiválasztása:
var elemek = $("*").length alert(elemek)
Az összes ul-en belüli elemek száma:
var elemek = $("ul").find("*").length; alert(elemek);
A gyermek elemekben keresünk egy olyan elemet, amelynek osztálya „masodik”. Ennek az elemnek a hátterét pirosra állítjuk:
var elem = $('div').find('.masodik'); elem.css("background-color","red");
Egy lista elemhez kapcsolódó elemek:
//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");
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JQuery</title> </head> <body> <input id="be" type="text" value="Lorem ipsum" /> <script src="jquery.js"></script> <script src="sajat.js"></script> </body> </html>
Érték kiolvasása:
var ertek = $("#be").val(); alert(ertek);
Érték beállítása:
$("#be").val(45);
var valasztott = $("select#jarmu option:selected").val();
Egyszerűbben is lehet:
var valasztott = $("select#jarmu").val();
A komplett példa:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> </head> <body> <form> <fieldset> <legend>Válasszon járművet</legend> <select name="jarmu" id="jarmu"> <option value="opel">Opel</option> <option value="bmw">BMW</option> <option value="ford">Ford</option> <option value="citroen">Citroen</option> </select> <input type="button" id="mehet" value="Mehet"><br> <input type="text" name="eredmeny"> </fieldset> </form> <script> $(document).ready(function () { $("input[name=eredmeny]").hide(); }) $("#mehet").click(function () { var valasztott = $("select#jarmu option:selected").val(); $("input[name=eredmeny]").show(); $("input[name=eredmeny]").val("A választott: " + valasztott); }) </script> </body> </html>
A jelölőnégyzetek közül van-e bejelölve valamelyik:
var valasztott = $("input:checkbox:checked").val();
Hivatkozás azonosítóra:
var asvanyviz = $("input#asvanyviz:checked").val(); var tojas = $("input#tojas:checked").val();
Hivatkozás tulajdonság (attribútum alapján):
var asvanyviz = $("input:checkbox[name=asvanyviz]:checked").val(); var tojas = $("input:checkbox[name=tojas]:checked").val();
Példa jelölőnégyzettel:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> </head> <body> <form> <fieldset> <legend>Mit kér?</legend> <input type="checkbox" id="asvanyviz"> Ásványvíz<br> <input type="checkbox" id="tojas"> Tojás<br> <input type="button" id="mehet" value="Mehet"><br> <input type="text" name="eredmeny"> </fieldset> </form> <script> $(document).ready(function () { $("input[name=eredmeny]").hide(); }) $("#mehet").click(function () { var str=""; var asvanyviz = $("input#asvanyviz:checked").val(); var tojas = $("input#tojas:checked").val(); if (asvanyviz == "on") str += "Ásványvíz "; if (tojas == "on") str += " Tojás "; $("input[name=eredmeny]").show(); $("input[name=eredmeny]").val(str); console.log(str); }) </script> </body> </html>
A rádiógombok hasonló módon érhetők el. Ahol checkboxot írtunk ott viszont „radio” szükséges helyette:
$('input:radio[name=bar]:checked').val();
if ($('#checkboxElem').is(":checked")) { // Ha be van jelölve }
Másik lehetőség:
$('#checkbox').prop('checked')
Egy listadobozban megvizsgáljuk van-e kiválasztott elem.
<select id="listaDoboz" multiple size="10"> <option>Ultra Piroska</option> <option>Nyers Mihály</option> <option>Kacsa Borbála</option> </select>
if( $("#listaDoboz").val() != undefined ) { //amit teszünk ha van kiválasztott }
Egy listadoboz elemein végigmegyünk.
$( "#listBox option" ).each(function( index, element ) { $("#room").append('<div class="student">' + $(element).text() + '</div>'); });
Elem hozzáadása:
$("#listBox").append('<option value="option5">option5</option>');
Elem törlése:
$("#listBox option[value='option1']").remove();
$("#selectBox option:selected").remove();
$('#mySelect :selected').remove();
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ő:
$(document).ready(function () { $("li").prepend("a.) "); });
<ul> <li>alma</li> <li>körte</li> <li>barack</li> <li>szilva</li> </ul>
<!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>
$(':button').click(function(){ alert("Az első működik"); }); $(':submit').click(function(){ $(':submit').attr('value', 'Így is működik'); });
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.
$(document).ready(function () { $("li").each(function (index, elem) { $(elem).prepend(index + ".) "); }); });
<ul> <li>alma</li> <li>körte</li> <li>barack</li> <li>szilva</li> </ul>
Az eredmény ehhez hasonló:
0.) alma 1.) körte 2.) barack 3.) szilva
A not() szűrő akkor választ ki egy elemet, ha annak nincs .jelolt nevű osztálya.
$(document).ready(function () { $("li").not(".jelolt").text("új"); });
A filter() szűrő akkor választ ki egy elemet, ha annak van .jelolt nevű osztálya.
$(document).ready(function () { $("li").filter(".jelolt").text("új"); });
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.
$(document).ready(function () { $("p").has(".jelolt").text("új"); });
Az is() metódus logikai típust ad vissza:
$(document).ready(function () { if($( 'li' ).eq( 0 ).is(".jelolt")) console.log("Jelolt van 0 helyen "); });
Az is() felfogható a not() ellentéteként, de a not() egy jQuery objektumot ad vissza.
<ul> <li class="jelolt">alma</li> <li>körte</li> <li>barack</li> <li>szilva</li> </ul>
A HTML tartalmának beállítása:
$( 'p' ).html( 'Új tartalom' );
Beállítás szövegként:
$( 'p' ).text( 'Új tartalom' );
$("p").css("background-color","blue");
A jQuery elfogadja a JavasScript és a CSS stílusú tulajdonságmegadást is. Az előbbi utasítást így is írhattam volna:
$("p").css("backgroundColor","blue");
$("p").on("click", function () { $(this).css({"background-color":"blue", "color":"white"}); });
$("p").on("click", function () { var a = $(this).css("background-color"); console.log(a); });
Az eredmény:
rgba(0, 0, 0, 0)
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ó.
$("#gomb").click(function(){ $("#egy").css({ "backgroundColor":"blue", "color":"white" }); });
Bármely HTML elemnél elhelyezhetünk adatokat:
$('#az').data('kulcs', 'érték'); $('body').data('gyumolcs', 'szilva'); $('#az2').data('szam', 50);
Az adatok lekérése:
var a = $('#az').data('kulcs'); var b = $('body').data(); $('#div').html( $('body').data('gyumols') );
<button id="gomb">Növel</button> <div id="kimenet"></div> <script> $("#gomb").click(function(){ alert("vmi"); var szam = $("body").data("szam"); if (szam == null) szam = 1; else szam = szam + 1; $("body").data("szam", szam); $("#kimenet").html(szam); }); </script>
$(document).ready(function() { $('#framenev').attr('src',url); })
A következő példákban színváltoztatás is van, de ahhoz a jquer-ui keretrendszerre is szükség van.
<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>
$("#gomb").click(function(){ $("p").animate( { fontSize: '40px', color: '#f00' } , 4000 ); }); $("#gomb2").click(function(){ $("p").animate( {fontSize: '16px', color: 'black'} , 4000 ); });
$(document).ready(function(){ $("body").hover(function () { $(this).stop().animate({ backgroundColor: "red" },500) }, function() { $(this).stop().animate({ backgroundColor: "blue" },500)} ); });
$("#gomb1").click(function(){ $("p").animate( { fontSize: '40px', color: '#f00' } , 4000 ); }); $("#gomb2").click(function(){ $("p").animate( {fontSize: '16px', color: 'black'} , 4000 ); });
<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>
$("#teglalap1").click(function(){ $(this).animate({left: "250px"}); });
$("#teglalap2").click(function(){ $(this).animate({left: "250px"}); $(this).animate({left: "0"}); });
$("#teglalap3").click(function(){ $(this).animate({left: "250px", opacity:"0.4"}, "slow"); $(this).animate({left: "0" , opacity:"1.0"}, "slow"); });
Minta:
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.
$(selector).load(URL,adat,callback);
Get metódussal:
$.get(URL,callback);
POST metódussal:
$.post(URL,adat,callback);
A fájl csak webszerveren keresztül érhető el.
$(document).ready(function(){ $("button").click(function(){ $("#elso").load("adat.txt"); }); });
<div id="elso">Eredeti tartalom</div>
Az adatokat úgy küldjük el az insert.php scriptnek, hogy az nem generál nekünk új oldalt.
<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> <script> $("#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(""); }); </script>
Ü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á:
$nev = $_POST['dNev']; $telepules = $_POST['dTelepules']; $fizetes = $_POST['dFizetes'];
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:
$sql = "insert into dolgozok (nev, telepules, fizetes) values (\"$nev\", \"$telepules\", $fizetes)";
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:
header("Content-type: text/html; charset=utf-8"); $res = "árvíztűrő"; echo $res;
Ennél kulturáltabb megoldás ha JSON kódolást használunk:
header("Content-type: application/json; charset=utf-8", true); $res = "árvíztűrő"; echo json_encode($res);
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:
header("Content-type: application/json; charset=utf-8", true); $res['status'] = 'siker'; $res['message'] = 'Működik'; echo json_encode($res);
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:
$("#kergomb").click(function(){ $.post( "send.php", function( data ) { alert(data['message']); }); });
Ha az adatokat JSON kódolva kapjuk meg akkor át kell konvertálni JavaScript objektummá.
JSON konvertálása JavaScript objektummá:
$("#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); });
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ó.
$(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" ); }) ; }); });
$("#gomb").click(function(){ $.post("feldolgozo.php", { dUser: "mari" }) .done(function(data){ alert(data); }); });
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.
jQuery és adatbázis is mellékelve.
Tesztelni a következő PHP fájlokkal lehet:
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.
Tesztelni a következő PHP fájlokkal lehet:
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.
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.
Teszteléshez a következő PHP fájllal lehet:
A felhasználó ellenőrzése a következő fájlban történik:
A felhasználó felvétele:
A lényegi rész:
$("#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!"); } }); });
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.
Létrehozok két dobozt:
<div id="egy">a</div> <div id="ketto">b</div>
Adunk egy kis stílust neki:
div { background-color: #ecdc5c; padding: 5px; margin: 1px 0; }
$("#egy").click(function(){ $("#ketto").slideToggle("slow"); });
Példa:
<!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> 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(); }); </script> </body> </html>
Működés:
<button id="gomb">Mehet</button> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> $("#gomb").click(function(){ var tartalom = $('<html> <body>\ <input id="a" value="12"> \ </body></html>'); var talalat = $(tartalom).filter("#a"); console.log(talalat.val()); }); </script>
Gyakori hiba a szelektor hiányos megadása.
$("piros").css("color","red");
A beállításunk piros azonosítóra, vagy piros osztályra vonatkozna, de elhagytuk a „#” vagy a „.” karaktert.
$("#gyumolcs").append("alma"); $("#gyumolcs").css("color","red"); $("#gyumolcs").show();
Helyette használjuk így:
$("#gyumolcs").append("alma").css("color","red").show();
Több sorba is írhatjuk:
$("#gyumolcs").append("alma") .css("color","red") .show();
$("#egy").css("color","red"); $("#ketto").css("color","red"); $(".harom").css("color","red");
Helyette:
$("#egy, #ketto, .harom").css("color","red");
<div id="darab1"> <div class="piros"></div> <div class="kek"></div> <div class="piros"></div> <div class="kek"></div> </div>
$(".piros").css("color","red");
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:
$("#darab1 .piros").css("color","red");
Ha az oldalhoz dinamikusan hozzáadunk egy button elemet a click() metódust nem fog reagálni:
$("#gomb").click(CsinallunkValamit);
Használjuk helyette a delegate() metódust.
$(document).delegate("#gomb", "click", CsinalunkValamit);
Induljunk egy egyszerű felesleggel:
$("#egy").css("display", "none"); $("#egy").css("display", "");
Használjuk helyette a hide(), show() metódust.
$("#egy").hide(); $("#egy").show();
A feleslegesen megírt kódok még fokozhatók:
if($("#egy").is(":visible")) $("#egy").css("display", "none"); else $("#egy").css("display", "");
Helyette használjuk:
$("#egy").toggle();
A másik ilyen próbálkozás egy elem tartalmának kiürítése:
$("#egy").html("");
Helyette:
$("#egy").empty();
Felesleges jQuery hívás:
var a = $(this).attr("src");
Így egyszerűbb:
var a = this.src;
Az async: false használata a böngészőt lefagyaszthatja:
$.ajax({ async: false });
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.
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:
jQuery.noConflict()
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:
(function($) { $(document).ready(function(){ alert("Működik"); }); })(jQuery);
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:
var j = jQuery.noConflict(); j("#gomb").click(function(){ j("p").animate( {fontSize: '40px', color: 'blue'} , 4000 ); });
vagy:
var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("Működik"); }); });
vagy:
$.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("Működik"); }); });
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.
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 ... };