Իվենթների կապում 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 ստիլները՝

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

Եկեք անենք, որ li-ի վրա կլիկի դեպքում նրա վերջում ավելանա '!': Աշխատանքը ստուգելու համար սեղմեք ցուցակի կետերի վրա՝

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