Notikumu piesaiste jQuery

Gandrīz katram JavaScript notikumam atbilst sava jQuery metode. Piemēram, klikšķi uz elementiem var uztvert šādi: $(selektors).click(funkcija).

Apskatīsim šādu HTML kodu:

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

Tam ir uzrakstīts CSS:

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

Izveidosim tā, lai, uzklikšķinot uz jebkuras li, tiktu izvadīts izsaukuma zīme. Uzklikšķiniet uz saraksta punktiem:

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

Piesaistītās funkcijas iekšienē ir pieejams this, kas norāda uz to elementu, kurā notika notikums (mūsu gadījumā uz li, uz kuru tika uzklikšķināts). Šo this var izmantot JavaScript stilā, piemēram, this.innerHTML vai jQuery stilā - šim nolūkam šis this ir jāienes $, šādi: $(this).

Paņemsim HTML kodu:

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

Šim kodam ir uzrakstīti šādi CSS stili:

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

Izveidosim tā, lai, uzklikšķinot uz li, tai beigās tiktu pievienota '!'. Lai pārbaudītu darbību, uzklikšķiniet uz saraksta punktiem:

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

Izveidojiet tā, lai, uzklikšķinot uz katru li, tai sākumā tiktu pievienots '?'.

Doti rindkopas. Izveidojiet tā, lai, uzklikšķinot uz katru rindkopu, ekrānā tiktu izvadīts tās saturs.

Doti rindkopas ar skaitļiem. Nospiežot uz rindkopas, tajā jāparādās tās skaitļa kvadrāts, ko tā satur.