Вобаста кардани воқеаҳо дар jQuery

Ба ҳар як воқеаи JavaScript тақрибан як усули jQuery мувофиқат мекунад. Масалан, клик кардан ба элементҳоро ин тавр мушоҳида кардан мумкин аст: $(selector).click(function).

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 - барои ин ин 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 дар охираш '!' илова кунад. Барои санҷиши кор ба пунктҳои рӯйхат клик кунед:

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

Чунин кунед, ки клик кардан ба ҳар як li дар оғозаш '?' илова шавад.

Абзасҳо дода шудаанд. Чунин кунед, ки клик кардан ба ҳар як абзас мундариҷаи он ба экран чоп шавад.

Абзасҳо бо рақамҳо дода шудаанд. Зери абзас дар он чоркунии рақаме пайдо кардан бояд, ки он дорои он аст.