3-amaliy ish Mavzu: jquery selektorlar,hodisalar. Jquery ui

Tugmachamizni topib olish qiyin emas, jQuery funksiyasiga argument sifatida funksiya yuborsak, brauzer tayyor bo’lganda, u ushbu funksiyani chaqiradi dedik. Agar jQuery funksiyasiga string turiga mansub qiymat yuborsak, jQuery uni selector deb tushunadi va kerakli elementni topib oladi. Bu yerda selector tushunchasi, huddi CSS dagi bilan bir.
Shuning uchun ham button deb yozsak – jQuery elementimizni topib beradi.



Aslida u mahsus obyekt qaytaradi. Bu obyektning juda foydali usullari bor. Misol uchun css() usuli – biror css xususiyatini o’zgartirish uchun hizmat qiladi. Birinchi argument sifatida css xususiyati nomi, ikkinchi argument sifatida esa, uning qiymatini ko’rsatish kerak. Ko’rib turganingizdek tugmacha foni qizil rangga o’zgardi.
JavaScript tilida ko’proq hodisaviy dasturlash ishlatiladi. Hodisaviy deganda, biror voqea, hodisa ro’y berganda – ishlaydigan funksiyar yaratishimiz nazarda tutiladi. Misol uchun onReady degan funksiya yaratdik, u faqatgina brauzer tayyor bo’lganda chaqirilsin dedik.
Keling, ushbu fon o’zgarishi ham birdaniga emas, tugmacha ustiga bosilganda ro’y bersin.


let 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.


<