Lidhja e Ngjarjeve në jQuery

Pothuajse çdo ngjarje JavaScript ka metodën e vet përkatëse në jQuery. Për shembull, klikimi në elementë mund të kapet kështu: $(selector).click(funksioni).

Le të shqyrtojmë kodin HTML vijues:

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

Për të është shkruar CSS:

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

Le ta bëjmë që me klik në çdo li të shfaqet një shenjë pikëçuditëse. Klikoni në pikat e listës:

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

Brenda funksionit të lidhur është i disponueshëm this, që i referohet atij elementi, në të cilin ndodhi ngjarja (në rastin tonë li në të cilin u klikua). Ky this mund të përdoret në stilin JavaScript, për shembull, this.innerHTML ose në stilin jQuery - për këtë ky this duhet të mbështjellhet në $, kështu: $(this).

Le të marrim kodin HTML:

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

Për këtë kod janë shkruar stilet CSS vijuese:

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

Le ta bëjmë që me klik në li asaj në fund t'i shtohet '!'. Për të kontrolluar funksionimin, klikoni në pikat e listës:

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

Bëni që me klik në çdo li asaj në fillim t'i shtohet '?'.

Janë dhënë paragrafë. Bëni që me klik në çdo paragraf të shfaqet në ekran përmbajtja e tij.

Janë dhënë paragrafë me numra. Me shtypje në paragraf në të duhet të shfaqet katrori i numrit që ai përmban.