Įvykių pririšimas jQuery

Beveik kiekvienam JavaScript įvykiui atitinka savo jQuery metodas. Pavyzdžiui, paspaudimą ant elementų galima pagauti taip: $(selektorius).click(funkcija).

Panagrinėkime šį HTML kodą:

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

Jam parašytas CSS:

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

Padarykime taip, kad paspaudus ant bet kurios li būtų išvestas šauktukas. Paspauskite ant sąrašo punktų:

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

Viduje pririštos funkcijos prieinamas this, nuorodą į tą elementą, kuriame įvyko įvykis (mūsų atveju į li, ant kurios buvo paspausta). Šį this galima naudoti JavaScript stiliumi, pavyzdžiui, this.innerHTML arba jQuery stiliuje - tam šį this reikia apvynioti į $, štai taip: $(this).

Paimkime HTML kodą:

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

Šiam kodui parašyti šie CSS stiliai:

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

Padarykime taip, kad paspaudus ant li jai į galą būtų pridėtas '!'. Norėdami patikrinti veikimą, paspauskite ant sąrašo punktų:

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