O‘ZBEKISTON RESPUBLIKASI RAQAMLI TEXNOLOGIYALAR VAZIRLIGI MUHAMMAD AL-XORAZMIY NOMIDAGI TOSHKENT AXBOROT TEXNOLOGIYALARI UNIVERSITETI
Web dasturlash fanidan Labaratoriya ish-4
Bajardi: Komilov JALOLIDDIN
Toshkent 2024
Laboratoriya № 7.
Mavzu: JQuery selektorlar, hodisalar. JQuery UI Ishning maqsadi: JQuery selektorlar, hodisalar va JQuery UI bilan ishlashni o‘rganing.
Reja:
Nazariy ma'lumotlar
Amaliy qism
Nazorat savollari
Qisqacha nazariy ma'lumotlar JavaScriptning skriptlar kutubxonasi hisoblanadi. JQuery veb-saytda JavaScriptni ishlatishni ancha osonlashtirib berishga hizmat qiladi. JQuery- bu JavaScript va HTMLning o‘zaro ta’siriga qaratilgan JavaScript funksiyalari to‘plami. JQuery – kutubxonasi har qanday DOM elementlarining tarkibiga osongina kirish va ularni boshqarishga yordam beradi.
JQuery kutubxonasi quyidagilar:
HTML/DOM manipulation
CSS manipulation
HTML hodisalar usullari
Effektlar va animatsiyalar
AJAX
Qo‘shimcha utilitalar
JQuery selektorlari JQuery selektorlari HTML elementlarni tanlash va boshqarishga imkon beradi. JQuery selektorlari HTML nomlarini, identifikatorini, sinflarini, turlarini, atributlarini, atributlarning qiymatlariga asoslangan holda "topish" (yoki tanlash) uchun ishlatiladi. U mavjud CSS selektorlarga asoslanadi va bunga qo‘shimcha ravishda ba’zi bir o‘ziga xos tanlovchilar mavjud. JQuery dagi barcha selektorlar $ belgisi va qavslar bilan boshlanadi: $ ()
Element Selektor
JQuery elementini selektor element nomiga qarab elementlarni tanlaydi. Siz sahifadagi barcha
elementlarini quyidagicha tanlashingiz mumkin:
$ ("p")
Misol
Agar foydalanuvchi tugmachani bosganda, barcha
elementlari yashirinadi:
Misol: $(document).ready(function(){
$("button").click(function(){
$("p").hide(); });
});
Id Selektori
JQuery id selektori ma'lum elementni topish uchun HTML tegining id atributidan foydalanadi. Id sahifada noyob bo‘lishi kerak, shuning uchun bitta, noyob element topmoqchi bo‘lganingizda id selektoridan foydalanishingiz kerak.
Muayyan identifikatorga ega elementni topish uchun xash belgisini, so‘ngra HTML elementining idini yozing:
$ ("# test")
Misol
Foydalanuvchi tugmachani bosganda, id = "test" elementi yashirinadi:
Misol
(document).ready(function(){
$("button").click(function(){
$("#test").hide(); });
});
Class Selektori
JQuery .class selektori ma'lum bir sinfga ega elementlarni topadi. Muayyan sinfga ega elementlarni topish uchun nuqta belgisini yozing, so‘ngra sinf nomi:
$ (". test")
Misol
Foydalanuvchi tugmachani bosganda class = "test" elementlari yashirinadi:
Misol
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
}); });
jQuery hodisalari
