close
jQuery

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

11-snippetow-jquery

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).

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.

height

3. Wyłącz input

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

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

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

4. Zatrzymanie linków

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

5. Otwieraj wszystkie zewnętrzne linki w nowej karcie

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

6. Pobierz wartość inputa

Bardzo przydatny snippet podczas pobierania danych z formularza.

Tekstowy:

Radio:

Checkbox:

7. Walidacja adresu email

Prosta walidacja adresu email.

8. Wykrywanie akcji użytkownika

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

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.

10. Wyszukanie elementu tekstem

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

11. Footer zawsze na dole

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

  • 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 🙂

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