Իվենթների կապում jQuery-ում

Գործնականում ամեն JavaScript իվենթին համապատասխանում է իր jQuery մեթոդը: Օրինակ, էլեմենտների վրա կլիկը կարելի է բռնել այսպես՝ $(սելեկտոր).click(ֆունկցիա):

Դիտարկենք հետևյալ HTML կոդը՝

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

Դրա համար գրված է CSS՝

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

Եկեք անենք, որ ցանկացած li-ի վրա կլիկի դեպքում արտածվի բացականչական նշան: Սեղմեք ցուցակի կետերի վրա՝

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

Կապված ֆունկցիայի ներսում հասանելի է this-ը, որը հղվում է այն էլեմենտին, որում տեղի է ունեցել իվենթը (մեր դեպքում այն li-ին, որի վրա կլիկ է արվել): Այս this-ը կարելի է օգտագործել JavaScript-ի ստիլով, օրինակ՝ this.innerHTML կամ jQuery-ի ստիլով - դրա համար այս this-ը պետք է փաթաթել $-ի մեջ, ահա այսպես՝ $(this):

Վերցնենք HTML կոդը՝

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

Այս կոդի համար գրված են հետևյալ CSS ստիլները՝

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

Եկեք անենք, որ li-ի վրա կլիկի դեպքում նրա վերջում ավելանա '!': Աշխատանքը ստուգելու համար սեղմեք ցուցակի կետերի վրա՝

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

Անեք, որ ամեն մի li-ի վրա կլիկի դեպքում նրա սկզբում ավելանա '?':

Տրված են պարբերություններ: Անեք, որ ամեն մի պարբերության վրա կլիկի դեպքում էկրանին արտածվի դրա պարունակությունը:

Տրված են թվերով պարբերություններ: Պարբերության վրա կլիկի դեպքում նրա մեջ պետք է հայտնվի նրա մեջ գտնվող թվի քառակուսին: