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 услубида - бунинг учун this ни $ га ўраб қўйиш керак, мана бу йўл билан: $(this).

HTML кўдни оламиз:

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

Бу кодга куйидаги CSS uslublari ёзилган:

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

Келинг, li га босганда унинг охирига '!' қўшиладиган қилайлик. Ишлашини текшириш учун рўйхат пунктларига босинг:

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

Ҳар бир li га босганда унинг бошлага '?' қўшиладиган қилинг.

Абзацлар берилган. Ҳар бир абзацга босганда экранга унинг контенти чиқадиган қилинг.

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