Przykłady zastosowań JQuery

  • ukrywanie elementów strony
  • ukrywanie odsyłaczy
  • zmiana czcionki
  • nadawanie koloru tła do pola w formularzu
  • okno komunikatu po kliknięciu
  • usuwanie akapitu po dwukrotnym kliknięciu
  • okno komunikatu po wskazaniu myszą elementu
  • Odpowiedź do pytania po kliknięciu myszą na treści pytania
  • Wypisuje współrzędne punktu, w którym nastąpiło kliknięcie
  • wypis danych z klikniętego klawisza
  • powiększanie obrazka po kliknięciu
  • metoda fadeIn() - płynna wizualizacja
  • metoda slideDown() - przesuwanie elementów
  • metoda animate - animacja obiektów na stronie
  • metoda animate - powiększanie obrazka
  • powiększanie czcionki w akapicie

    • Dobra praktyka

    mieszczanie metod JQuery w funkcji np.: 

    	$(document).ready(function() {
	//metody JQuery ...
	{ );
    zapobiega rozpoczęciu wykonywania kodu JQuery, dopóki dokument nie zostanie w całości wczytany.

    Alternatywna składnia ma postać: 

    	$(function() {
	//metody JQuery ...
	} );

    Selektory JQuery

    Podstawowym hasłem w jQuery jest „Znajdź element(y) i zrób coś z nim(i)”.
    Selektory JQuery pozwalają na wybór elementów na stronie WWW
    Do wskazania elementu można użyć np.:
    id, klasy, typu, atrybutu, wartości atrybutu i innych

    Wszystkie selektorry w JQuery zaczynaja się od znaku dolara i nawiasów: $()

    Akapit

    Aby wskazać element na podstawie nazwy elementu nalezy posłużyc się selektorem $("p"). Element noszący nazwę hide należu

    Przeglądanie drzewa DOM dokumentu HTML jest bardzo proste przy użyciu selektorów z jQuery.
    $("h1") - selekcja wszystkich elementów h1
    $(".klasa") - selekcja wszystkich elementów posiadających klasę klasa
    $("#id_elementu") - selekcja elementu o id = id_elementu - jest to najszybszy dostępny selektor
    $("*") - pobiera wszystkie elementy na stronie
    $("p.klasa") - wybiera wszystkie elementy p posiadające klasę klasa
    $("p:first") - wybiera pierwszy element typu p
    $("[name]") - wybiera wszystkie elementy posiadające atrybut name
    $("form[name='formatka1']") - wybiera wszystkie formularze o nazwie formatka1
    $("a, p, div") - wyszukiwanie wielu na raz
    $("div p") - wybiera wszystkie paragrafy znajdujące się w elemencie div

    Metody pomocnicze:
    $(".klasa").parent() - wyszukuje wszystkie elementy nadrzędne do tych o klasie klasa
    $(".klasa").children() - Elementy zawarte w elementach o klasie klasa
    $(".klasa").prev() / .next() - element po prawej/lewej stronie elementów o klasie klasa
    Korzystając z wymienionych funkcji można w łatwy sposób zmieniać całą strukturę drzewa DOM dokumentu HTML.