jQuery-da hodisalarni bog‘lash

Deyarli har bir JavaScript hodisasi uchun o‘zining jQuery metodi mavjud. Masalan, elementlar ustida bosish shunday usulda aniqlanishi mumkin: $(selector).click(funktsiya).

Quyidagi HTML kodni ko‘rib chiqaylik:

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

Uchun CSS yozilgan:

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

Keling, har qanday li ustida bosilganda undov belgisi chiqadigan qilaylik. Ro‘yxat bandlari ustiga bosing:

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

Bog‘langan funktsiya ichida this mavjud, hodisa yuz bergan elementga ishora qiladi (bizning holatda, bosilgan li). Ushbu this dan JavaScript uslubida foydalanish mumkin, masalan, this.innerHTML yoki jQuery uslubida - buning uchun this ni $ ga o‘rab qo‘yish kerak, shunday: $(this).

HTML kodini olaylik:

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

Ushbu kod uchun quyidagi CSS uslublari yozilgan:

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

Keling, li ustida bosilganda uning oxiriga '!' qo‘shilsin. Ishni tekshirish uchun ro‘yxat bandlari ustiga bosing:

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

Qiling, har bir li ustida bosilganda uning boshiga '?' qo‘shilsin.

Abzatslar berilgan. Qiling, har bir abzats ustida bosilganda ekranga uning tarkibi chiqsin.

Raqamli abzatslar berilgan. Abzats ustida bosilganda unda o‘zida mavjud bo‘lgan sonning kvadrati paydo bo‘lsin.