Első jQuery alap weblapom
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.
Első jQuery
==== 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:
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**".
==== 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:
*
A div-re így hivatkozhatunk:
jQuery("#elso");
vagy
$("#elso");
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.
jQuery("#elso").length
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.
if(jQuery("#elso").length)
alert("Van ilyen");
else
alert("Nincs ilyen);
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.
Valami
Valami
jQuery(".ketto").length
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.
$('#valamiform').on("submit", function(e) {
e.preventDefault(); // Elkapja a submit eseményt
//amit tenni szeretnék
});
==== 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.
$(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().
==== Egyszerű eseménykezelés ====
Egy nyomógombnak szeretnénk a kattintását figyelni.
JQuery
$('#gomb1').click(function() {
$('body').text('Helló Világ');
});
==== Egy elem tartalma ====
Lorem ipsum
var tartalom = $("#doboz1").text();
alert(tartalom);
A "Lorem ipsum" szöveget kapjuk.
==== Eseménykezelés másként ====
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();
});
A lamba kifejezéssel létrehozott névtelen függvény
nem ismeri a this kulcsszót. Ezért:
$('p').click( (event) =>{
$(event.currentTarget).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");
});
===== Effektek =====
==== Rejtés ====
JQuery
Üzenetem
$('#az').hide();
$('#az').hide(400); //400 milliszekundum alatt
Mutata
$('#az').show();
$('#az').show(400);
$('#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 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.
JQuery
$(document).ready(function(){
$("#uzenet").fadeOut(5000);
});
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 ===
$("#rejto").click(function(){
$("#szoveg").fadeToggle(5000);
});
Lorem ipsum
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:
#doboz {
width: 200px;
height: 200px;
background-color: navy;
}
...
Mehet
Lorem ipsum
...
...
Leállítjuk az előző effektet, és váltunk:
$("#kapcsolo").click(function(){
$("div").stop().fadeToggle(1000);
});
===== Szelektorok mélyebben =====
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");
===== Űrlap tartalma =====
==== Bevitelimező tartalma ====
Érték kiolvasása:
$('#getNameButton').click(()=>{
let name = $('#name').val();
console.log(name);
$('#name').val('');
});
==== Legördülő listadoboz kiválasztottja ====
Adott egy legördülő listadoboz:
A kiválasztott option elem value értékének lekérdezése:
console.log($('#jarmu').val());
A kiválasztott érték lekérdezése:
console.log($('#jarmu option:selected').text());
A komplett példa:
Document
$('#getNameButton').click(()=>{
console.log($('#jarmu').val());
console.log($('#jarmu option:selected').text());
});
Bevásárlólista
A jelölőnégyzetek közül van-e bejelölve valamelyik:
var vasarlas = $("input:checkbox:checked").val();
Az eredmény "on", ha bármelyik elem be van jelölve,
"undefined" ha egyetlen elem sincs jelölve.
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();
Teljes példa:
Bevásárló
Bevásárlólista
$('#getNameButton').click(()=>{
console.log($('input:checkbox:checked').val());
});
$('input:radio[name=bar]:checked').val();
=== Be van-e jelölve ===
if ($('#checkboxElem').is(":checked")) {
// Ha be van jelölve
}
Másik lehetőség:
if($('#checkbox').prop('checked')) {
// mi legyen
}
==== Lista elem van kijelölve? ====
Egy listadobozban megvizsgáljuk van-e kiválasztott elem.
if( $("#listaDoboz").val() != undefined ) {
//amit teszünk ha van kiválasztott
}
==== Lista elemei ====
Egy listadoboz elemein végigmegyünk.
$( "#listBox option" ).each(function( index, element ) {
$("#room").append('' + $(element).text() + '');
});
==== Listák kezelése ====
Elem hozzáadása:
$("#listBox").append('');
Elem törlése:
$("#listBox option[value='option1']").remove();
$("#selectBox option:selected").remove();
$('#mySelect :selected').remove();
===== 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ő:
$(document).ready(function () {
$("li").prepend("a.) ");
});
- alma
- körte
- barack
- szilva
==== Attribútumok beállítása és :button ====
JQuery
Az 1.6 jQuery verzótól az attr() függvény helyett a
prop() függvény ajánlott.
$(':button').click(function(){
alert("Az első működik");
});
$(':submit').click(function(){
$(':submit').prop('value', 'Így is működik');
});
===== 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.
$(document).ready(function () {
$("li").each(function (index, elem) {
$(elem).prepend(index + ".) ");
});
});
- alma
- körte
- barack
- szilva
Az eredmény ehhez hasonló:
0.) alma
1.) körte
2.) barack
3.) szilva
==== 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.
$(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");
});
=== Osztály vizsgálata ===
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.
- alma
- körte
- barack
- szilva
==== Tartalom átírása ====
A HTML tartalmának beállítása:
$( 'p' ).html( 'Új tartalom' );
Beállítás szövegként:
$( 'p' ).text( 'Új tartalom' );
===== CSS változtatása =====
==== Egyszerű háttérbeállítás ====
$("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");
==== Egyszerre több tulajdonság ====
$("p").on("click", function () {
$(this).css({"background-color":"blue", "color":"white"});
});
==== Tulajdonság lekérdezése ====
$("p").on("click", function () {
var a = $(this).css("background-color");
console.log(a);
});
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ó.
$("#gomb").click(function(){
$("#egy").css({
"backgroundColor":"blue",
"color":"white"
});
});
===== Bejárás =====
==== Tömb ====
let list = ['egy', 'kettő', 'három', 'négy'];
$.each(list, function(index, value){
console.log(index, value);
});
==== Objektum ====
let obj = {
'egy': 'első',
'ketto': 'második'
};
$.each(obj, function(key, value){
console.log(key, value);
});
===== Adat tárolása a DOM-ban =====
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') );
$("#gomb").click(function(){
var szam = $("body").data("szam");
if (szam == null)
szam = 1;
else
szam = szam + 1;
$("body").data("szam", szam);
$("#kimenet").html(szam);
});
===== iframe tartalma =====
$(document).ready(function() {
$('#framenev').prop('src',url);
})
===== 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.
$("#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)}
);
});
==== Fontméret és szín újra ====
$("#gomb1").click(function(){
$("p").animate(
{
fontSize: '40px',
color: '#f00'
} , 4000
);
});
$("#gomb2").click(function(){
$("p").animate(
{fontSize: '16px',
color: 'black'} , 4000
);
});
...
alma
...
==== A left érték ====
$("#teglalap1").click(function(){
$(this).animate({left: "250px"});
});
==== A left érték oda-vissza ====
$("#teglalap2").click(function(){
$(this).animate({left: "250px"});
$(this).animate({left: "0"});
});
==== A left és átlátszatlanság ====
$("#teglalap3").click(function(){
$(this).animate({left: "250px", opacity:"0.4"}, "slow");
$(this).animate({left: "0" , opacity:"1.0"}, "slow");
});
Minta:
===== 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 ====
$(selector).load(URL,adat,callback);
Get metódussal:
$.get(URL,callback);
POST metódussal:
$.post(URL,adat,callback);
==== Fájl betöltése ====
A fájl csak webszerveren keresztül érhető el.
$(document).ready(function(){
$("button").click(function(){
$("#elso").load("adat.txt");
});
});
Eredeti tartalom
==== 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.
$("#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("");
});
Ügyeljünk arra, hogy a