jQuery-те оқиғаларды байланыстыру

JavaScript-тің барлық оқиғаларына дерлік jQuery-дің өз әдісі сәйкес келеді. Мысалы, элементтерге шертуді былай бақылауға болады: $(селектор).click(функция).

Келесі HTML кодын қарастырайық:

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

Оған CSS жазылған:

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

Кез келген li-ге шертуге үн қою белгісі шығатындай етейік. Тізім бөлімдерін басып көріңіз:

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

Байланған функция ішінде this қол жетімді, ол оқиға болған элементке сілтеме жасайды (біздің жағдайда шерту жасалған li-ге). Бұл this-ті JavaScript стилінде қолдануға болады, мысалы, this.innerHTML немесе jQuery стилінде - бunл үшін this-ті $-ке орау керек, мынаны: $(this).

HTML кодын алайық:

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

Бұл кодқа келесі CSS стильдері жазылған:

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

li-ге шертуге оның соңына '!' қосылатындай етейік. Жұмыс iстеуін тексеру үшін тізім бөлімдерін басып көріңіз:

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