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:

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

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

li {
	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:

$('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:

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

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

li {
	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:

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

Elə edin ki, hər bir li üzərində klik edəndə onun əvvəlinə '?' əlavə olunsun.

Abzaslar verilib. Elə edin ki, hər bir abzaşa klik edəndə ekranda onun məzmunu çıxsın.

Rəqəmləri olan abzaslar verilib. Abzaşa klik edəndə onun içərisindəki rəqəmin kvadratı görünməlidir.