jQuery-те оқиғаларды байланыстыру

JavaScript-тің барлық оқиғаларына дерлік jQuery-дің өз әдісі сәйкес келеді. Мысалы, элементтерге шертуді былай бақылауға болады: $(селектор).click(функция).

Келесі HTML кодын қарастырайық:

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

Оған CSS жазылған:

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

Кез келген li-ге шертуге үн қою белгісі шығатындай етейік. Тізім бөлімдерін басып көріңіз:

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

Байланған функция ішінде this қол жетімді, ол оқиға болған элементке сілтеме жасайды (біздің жағдайда шерту жасалған li-ге). Бұл this-ті JavaScript стилінде қолдануға болады, мысалы, this.innerHTML немесе jQuery стилінде - бunл үшін this-ті $-ке орау керек, мынаны: $(this).

HTML кодын алайық:

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

Бұл кодқа келесі CSS стильдері жазылған:

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

li-ге шертуге оның соңына '!' қосылатындай етейік. Жұмыс iстеуін тексеру үшін тізім бөлімдерін басып көріңіз:

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

Кез келген li-ге шертуге оның басына '?' қосылатындай етіңіз.

Абзацтар берілген. Кез келген абзацқа шертуге экранда оның мазмұры шығатындай етіңіз.

Сандары бар абзацтар берілген. Абзацқа басуға онда санның квадраты пайда болуы керек.