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:

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

Uchun CSS yozilgan:

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

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

javascript$('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:

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

Ushbu kod uchun quyidagi CSS uslublari yozilgan:

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

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

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