Gebeurtenisbinding in jQuery

Byna elke JavaScript-gebeurtenis het sy eie jQuery-metode. Byvoorbeeld, 'n klik op elemente kan soos volg gevang word: $(selector).click(funksie).

Kom ons kyk na die volgende HTML-kode:

html<ul>
  <li>teks</li>
  <li>teks</li>
  <li>teks</li>
</ul>

Daar is CSS daarvoor geskryf:

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

Kom ons maak dit so dat 'n klik op enige li 'n uitroepteken toon. Druk op die punte van die lys:

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

Binne die gekoppelde funksie is this beskikbaar, wat verwys na die element waarin die gebeurtenis plaasgevind het (in ons geval die li waarop geklik is). Hierdie this kan in JavaScript-styl gebruik word, bv. this.innerHTML of in jQuery-styl - hiervoor moet hierdie this ingewikkel word in $, soos volg: $(this).

Neem die HTML-kode:

html<ul>
  <li>teks</li>
  <li>teks</li>
  <li>teks</li>
</ul>

Die volgende CSS-style is vir hierdie kode geskryf:

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

Kom ons maak dit so dat 'n klik op li 'n '!' by die einde daarvan voeg. Om die werking te toets, druk op die punte van die lys:

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