Sündmuste sidumine jQuery-s

Peaaegu iga JavaScripti sündmusele vastab oma jQuery meetod. Näiteks saab klõpsu elementide peal jäädvustada nii: $(selektor).click(funktsioon).

Vaatleme järgmist HTML koodi:

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

Selle jaoks on kirjutatud CSS:

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

Teeme nii, et klõpsates ükskõik millise li peal, kuvataks hüüumärk. Klõpsake loendi punktide peal:

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

Seotud funktsiooni sees on kättesaadav this, viidates sellele elemendile, kus sündmus toimus (meie puhul li-le, millele klõpsati). Seda this saab kasutada JavaScripti stiilis, näiteks this.innerHTML või jQuery stiilis - selleks tuleb see this mähkida $ sisse, nii: $(this).

Võtame HTML koodi:

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

Sellele koodile on kirjutatud järgmised CSS stiilid:

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

Teeme nii, et klõpsates li peal lisataks selle lõppu '!'. Töö kontrollimiseks klõpsake loendi punktide peal:

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