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.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook0Tweet about this on TwitterShare on Google+1Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.