jQueryде окуяларды байлоо

Дээрлик ар бир JavaScript окуясына туура келет өз jQuery методу. Мисалы, элементтерге чыкылдатуу ушундай жол менен каршы алынышы мүмкүн: $(селектор).click(функция).

Төмөнкү HTML кодун карап көрөлү:

html<ul>
  <li>текст</li>
  <li>текст</li>
  <li>текст</li>
</ul>

Ага CSS жазылган:

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

Келгиле, ар бир liге чыкылдаганда үнүмдүү белги чыгарылсын. Тизме пункттарына чыкылдап көрүңүз:

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

Баланган функциянын ичинде this кол жеткилуу, окуя болгон элементти көрсөтөт (биздин учурда, чыкылдатуу жасалган li). Бул this JavaScript стилинде колдонсо болот, мисалы, this.innerHTML же jQuery стилинде - бул үчүн this $ге ороп коюу керек, мындай: $(this).

HTML кодун алалы:

html<ul>
  <li>текст</li>
  <li>текст</li>
  <li>текст</li>
</ul>

Бул кодго төмөнкү CSS стилдери жазылган:

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

Келгиле, liге чыкылдаганда анын аягына '!' кошулсун. Иштөөсүн текшерүү үчүн тизме пункттарына чыкылдаңыз:

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