Jquery selektorlar,hodisalar. Jquery ui

function() {
jQuery(
this).css('background-color', 'red');
});
Funksiya ichida, sal oldinroq yozgan kodimizga o’xshash kod yozamiz. Bu yerda this obyekti –
button elementi bilan bir.
Brauzerda F5 tugmachasini bosamiz, ya’ni sahifamizni yangilaymiz. Hech narsa o’zgarmadi,
chunki funksiyamiz faqat click hodisasi ro’y berganda chaqiriladi.
Keling, tugma ustiga bosamiz, rostdan ham uning rangi o’zgardi.
Click hodisasi aslida ikki boshqa hodisalardan iborat. Mousedown [maus davn], ya’ni sichqoncha
tugmachasi pastga tushishi va Mouseup [maus ap], ya’ni sichqoncha tugmasi yuqoriga qaytishi.
jQuery('button').on('mousedown',
function() {
jQuery(
this).css('border-style', 'inset');
});
Funksiyamiz click hodisasida emas, mousedown’da ishlasin. Hususiyatimiz background-color
emas border-style bo’lsin. Qiymatimiz esa: inset.
Elemenimiz ustiga bosamiz. Ramka stili o’zgardi. Rostdan ham bosilish effekti paydo bo’ldi.
Endi sichqoncha tugmachasi ortga qaytganda, ramkamiz stilini avvalgi holatiga qaytaraylik
jQuery('button').on('mousedown',
function() {
jQuery(
this).css('border-style', 'inset');
});
jQuery('button').on('mouseup',
function() {
jQuery(
this).css('border-style', 'outset');
});

---

Mouseup hodisasi uchun funksiya yozamiz. Bu yerda sichqoncha tugmasi yuqoriga ko’tarilganda
button elementimiz ramka stili – yana outset qiymatiga o’zgarishini ko’rsatdik.
Ko’rib turganingizdek, endi button elementimizga bossak, chiroyli bosilish effekti paydo bo’ldi.
Mouseup hodisasi ro’y berganda, ramka stilini o’zgartirishdan tashqari, ikki input’dagi
raqamlarni bir-biriga qo’shaylik.
<
input id="num1" type="text" size="5" />
<
span>+span>
<