jQuery-də hadisələrin bağlanması

Demək olar ki, hər bir JavaScript hadisəsinə uyğun öz jQuery metodu var. Məsələn, elementlərə klik bununla yaxalana bilər: $(selektor).click(funksiya).

Aşağıdakı HTML kodunu nəzərdən keçirək:

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

Bunun üçün CSS yazılıb:

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

Gəlin elə edək ki, hər hansı li üzərində klik edəndə nida işarəsi çıxsın. Siyahı bəndlərinin üzərinə klikləyin:

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

Bağlanmış funksiya daxilində this əlçatandır, hansı ki, hadisənin baş verdiyi elementi göstərir (bizim halda kliklənən li elementi). Bu this JavaScript stilində istifadə edilə bilər, məsələn, this.innerHTML və ya jQuery stilində - bunun üçün bu this $-də bükülməlidir, belə: $(this).

HTML kodunu götürək:

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

Bu kod üçün aşağıdakı CSS stilləri yazılıb:

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

Gəlin elə edək ki, li üzərində klik edəndə onun sonuna '!' əlavə olunsun. İşini yoxlamaq üçün siyahı bəndlərinin üzərinə klikləyin:

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