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

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

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

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

მისთვის written CSS:

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

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

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

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

ავიღოთ HTML კოდი:

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

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

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

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

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

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

მოცემულია აბზაცები. გააკეთეთ ისე, რომ ყოველ აბზაცზე დაწკაპუნებაზე ეკრანზე გამოჩნდეს მისი შიგთავსი.

მოცემულია აბზაცები რიცხვებით. აბზაცზე დაწკაპუნებაზე მასში უნდა გამოჩნდეს მასში არსებული რიცხვის კვადრატი.