jQuery Katalogi

8.1 jQuery ni ulash

Oxiri biz jQuery katalogiga yetib keldik. Ushbu maqola yozilgan paytda u axloqan eskirgandi va undan yangi loyihalarda deyarli foydalanilmaydi. Lekin o'z vaqtida u juda mashhur edi, yaxshi hujjatlashtirilgandi va internetda undan foydalanish misollari juda ko'p edi.

Shuning uchun agar kichik bir web-loyiha yozayotgan bo'lsang va zamonaviy frameworklarni o'rganishga oylab vaqt sarflashni xohlamasang, senga jQuery katalogidan foydalanishni tavsiya qilaman.

Bu frontend-a. html-page ga jquery ni ulash aslo oson. Bu o'z ichida sening qurilmang formatidagi har qanday function ni chaqirish mumkinligini anglatadi.

JQuery ning minglab funksiyalaridan foydalanish uchun sen uni shunchaki sahifangga ulashing kerak. Buni quyidagi usulda qilishing mumkin:

   <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   </head>

jQuery bilan ishlash ikki tipga bo'linadi.

Birinchidan, sen jQuery katalogining biror obyektini olishing mumkin, bu oddiy HTML elementini jQuery dan maxsus obyektga o'ralgan holda ifodalaydi.

Ikkinchidan, jQuery da bir nechta global obyektlar mavjud, ular HTML elementlariga bog'lanmagan. Bularni ham ishlatishga to'g'ri keladi.

Birinchi turlardan boshlaymiz.

8.2 Selektorlar bilan ishlash

jQuery dagi obyektlar bilan ishlash uchun selektorlardan foydalaniladi (CSS va uning klasslarini eslaysanmi?). Xo'sh, jQuery da, agar biror obyekt yoki obyektlar guruhini tanlamoqchi bo'lsang, ularning selektorini ko'rsatishing kerak.

Misollar:

Faraz qilaylik, biz barcha havolalarga onclick hodisasini ishlovchi qo'shmoqchimiz, bu jQuery yordamida quyidagicha amalga oshiriladi:

 $("a").click(function() { alert("Click"); });

Bu yerda uchta amallar bajariladi:

1. "a" selektoriga mos keladigan obyekt(lar) olinadi.
2. Anonim funksiya yaratiladi, bu alert() metodini chaqiradi.
3. Ushbu funksiya 1-banddagi barcha obyektlarga click hodisasi uchun ishlovchi sifatida o'rnatiladi.

jQuery ning yana yaxshi tomoni shundaki, uning kodini o'qish juda qulay. Hammasi qanday ishlashini chuqur tushunish shart emas. Agar ishlaydigan kod bo'lsa, nima qilayotganini tushunish kifoya.

8.3 Hujjat elementlari bilan ishlash

Keling, hujjat bilan jQuery yordamida ishlashning bir necha ssenariylarini ko'rib chiqaylik.

Element qiymatini olish (qiymatga ega bo'lishi mumkin bo'lgan elementlar uchun):

        var natija = $ ("selector").value();
    

Elementga qiymat berish (qiymatga ega bo'lishi mumkin bo'lgan elementlar uchun):

        $ ("selector").value(yangiQiymat);
    

Qanday qilib biror element ichiga HTML qo'shish mumkin?

        $ ("selector").html(yangiHTML);
    

Qanday qilib element ichidagi HTML ni olish mumkin?

        var html = $ ("selector").html();
    

Oddiy matnni olish/qo'shish kerak bo'lsa-chi? Bu yerda ham hech qanday kutilmagan holatlar yo'q:

        var html = $ ("selector").text();
    

Elementning rangini olish/o'zgartirish kerak bo'lsa-chi?

        $ ("selector").color("red");
    

Stil bilan ishlash kerak bo'lsa, bu ham oson:

        $ ("selector").css("color", "red");
    

Yangi element qo'shish kerak bo'lsa, nima qilish kerak?

        $ (".container").append($("h3"));