|
O‘zbekiston respublikasi axborot texnologiyalari va kommunikatsiyalarini rivojlantirish vazirligi muhammad al-xorazmiy nomidagi toshkent axborot texnologiyalari universiteti qarshi filiali
|
| bet | 5/8 | | Sana | 05.01.2024 | | Hajmi | 23,78 Kb. | | #130921 |
Bog'liq 3-amaliy ish Mavzu jquery selektorlar,hodisalar. Jquery ui-fayllar.orglet onReady = function () {
jQuery('button').on('click', function() {});
}
jQuery(onReady);
Buning uchun kodimizni boshqacha yozishimiz kerak. Elementni tanlab, on() usulini chaqiramiz. Birinchi argument sifatida click so’zini yuboramiz. Ikkinchi argument sifatida esa anonim funksiya yuboramiz.
onReady funksiyamizni alohida o’zgaruvchanda saqlab, keyin jQuery funksiyasiga yuborgan edik. Aslida boshqa o’zgaruvchanda saqlamasdan, birdaniga yuborish qulayroq. Lekin boshlovchi dasturchilarni bu chalg’itishi mumkin. Bir narsani eslab qoling: anonim funksiyalarni o’zgaruvchanda saqlamay, birdaniga biror usulga argument sifatida yuborishimiz mumkin.
Ushbu kodimiz: button’da, click hodisasi ro’y berganda, manabu funksiyani chaqir demoqda. Click hodisasi deganda, sichqonchaning chap tugmasi bosilgan payt nazarda tutiladi.
Hozir sichqonchamizni, ushbu tugmacha ustida bossak – hech narsa ro’y bermadi. Chunki yuborayotgan funksiyamizda hech nima yozilmagan.
jQuery('button').on('click', 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.
<
|
|
Bosh sahifa
Aloqalar
Bosh sahifa
O‘zbekiston respublikasi axborot texnologiyalari va kommunikatsiyalarini rivojlantirish vazirligi muhammad al-xorazmiy nomidagi toshkent axborot texnologiyalari universiteti qarshi filiali
|
