Wiązanie zdarzeń w jQuery

Praktycznie każdemu zdarzeniu JavaScript odpowiada swoja metoda jQuery. Na przykład, kliknięcie elementów można przechwycić tak: $(selektor).click(funkcja).

Rozważmy następujący kod HTML:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Dla niego jest napisany CSS:

li {
	width: 100px;
	cursor: pointer;
}

Zróbmy tak, aby po kliknięciu na dowolny li wyświetlał się wykrzyknik. Kliknij na pozycje listy:

$('li').click(function() {
	alert('!');
});

Wewnątrz powiązanej funkcji dostępny jest this, odnoszący się do tego elementu, w którym wystąpiło zdarzenie (w naszym przypadku do li, na który nastąpiło kliknięcie). Tego this można używać w stylu JavaScript, na przykład, this.innerHTML lub w stylu jQuery - w tym celu tego this należy opakować w $, tak o: $(this).

Weźmy kod HTML:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Dla tego kodu są napisane następujące style CSS:

li {
	width: 100px;
}
li:hover {
	color: red;
	cursor: pointer;
}

Zróbmy tak, aby po kliknięciu na li był jej na koniec dodawany '!'. Aby sprawdzić działanie, kliknij na pozycje listy:

$('li').click(function() {
	$(this).append('!');
});

Zrób tak, aby po kliknięciu na każdy li był jej na początku dodawany '?'.

Dane są akapity. Zrób tak, aby po kliknięciu na każdy akapit na ekranie wyświetlała się jego zawartość.

Dane są akapity z liczbami. Po naciśnięciu na akapit powinien w nim pojawić się kwadrat liczby, którą on zawiera.