11 przydatnych snippetów jQuery, które powinien znać każdy Webmaster

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");

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'));