Kufungisha Matukio katika jQuery

Karibu kila tukio la JavaScript lina sambamba na mbinu yake ya jQuery. Kwa mfano, kubofya kwa vipengele kunaweza kushikiliwa kama ifuatavyo: $(kichaguzi).click(kazi).

Wacha tuchunguze msimbo wa HTML ufuatao:

html<ul>
  <li>maandishi</li>
  <li>maandishi</li>
  <li>maandishi</li>
</ul>

Kwa ajili yake umeandikwa CSS:

cssli {
  upana: 100px;
  kiashiria: kidude;
}

Wacha tufanye ili kwa kubofya kwa yoyote li ionyeshe alama ya mshangao. Bofya vipengee vya orodha:

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

Ndani ya kazi iliyofungwa kupatikana this, ikinrejelea kipengele ambacho tukio lilitokea (katika kesi yetu kwenye li, ambayo ilibofywa). Hii this inaweza kutumika kwa mtindo JavaScript, kwa mfano, this.innerHTML au kwa mtindo wa jQuery - kwa ajili hii this inapaswa kufungwa kwenye $, kama hivi: $(this).

Wacha tuchukue msimbo wa HTML:

html<ul>
  <li>maandishi</li>
  <li>maandishi</li>
  <li>maandishi</li>
</ul>

Kwa msimbo huu umeandikwa mitindo ifuatayo ya CSS:

cssli {
  upana: 100px;
}
li:hover {
  rangi: nyekundu;
  kiashiria: kidude;
}

Wacha tufanye ili kwa kubofya kwa li iongezwe mwishoni '!'. Kwa kukagua utendakazi bofya kwenye vipengee vya orodha:

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