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:

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

Kwa ajili yake umeandikwa CSS:

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

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

$('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:

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

Kwa msimbo huu umeandikwa mitindo ifuatayo ya CSS:

li {
	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:

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

Fanya ili kwa kubofya kwa kila li iongezwe mwanzo '?'.

Kuna aya. Fanya ili kwa kubofya kwa kila aya kwenye skrini ionyeshe yaliyomo ndani yake.

Kuna aya zilizo na nambari. Kwa kubofya kwenye aya ndani yake inapaswa kuonekana mraba wa nambari, ambayo inayo.