Kilka porad na temat używania jQuery

Przycisk powrotu do góry w jQuery

Za pomocą metod jQuery animate i scrollTop można łatwo utworzyć przycisk powrotu na górę strony z animacją i nie trzeba do tego celu wykorzystywać żadnych wtyczek.

Kod jQuery:

// powrót do góry
$('.top').click(function (e) {
  e.preventDefault();
  $('html, body').animate({scrollTop: 0}, 800);
});

Kod HTML

<!-- dowolnemu elementowi, np. kotwicy, należy przypisać klasę top -->
<a class="top" href="#">Powrót na górę</a>

Wartość własności scrollTop określa miejsce, do którego ma zostać przewinięta strona. Działanie tego prostego skryptu polega na animowaniu przewijania elementu body przez 800 milisekund w celu przejścia na górę strony.

Wczytywanie obrazów na zapas za pomocą jQuery

Jeśli na stronie znajduje się dużo obrazów graficznych, których nie widać od razu (np. pojawiają się po najechaniu kursorem na jakiś element), to dobrym pomysłem może być ich wczytanie zawczasu, aby były gotowe do użycia, gdy będą potrzebne:

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

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

Sprawdzanie za pomocą jQuery czy obrazy zostały już załadowane

Czasami trzeba sprawdzić, czy wszystkie obrazy zostały w całości załadowane, aby móc kontynuować wykonywanie skryptów. W tym celu można wykorzystać poniższą funkcję jQuery:

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

Ponadto, jeśli zamienisz znacznik img na identyfikator lub klasę, możesz sprawdzić czy został załadowany konkretny element.

Automatyczne poprawianie uszkodzonych obrazów za pomocą jQuery

Jeśli znajdziesz w swojej witrynie uszkodzone odnośniki do wielu obrazów, to naprawianie ich pojedynczo może być niesamowicie żmudne. W takim przypadku poniższy kod może być dla ciebie prawdziwym wybawieniem:

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

W sumie, nie zaszkodzi dodać ten kod do swoich skryptów, nawet jeśli w witrynie nie ma aktualnie żadnych uszkodzonych odnośników do obrazów.

Wyłączanie odnośników za pomocą jQuery

Czasami nie chcemy, aby kliknięcie odnośnika powodowało przejście do określonej strony ani ponowne załadowanie bieżącej strony, tylko aby np. powodowało uruchomienie wybranego skryptu. W takim przypadku możemy posłużyć się poniższą prostą funkcją, która wyłącza domyślne działanie linka:

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

Przełączanie efektów zanikania i przesuwania za pomocą jQuery

W animacjach tworzonych przy użyciu jQuery bardzo często wykorzystuje się efekty przesuwania oraz stopniowego zanikania i wyświetlania elementów, do tworzenia których idealnie nadają się metody fadeIn i slideDown. Jeśli jednak chcesz, aby pierwsze kliknięcie powodowało pojawienie się elementu, a drugie — jego zniknięcie, to możesz skorzystać z poniższego prostego skryptu:

// zanikanie
$('.btn').click(function () {
  $('.element').fadeToggle('slow');
});

// przełączenie
$('.btn').click(function () {
  $('.element').slideToggle('slow');
});