მოვლენების მიბმა jQuery-ში

JavaScript-ის თითქმის ყველა მოვლენას შეესაბამება თავისი jQuery-ის მეთოდი. მაგალითად, ელემენტებზე დაწკაპუნება შეგიძლია ასე დაიჭირო: $(სელექტორი).click(ფუნქცია).

განვიხილოთ შემდეგი HTML კოდი:

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

მისთვის written 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>text</li>
  <li>text</li>
  <li>text</li>
</ul>

ამ კოდისთვის writtenა შემდეგი CSS სტილები:

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

მოდით გავაკეთოთ ისე, რომ li-ზე დაწკაპუნებაზე მას ბოლოში დაემატოს '!'. მუშაობის შესამოწმებლად დააწკაპუნეთ სიის პუნქტებზე:

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