Események kötése jQuery-ben

Szinte minden JavaScript eseményhez tartozik egy saját jQuery metódus. Például az elemekre kattintást így lehet elkapni: $(selector).click(függvény).

Nézzük a következő HTML kódot:

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

Ehhez a következő CSS van megadva:

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

Tegyük fel, hogy bármelyik li-re kattintáskor egy felkiáltójel jelenjen meg. Kattintsunk a lista elemekre:

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

A kötött függvényen belül elérhető a this, amely arra az elemre hivatkozik, ahol az esemény bekövetkezett (esetünkben az li-re, amire kattintottak). Ezt a this-t használhatjuk JavaScript stílusban, például this.innerHTML vagy jQuery stílusban - ehhez a this-t be kell csomagolni $-be, így: $(this).

Vegyük a következő HTML kódot:

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

Ehhez a kódhoz a következő CSS stílusok vannak megadva:

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

Tegyük fel, hogy amikor rákattintunk egy li-re, annak a végéhez adjunk hozzá egy '!'-t. A működés ellenőrzéséhez kattintsunk a lista elemekre:

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

Tegyétek úgy, hogy minden li-re kattintáskor annak az elejéhez adjon hozzá egy '?'-t.

Adottak bekezdések. Tegyétek úgy, hogy minden bekezdésre kattintáskor annak a tartalma jelenjen meg a képernyőn.

Adottak számokat tartalmazó bekezdések. Egy bekezdésre kattintáskor annak tartalmaznia kell a benne lévő szám négyzetét.