Pengikatan Peristiwa dalam jQuery

Hampir setiap peristiwa JavaScript mempunyai kaedah jQuery yang sepadan. Sebagai contoh, klik pada elemen boleh dikesan seperti ini: $(pemilih).click(fungsi).

Pertimbangkan kod HTML berikut:

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

CSS telah ditetapkan untuknya:

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

Mari kita buat supaya apabila klik pada mana-mana li, tanda seru akan dipaparkan. Klik pada item senarai:

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

Di dalam fungsi terikat, this tersedia, merujuk kepada elemen di mana peristiwa itu berlaku (dalam kes kami, li yang diklik). this ini boleh digunakan dalam gaya JavaScript, contohnya, this.innerHTML atau dalam gaya jQuery - untuk ini, this tersebut perlu dibungkus dalam $, seperti ini: $(this).

Ambil kod HTML:

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

Kod ini mempunyai gaya CSS berikut:

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

Mari kita buat supaya apabila klik pada li, '!' ditambahkan pada penghujungnya. Untuk menguji fungsi, klik pada item senarai:

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

Buat supaya apabila klik pada setiap li, '?' ditambahkan pada awalnya.

Diberi perenggan. Buat supaya apabila klik pada setiap perenggan, kandungannya dipaparkan pada skrin.

Diberi perenggan dengan nombor. Apabila ditekan pada perenggan, kuasa dua nombor yang dikandungnya harus muncul di dalamnya.