Legarea evenimentelor în jQuery

Aproape fiecărui eveniment JavaScript îi corespunde o metodă jQuery. De exemplu, clicul pe elemente poate fi captat astfel: $(selector).click(funcție).

Să analizăm următorul cod HTML:

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

Pentru acesta este scris CSS:

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

Să facem astfel încât la clic pe orice li să se afișeze un semn de exclamare. Apăsați pe punctele listei:

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

În interiorul funcției legate este disponibil this, care se referă la acel element în care a avut loc evenimentul (în cazul nostru pe li, pe care a fost făcut clic). Acest this poate fi folosit în stil JavaScript, de exemplu, this.innerHTML sau în stil jQuery - pentru aceasta acest this trebuie înfășurat în $, astfel: $(this).

Să luăm codul HTML:

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

La acest cod sunt scrise următoarele stiluri CSS:

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

Să facem astfel încât la clic pe li să i se adauge la sfârșit '!'. Pentru a verifica funcționarea, apăsați pe punctele listei:

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