Penanganan Peristiwa dalam jQuery

Hampir setiap peristiwa JavaScript memiliki metode jQuery yang sesuai. Misalnya, klik pada elemen dapat ditangkap seperti ini: $(selector).click(fungsi).

Perhatikan kode HTML berikut:

<ul>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
</ul>

Untuk itu, CSS berikut telah ditulis:

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

Mari kita buat agar ketika diklik pada sembarang li akan ditampilkan tanda seru. Coba klik pada item daftar:

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

Di dalam fungsi yang terikat, tersedia this, yang merujuk ke elemen tempat peristiwa terjadi (dalam kasus kita, li yang diklik). this ini dapat digunakan dalam gaya JavaScript, misalnya this.innerHTML atau dalam gaya jQuery - untuk ini, this tersebut harus dibungkus dengan $, seperti ini: $(this).

Ambil kode HTML:

<ul>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
</ul>

Untuk kode ini, gaya CSS berikut telah ditulis:

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

Mari kita buat agar ketika diklik pada li akan ditambahkan '!' di akhirnya. Untuk menguji kerjanya, coba klik pada item daftar:

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

Buatlah agar ketika diklik pada setiap li ditambahkan '?' di awalnya.

Diberikan beberapa paragraf. Buatlah agar ketika diklik pada setiap paragraf, ditampilkan di layar isi darinya.

Diberikan beberapa paragraf dengan angka. Saat diklik pada paragraf, harus muncul di dalamnya kuadrat dari angka yang dikandungnya.