Porady i triki w jQuery

jQuery

Poziom średnio-zaawansowany

W dzisiejszym artykule zrobimy mały przegląd ciekawego zagadnienia, jakim są triki w jQuery. Framework ten sam w sobie daje programiście gigantyczne możliwości, które można jeszcze wyeksponować poprzez triki i dobre praktyki.

Triki w jQuery

Tym razem również skoncentrujemy się bardziej na praktyce i przykładach, niż na teorii.

1. Określenie rozmiarów naszego dokumentu

Konkretnie chodzi tutaj o liczbę elementów DOM, które zawiera strona. W jQuery można uzyskać taką informację w następujący sposób.

alert($('*').length);

2. Sprawdzanie czy pole checkbox jest zaznaczone

Sprawa jest prosta – można to wykonać w taki sposób:

if ($("#myCheckBoxID").is(':checked')) {
  ...
}

lub też sprawdzając atrybut:

if ($('#myCheckBoxID').attr('checked')) {
  ...
}

3. Sprawdzenie, czy dany element istnieje

if ($("#myElementID").length == 0) 
    alert('#myElementID nie istnieje');
else
    alert('#myElementID istnieje');

4. Sprawdzenie czy element jest widoczny

Czy element widoczny:

$("#myElementID").is(":visible");

lub czy ukryty:

$('#myElementID').is(':hidden')

5. Ilość znalezionych (pasujących) elementów

Ten prosty trik podaje nam informacje ile elementów dokumentu pasuje do selektora (np. wyszukanie po klasie CSS):

alert($(".nasza-klasa-css").size());

6. Przewinięcie strony do wybranego elementu

$(document).scrollTop($('#myElement').offset().top);

7. Podmiana jednego elementu na inny

$("#oldID").replaceWith("<span>Nowy element span</span>");

8. Wyszukanie elementu po klasie CSS

Poniższy kod nadaje niebieskie obramowanie o grubości 2px elementom posiadającym klasę CSS foobar.

$('body').find('.foobar').css({'border': 'solid 2px blue'});

9. Wyszukanie elementu po atrybucie

Idąc krok dalej można wyszukać element po atrybucie, nawet naszym własnym. Dość często zdarzało mi się z tym stykać w pewnej aplikacji opartej o HTML5 i jQuery.

var p_id = 12345;
$('#container').find('div[data-photoid="' + p_id + '"]').hide();

// np.:
// <div data-photoid="12345"><img src="path-to-image.jpg" /></div>

Powyższy kod szuka konkretnego elementu (tutaj div), w którym atrybut data-photoid ma wartość odpowiadającej podanej zmiennej (p_id), i ukrywa ten element jeśli zostanie odnaleziony.

10. „Przyklejenie” akcji do elementów HTML

Najpierw wywołujemy metodę unbind(), dzięki czemu będziemy mogli podłączyć do elementu zachowanie zdefiniowane przez nas zamiast domyślnego.

HTML

<span id="prev">PREV</span> 1 2 3 4 5 <span id="next">NEXT</span>

JS

$('#next').unbind();
$('#prev').unbind();

$('#next').click(function() {
    clickTime = new Date().getTime();
    alert(clickTime);

    return false;
});

$('#prev').click(function() {
    clickTime = new Date().getTime();
    alert(clickTime);

    return false;
});

W testowym przykładzie po kliknięciu zostaje wyświetlony czas (timestamp), w którym kliknięcie nastąpiło. Oczywiście można oprzeć na tym paginację bazującą na AJAX.

Kolejne triki w jQuery nie są związane bezpośrednio z elementami dokumentu.


11. Blokowanie prawego przycisku myszy w jQuery

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

12. Skrócona wersja document.ready

Dla zdarzenia document.ready

$(document).ready(function() {
    ....
});

możemy zastosować zapisu:

$(function() {
    ...
});

13. Reakcja na zmianę rozmiaru okna przeglądarki

Obsługujemy po prostu zdarzenie resize okna. Możemy w ten sposób dostosować rozmiary czy wygląd elementów zależnie od rozmiaru okna.

$(window).resize(myHandler);

function myHandler() {
    alert('Obsługa ...');
}

14. Więcej?

Warto zaglądać na strony poświęcone trikom jQuery i JavaScript, takim jak:

http://css-tricks.com/snippets/jquery/

Polecam także temat na stackoverflow – zbiór ciekawych rozwiązań:

http://stackoverflow.com/questions/182630/jquery-tips-and-tricks

Triki w jQuery – podsumowanie

Framework jQuery daje programistom moc, szczególnie gdy znamy triki pomagające ją wyzwalać. Wszystko co pozwala zwiększyć nasze możliwości czy też zaoszczędzić czas, powinno być zawsze mile widziane.

Możesz skomentować leave a response, lub podać trackback z własnej strony.