README

A jQuery által használt $ álnevet más JavaScript könyvtárak is használják. Annak érdekében, hogy a jQuery ne ütközzön a különböző könyvtárak $ objektumával, használja a noConflict() metódust a dokumentum elején:

jQuery.noConflict();

Most a jQuery objektumra a jQuery változónevet a $ (például jQuery('div p')hide()). Ha a jQuery több verziója ugyanazon az oldalon található, akkor a noConflict () paranccsal adhat meg egy álnevet egy adott verzióhoz:

let $x = jQuery.noConflict();

Betöltött-e a jQuery? - Ellenőrzés

Mielőtt bármihez is kezdhetnél a jQuery-vel, először biztosra kell menned abban, hogy betöltött:

if (typeof jQuery == 'undefined') {
  console.log('jQuery hasn\'t loaded');
} else {
  console.log('jQuery has loaded');
}

Ellenőrizze, hogy van-e elem

A HTML elem használata előtt meg kell győződnie arról, hogy része a DOM-nak.

if ($("#selector").length) {
  //csinálj valamit az elemmel
}

.on() binding (“kötés”) használata .click() helyett

Az .on() függvény használata számos előnnyel rendelkezik a .click() megoldással szemben, mint például: több esemény egyszeri hozzáadása…

.on('click tap hover')

…a kötés alkalmazása dinamikusan létrehozott elemekre is (tehát nem kell egyesével végrehajtani a kötést minden dinamikus DOM elemre)…

.on('click.menuOpening')

Névterek segítségével “lecsatolhatsz” egyes konkrét eseményeket (pl. .off('click.menuOpening')).

‘Vissza az elejére’ gomb

Hála a jQuery animate és scrollTop eljárásainak, nincs szükséged pluginokra ahhoz, hogy létrehozz egy egyszerű ‘scroll-to-top’ animációt:

// Back to top
$('.container').on('click', '.back-to-top', function (e) {
  e.preventDefault();
  $('html, body').animate({scrollTop: 0}, 800);
});

<!-- Create an anchor tag -->
<div class="container">
  <a href="#" class="back-to-top">Back to top</a>
</div>

A scrollTop értékének változtatásával beállíthatod, hova szeretnéd, hogy érkezzen a görgetősáv. Igazából amit csinálsz, az annyi, hogy a látható részt animálod egy 800 miliszekundumos időtartamon belül, aminek a végére ez aztán “felgurul” a dokumentum tetejére.

Képek előbetöltése

If your web page uses a lot of images that aren’t visible initially (e.g., on hover) it makes sense to preload them:

$.preloadImages = function () {
  for (var i = 0; i < arguments.length; i++) {
    $('<img>').attr('src', arguments[i]);
  }
};

$.preloadImages('img/hover-on.png', 'img/hover-off.png');

Betöltöttek-e a képek? - Ellenőrzés

Alkalmanként szükséges lehet rá. hogy leellenőrizd, teljesen betöltöttek-e a képeid, annak érdekében, hogy folytatódhasson a scripted lefutása:

$('img').on('load', function () {
  console.log('image load successful');
});

Ezen felül azt is leellenőrizheted, hogy egy konkrét kép betöltött-e: mindössze cseréld le a fenti kódban az <img> címkét egy megfelelő azonosíra (ID) vagy osztályra.

Betölt(het)etlen képek automatikus javítása

Ha úgy alakul, hogy ‘törött képlinkeket’ találsz az oldaladon, egyenként mindet lecserélni fájdalmasan hosszú és kimerítő folyamat lenne. Ez az egyszerű kódrészlet sok fejfájástól megkímélhet:

$('img').on('error', function () {
  if(!$(this).hasClass('broken-image')) {
    $(this).prop('src', 'img/broken.png').addClass('broken-image');
  }
});

Alternatívaként, ha egyszerűen csak el kívánod rejteni ezeket a betölt(het)etlen képeket, ez a kódrészlet gondoskodik róla:

$('img').on('error', function () {
  $(this).hide();
});

Űrlap elküldése AJAX-al

A jQuery AJAX eljárások elterjedt módjai szöveges, HTML, XML vagy JSON állományok lekérésének. Ha egy egyszerű űrlapot kívánsz AJAX-on keresztül elküldeni, a felhasználói bemenetet össze tudod gyűjteni a val() eljárás segítségével:

$.post('sign_up.php', {
  user_name: $('input[name=user_name]').val(),
  email:     $('input[name=email]').val(),
  password:  $('input[name=password]').val(),
});

A val() hívások ugyanakkor számításigényesek. Felhasználói input begyűjtésére kedvezőbb módszer a serialize() függvény használata, ami ezeket string-ként gyűjti be:

$.post('sign_up', $('#sign-up-form').serialize());

CSS osztály aktiválása a kurzor hatására

Tegyük fel, hogy egy kattintható elem megjelenését szeretnéd megváltoztatni, amikor egy felhasználó a kurzorával éppen fölötte áll. (:hover)

Elemedhez hozzáadhatsz egy vagy több CSS osztályt ilyen esetekben; amikor a felhasználó arrébb viszi a kurzort, az osztály automatikusan eltávolításra kerül az elemről:

$('.btn').on('hover', function () {
  $(this).addClass('hover');
}, function () {
  $(this).removeClass('hover');
});

Innentől már csak a szükséges CSS-t kell hozzáadnod. Viszont egy még egyszerűbb módszerért használhatod a toggleClass eljárást is:

$('.btn').on('hover', function () {
  $(this).toggleClass('hover');
});

Megjegyzés: a CSS gyorsabb megoldás lehet ebben az esetben, mindazonáltal érdemes tudnod róla, hogy ilyet is lehet.

Beviteli mezők kikapcsolása

Alkalmanként előfordulhat, hogy érdekedben áll kikapcsolni a “küldés” gombot egy űrlapon, vagy letiltani egy vagy több szövegbeviteli mezőt, amíg a felhasználó végre nem hajt egy bizonyos akciót (pl. bepipálja az “elolvastam a felhasználói feltételeket” jelölőnégyzetet). Adj hozzá egy disabled tulajdonságot a beviteli mezőidhez, így kedved szerint (de)aktiválhatod őket:

$('input[type="submit"]').prop('disabled', true);

Nem kell mást tenned, mint újra futtatni a prop eljárást az adott beviteli mező(kö)n, ezúttal false értékkel:

$('input[type="submit"]').prop('disabled', false);

Linkbetöltés megállítása

Alkalmanként előfordulhat, hogy egy linkre kattintva nem kívánsz se betölteni egy bizonyos weboldalt, se ugyanazt az oldalt újra, hanem valami másra kell, mint például valami más script aktiválása. Ez a kód megelőzi az alapértelmezett akció lefutását:

$('a.no-link').on('click', function (e) {
  e.preventDefault();
});

jQuery kiválasztók eltárolása

Gondolj bele, milyen sokszor kellett ugyanazt a kiválasztót (selector) leírnod újra meg újra. Minden $('.elem') kiválasztó újra meg újra végig kell böngéssze a teljes DOM-ot akárhányszor meghívod - függetlenül attól, hogy az a kiválasztó egyszer volt-e már futtatva. Szóval helyette futtasd a kiválasztót egyszer, és tárold el az eredményét egy változóban:

var blocks = $('#blocks').find('li');

Most már használhatod s blocks változót akárhányszor csak akarod, anélkül, hogy a DOM-ot át kelljen böngészni érte:

$('#hideBlocks').on('click', function () {
  blocks.fadeOut();
});

$('#showBlocks').on('click', function () {
  blocks.fadeIn();
});

A jQuery kiválasztók eltárolása egy roppant egyszerű teljesítményjavító technika.

Áttűnés/becsúszás effekt rögzítése

A becsúszások és az áttűnések olyan tuajdonságok, amiket előszeretettel használunk animációkhoz a jQuery-ben. Lehet, hogy csak akkor szeretnéd láthatóvá tenni az adott elemet, amikor a felhasználó rákattint valamire, amire a fadeIn és slideDown eljárások tökéletesek. De ha azt szeretnéd, hogy az adott elem első kattintásra felbukkanjon, majd a másodikre eltűnjön, ez pont megfelel a célra:

// Fade
$('.btn').on('click', function () {
  $('.element').fadeToggle('slow');
});

// Toggle
$('.btn').on('click', function () {
  $('.element').slideToggle('slow');
});

Egyszerű accordion (harmonika-menü)

// Close all panels
$('#accordion').find('.content').hide();

// Accordion
$('#accordion').find('.accordion-header').on('click', function () {
  var next = $(this).next();
  next.slideToggle('fast');
  $('.content').not(next).slideUp('fast');
  return false;
});

Ezen script hozzáadásával már nincs már feladatot hátra a weboldaladon, mint a szükséges HTML elkészítése ahhoz, hogy ezt működésre bírd.

HTML div elemek egyező magassággal

Néha szükséged lehet arra, hogy két HTML div elem egyforma magas legyen, függetlenül azok belső tartalmától:

$('.div').css('min-height', $('.main-div').height());

Ez a példa beállít egy min-height értéket, ami azt jelenti, hogy a kiválasztott elemnek megengedjük, hogy a fő div-nél nagyobb legyen, de azt nem, hogy kisebb.

Egy rugalmasabb megoldás ciklusban végigmenni elemek egy adott halmazán, és azok közül a legmagasabbéhoz állítani a kérdéses elem magasságát:

var $columns = $('.column');
var height = 0;
$columns.each(function () {
  if ($(this).height() > height) {
    height = $(this).height();
  }
});
$columns.height(height);

var $rows = $('.same-height-columns');
$rows.each(function () {
  $(this).find('.column').height($(this).height());
});

Megjegyzés: Erre sok megoldás van CSS-ben de a szükségleteidtől függően, érdemes lehet tudni, hogyan is megy ez jQuery-ben.

Külső linkek megnyitása új fülön/ablakban

Külső linkek új böngészőfülön vagy -ablakban megnyitása, és annak biztosítása, hogy az azonos forrású linkek ugyanabban a fülben/ablakban nyílnak meg:

$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');

Megjegyzés: window.location.origin nem működik IE10-ben. Ez a javítás gondoskodik erről a problémáról.

Elemek keresése szöveg alapján

A jQuery contains() kiválasztójának használatával megtalálhatsz szöveg(részlet)eket egy elem tartalmában. Ez a kód, ha nem talál szöveget az elemben, elrejti azt:

var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();

Script aktiválás láthatóság változása esetén

Javascript aktiválásra amikor a felhasználó ellapoz egy fülről, vagy visszalép oda:

$(document).on('visibilitychange', function (e) {
  if (e.target.visibilityState === 'visible') {
    console.log('Tab is now in view!');
  } else if (e.target.visibilityState === 'hidden') {
    console.log('Tab is now hidden!');
  }
});

AJAX hívások hibakezelése

Amikor egy AJAX hívás HTTP 404 vagy 500 hibával tér vissza, a hibakezelő végrehajtásra kerül. Ha a hibakezelő nincs definiálva, további jQuery kódok potenciálisan működésképtelenné válnak. Definiálj egy globális AJAX hibakezelőt:

$(document).on('ajaxError', function (e, xhr, settings, error) {
  console.log(error);
});

Plugin hívások láncolása

A jQuery lehetővé teszi plugin eljáráshívások “láncolását” a DOM ismételt lekérése folyamatának enyhítésére, valamint több jQuery objektum létrehozására. Tegyük fel, hogy az alábbi kódtöredék jelképezi a plugin eljáráshívásaid:

$('#elem').show();
$('#elem').html('bla');
$('#elem').otherStuff();

Ekkor igen komoly teljesítményövekedést érhetsz el láncolás használatával:

$('#elem')
  .show()
  .html('bla')
  .otherStuff();

var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();

Mind a láncolás, mint az eltárolás eljárásai “legjobb gyakorlatnak” (best practice) tekinthetők jQuery-ben, és rövidebb, gyorsabb kódot eredményeznek.

Listaelemek sorba rendezése ABC szerint

Tegyük fel, hogy egy listádban túl sok elem van. Mondjuk a lista tartalma egy CMS által került legenerálásra, és te szeretnéd ezt ABC-sorba rendezni:

var ul = $('#list'),
lis = $('li', ul).get();

lis.sort(function (a, b) {
  return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1;
});

ul.append(lis);

Jobb egérkattintás kikapcsolása

$(document).ready(function () {
  $(document).bind('contextmenu', function (e) {
    return false;
  })
})

$(document).ready(function () {
  $('#submit').bind('contextmenu', function (e) {
    return false;
  })
})

Támogatás

A Chrome, Firefox, Safari, Opera, Edge és IE11 böngészők jelenlegi verziói.

jQuery tippek, amiket mindenkinek tudni érdemes

Tartalomjegyzék

Tippek

Használat `noConflict()`

Betöltött-e a jQuery? - Ellenőrzés

Ellenőrizze, hogy van-e elem

`.on()` binding (“kötés”) használata `.click()` helyett

‘Vissza az elejére’ gomb

Képek előbetöltése

Betöltöttek-e a képek? - Ellenőrzés

Betölt(het)etlen képek automatikus javítása

Űrlap elküldése AJAX-al

CSS osztály aktiválása a kurzor hatására

Beviteli mezők kikapcsolása

Linkbetöltés megállítása

jQuery kiválasztók eltárolása

Áttűnés/becsúszás effekt rögzítése

Egyszerű accordion (harmonika-menü)

HTML div elemek egyező magassággal

Külső linkek megnyitása új fülön/ablakban

Elemek keresése szöveg alapján

Script aktiválás láthatóság változása esetén

AJAX hívások hibakezelése

Plugin hívások láncolása

Listaelemek sorba rendezése ABC szerint

Jobb egérkattintás kikapcsolása

Támogatás

jQuery tippek, amiket mindenkinek tudni érdemes

Tartalomjegyzék

Tippek

Használat noConflict()

Betöltött-e a jQuery? - Ellenőrzés

Ellenőrizze, hogy van-e elem

.on() binding (“kötés”) használata .click() helyett

‘Vissza az elejére’ gomb

Képek előbetöltése

Betöltöttek-e a képek? - Ellenőrzés

Betölt(het)etlen képek automatikus javítása

Űrlap elküldése AJAX-al

CSS osztály aktiválása a kurzor hatására

Beviteli mezők kikapcsolása

Linkbetöltés megállítása

jQuery kiválasztók eltárolása

Áttűnés/becsúszás effekt rögzítése

Egyszerű accordion (harmonika-menü)

HTML div elemek egyező magassággal

Külső linkek megnyitása új fülön/ablakban

Elemek keresése szöveg alapján

Script aktiválás láthatóság változása esetén

AJAX hívások hibakezelése

Plugin hívások láncolása

Listaelemek sorba rendezése ABC szerint

Jobb egérkattintás kikapcsolása

Támogatás

Használat `noConflict()`

`.on()` binding (“kötés”) használata `.click()` helyett