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:

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

Dla niego jest napisany CSS:

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

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

javascript$('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:

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

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

cssli {
  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:

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