Zbiór 11 przydatnych fragmentów kodu jQuery, które powinien znać każdy Web Developer.

1. Przewiń stronę do góry

Ten krótki kod spowoduje, że po kliknięciu każdego elementu z klasą do-gory strona zostanie przewinięta do górnej krawędzi. Parametr duration (obecnie ustawiony na 800) określa czas animacji w milisekundach (1 sekunda = 1000 milisekund).

$( ".do-gory" ).on( "click", function(event) {
  event.preventDefault();
  $('html, body').animate({scrollTop: 0}, 800);
});

2. Wiele elementów tej samej wysokości

Ten fragment kodu wybierze wszystkie elementy div wewnątrz .container, znajdzie najwyższy z nich i ustawi jego wysokość dla wszystkich.

var highestBox = 0;

$('.container div').each(function() {

    // znajdź najwyższy element
    if ($(this).height() > highestBox) {
        highestBox = $(this).height();
    }

});

// ustaw wysokość elementów
$('.container div').css("min-height", highestBox + "px");

height

3. Wyłącz input

Przydatny kod, jeśli podczas walidacji formularza chcemy wyłączać niektóre elementy input.

$('input').attr("disabled", true);

Możesz również wyłączyć tylko przycisk submit.

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

Jeśli chcesz ponownie aktywować input, to po prostu usuń atrybut disabled.

$('input[type="submit"]').removeAttr("disabled");

4. Zatrzymanie linków

Dzięki temu snippetowi, możesz wyłączyć domyślne działanie odnośnika.

$( ".link" ).on( "click", function(event) {
  event.preventDefault();
});

5. Otwieraj wszystkie zewnętrzne linki w nowej karcie

Ten prosty kod spowoduje, że każdy zewnętrzny link zostanie otwarty w nowej karcie.

$('a[href^="http://"]').not('a[href*=nazwadomeny]').attr('target','_blank');

6. Pobierz wartość inputa

Bardzo przydatny snippet podczas pobierania danych z formularza.

Tekstowy:

var name = $('#name').val();

Radio:

$("input[type='radio']:checked").val();

Checkbox:

$("input[type='checkbox']").val();

7. Walidacja adresu email

Prosta walidacja adresu email.

function validateEmail($email) {
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    return emailReg.test($email);
}

if (!validateEmail($('#name').val())) {
    console.log('Adres nieprawidłowy!');
} else {
    console.log('Adres prawidłowy!');
}

8. Wykrywanie akcji użytkownika

jQuery umożliwia bardzo proste wykrywanie akcji użytkownika takich jak wycinanie, kopiowanie, wklejanie i tak dalej.

$("p").bind('copy', function() {
    console.log('Tekst został skopiowany.');
});

$("input").bind('paste', function() {
    console.log('Tekst wklejony.');
});

$("input").bind('cut', function() {
    console.log('Tekst został wycięty.')
});

9. Przełączanie klas podczas kliknięcia

Ten kod spowoduje, że po kliknięciu buttona uzyska on klasę active. Po ponownym kliknięciu na przycisk klasa active zostanie usunięta.

$('button').toggleClass('active');

10. Wyszukanie elementu tekstem

Ten snippet pobierze wartość z wyszukiwarki (#search) i ukryje wszystkie paragrafy (p), które nie zawierają podanego w wyszukiwarce tekstu.

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

11. Footer zawsze na dole

Bardzo przydatna funkcja, która pozycjonuje footer zawsze przy dolnej krawędzi strony.

var footerHeight = 0,
    footerTop = 0;

function positionFooter(footer) {
    footerHeight = footer.height();
    footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) + "px";

    if (($(document.body).height() + footerHeight) < $(window).height()) {
        footer.css({
            position: "absolute"
        }).animate({
            top: footerTop
        })
    } else {
        footer.css({
            position: "static"
        })
    }
}

positionFooter($('footer'));
  • Marcin Witek

    Co do 3 pozycji:
    $(‚input’).attr(„disabled”, true);
    Ja bym użył:

    $(‚input’).prop(‚disabled’,true);
    $(‚input’).prop(‚disabled’,false);

  • Łukasz Jędzura

    Dwie uwagi do poniższych punktów:
    7. Regex jest nieaktualny, bo obsługuje tylko domeny od 2 do 4 znaków, a od jakiegoś czasu są dostępne dłuższe domeny np. „.restaurant” czy „.cooking”. Wiem, że można sobie zmienić ten regex, ale może nie każdy wie o co w tym chodzi i warto zamiast „{2,4}” dać „{2,}”?
    11. Warto znać, nie warto wykorzystywać, da się to znacznie łatwiej osiągnąć css’em, a im mniej js tym lepiej 🙂

  • Dominik Węclewski

    Mimo że popularne, prawie oczywiste to fajnie mieć to w jednym miejscu :).