jQueryде окуяларды байлоо

Дээрлик ар бир JavaScript окуясына туура келет өз jQuery методу. Мисалы, элементтерге чыкылдатуу ушундай жол менен каршы алынышы мүмкүн: $(селектор).click(функция).

Төмөнкү HTML кодун карап көрөлү:

<ul>
	<li>текст</li>
	<li>текст</li>
	<li>текст</li>
</ul>

Ага CSS жазылган:

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

Келгиле, ар бир liге чыкылдаганда үнүмдүү белги чыгарылсын. Тизме пункттарына чыкылдап көрүңүз:

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

Баланган функциянын ичинде this кол жеткилуу, окуя болгон элементти көрсөтөт (биздин учурда, чыкылдатуу жасалган li). Бул this JavaScript стилинде колдонсо болот, мисалы, this.innerHTML же jQuery стилинде - бул үчүн this $ге ороп коюу керек, мындай: $(this).

HTML кодун алалы:

<ul>
	<li>текст</li>
	<li>текст</li>
	<li>текст</li>
</ul>

Бул кодго төмөнкү CSS стилдери жазылган:

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

Келгиле, liге чыкылдаганда анын аягына '!' кошулсун. Иштөөсүн текшерүү үчүн тизме пункттарына чыкылдаңыз:

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

Ар бир liге чыкылдаганда анын башына '?' кошулгандай кылыңыз.

Абзацтар берилген. Ар бир абзацга чыкылдаганда экранга анын мазмуну чыккандай кылыңыз.

Сандары бар абзацтар берилген. Абзацка чыкылдаганда анда мында турган сандын квадраты пайда болсун.