jQueryда вожибаларни боглаш

Деярли ҳар бир JavaScript вожибасига ўзига хос jQuery услуби мос келади. Масалан, элементларга босганда шундай қилиб топса бўлади: $(селектор).click(функция).

Куйидаги HTML кодни кўриб чиқайлик:

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

Унга CSS ёзилган:

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

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

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

Богланган функция ичида this мавжуд, у вожиба содир бўлган элементга ишора қилади (бизнинг ҳолимизда босилган li га). Бу this ни JavaScript услубида ишлатиш мумкин, масалан, this.innerHTML ёки jQuery услубида - бунинг учун this ни $ га ўраб қўйиш керак, мана бу йўл билан: $(this).

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

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

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

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

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

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