Įvykių pririšimas jQuery

Beveik kiekvienam JavaScript įvykiui atitinka savo jQuery metodas. Pavyzdžiui, paspaudimą ant elementų galima pagauti taip: $(selektorius).click(funkcija).

Panagrinėkime šį HTML kodą:

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

Jam parašytas CSS:

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

Padarykime taip, kad paspaudus ant bet kurios li būtų išvestas šauktukas. Paspauskite ant sąrašo punktų:

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

Viduje pririštos funkcijos prieinamas this, nuorodą į tą elementą, kuriame įvyko įvykis (mūsų atveju į li, ant kurios buvo paspausta). Šį this galima naudoti JavaScript stiliumi, pavyzdžiui, this.innerHTML arba jQuery stiliuje - tam šį this reikia apvynioti į $, štai taip: $(this).

Paimkime HTML kodą:

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

Šiam kodui parašyti šie CSS stiliai:

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

Padarykime taip, kad paspaudus ant li jai į galą būtų pridėtas '!'. Norėdami patikrinti veikimą, paspauskite ant sąrašo punktų:

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

Padarykite taip, kad paspaudus ant kiekvienos li jai į pradžią būtų pridėtas '?'.

Duoti pastraipos. Padarykite taip, kad paspaudus ant kiekvienos pastraipos ekrane būtų rodomas jos turinys.

Duoti pastraipos su skaičiais. Paspaudus ant pastraipos joje turi pasirodyti skaičiaus, kurį ji turi, kvadratas.