Przydatne instrukcje jQuery

Projektując w jQuery często korzystam z tych samych instrukcji - od elementarnych poleceń, po całe "skrawki kodu" odpowiadające za poszczególne efekty lub mechanizmy. Kiedy chcę wdrożyć je do nowego projektu, potrzebuję jednak przypomnieć Sobie, gdzie ostatnio z nich korzystałem: odnaleźć ten projekt, otworzyć odpowiedni plik i zlokalizować właściwy fragment kodu. Nie zawsze jest oczywiste, w którym z archiwalnych projektów używałem danego rozwiązania - co utrudnia i wydłuża pracę.

Stąd postanowiłem rzecz maksymalnie ułatwić, opracowując kompleksową ściągawkę przydatnych poleceń jQuery. Jest ona subiektywna, tj. zawiera tylko te polecenia, które przydają Mi się najczęściej (nie jest to więc uniwersalne kompendium z większością jQuery'owej składni). Niemniej jednak - z uwagi na to, iż to właśnie te polecenia odnalazłem najbardziej przydatnymi w Mym projektowaniu - prawdopodobnie przydadzą się i Tobie :) .

P.S.: sukcesywnie będę rozbudowywał to opracowanie o nowe komendy :) .

Jako "element" wstawiasz dowolny element posiadający identyfikator lub klasę (np. #layput, .opis, itd.). Możesz również precyzyjniej wskazywać elementy, dokładnie tak jak w CSSie (np. samo a odnosi się do wszystkich linków na stronie, natomiast #ul a oznaczać będzie tylko linki zawarte wewnątrz list wypunktowanych/numerowanych).

Operacje dot. CSS.

Czasem może się przydawać, np. w potrzebie dodawania/usuwania klas CSS "w locie", czy efektywnego nadania interesujących Cię cech CSS danemu elementowi, gdy opiera się definicjom zawartym w innych miejscach (jak np. w przypadku klas p.contact-form-error-message oraz p.contact-form-success-message w gadżecie formularza kontaktowego Bloggera).

/* nadawanie klasy */
$("element").addClass("nazwa_klasy")

/* usuwanie klasy */
$( "element" ).removeClass( "nazwa_klasy" );

/* nadanie cech CSS (parametry i wartości definiujesz tak samo, jak w klasycznym CSSie) */
$( "element" ).css({ "ParametrCSS":"WartośćParametruCSS", "Parametr2CSS":"WartośćParametru2CSS" });

lu bardziej przejrzysty zapis (z przykładowymi parametrami i wartościami):

$( "element" ).css
({
"font-family":"Open Sans Condensed",
"text-align":"right",
"float":"right",
"width":"270px"
});

Usuwanie atrybutów.

Może się przydawać w wielu sytuacjach, np. kiedy używasz OpenLiveWriter, a chcesz by obrazki na Twej stronie automatycznie dopasowywały się do szerokości okna/boksu, automatycznie dodawane przez Writera parametry width i height zdjęcia psują szyki. Na pomoc przychodzi wówczas poniższy fragment kodu:

/* usuwa parametry wysokości i szerokości obrazków */
$("img").removeAttr( "height" ).removeAttr( "width" )

Inny przykład - kiedy potrzebujesz linku, który po kliknięciu sam z siebie nie załaduje żadnej strony, ale nadal będzie linkiem:

/* usuwa atrybut href z linków (w tym przypadku zawartych w akapitach o klasie "opis") */
$("p.opis a").removeAttr( "href" )

Dodawanie fragmentów kodu "w locie".

Dzięki tym komendom możesz dodawać dynamicznie dany kod w określonych przez Ciebie miejscach na stronie. Uwaga: nazwy identyfikatorów oraz klas podawaj w apostrofach.

/* wstawia interesujący Cię fragment kodu przed elementem */
$( "element" ).before( "kod" );

/* wstawia interesujący Cię fragment kodu za elementem */
$( "element" ).after( "kod" );

/* dołącza interesujący Cię fragment kodu do elementu (na jego końcu) */
$( "element" ).append( "kod" );

/* zamienia zawartość elementu wskazanym kodem */
$('element').html( "kod" );

Kopiowanie oraz usuwanie elementów.

/* zastępuje zawartość elementu docelowego zawartością elementu źródłowego (w którym nadal pozostaje!) */
$("element_docelowy").html($("element_źródłowy").html());

/* usuwa element całkowicie ze strony (a nie tylko ukrywa) */
$("element").remove();

Zdarzenia po kliknięciu, najechaniu myszką lub opuszczeniu obszaru przez kursor.

$('element').on("click", function() {
tu wstawiasz instrukcje jQuery które mają być wykonane po kliknięciu elementu myszką
});

$('element').on("mouseenter", function() {
tu wstawiasz instrukcje jQuery które mają być wykonane po najechaniu na element myszką
});

$('element').on("mouseleave", function() {
tu wstawiasz instrukcje jQuery które mają być wykonane po opuszczeniu obszaru elementu przez kursor
});