Mustaqil ish Mavzu: jquery ga kirish. Asosiy tushunchalar

Muhammad al-Xorazmiy nomidagi

Toshkent Axborot Texnologiyalari Universiteti

Web dasturlashga kirish bo’yicha

Mustaqil ish

Mavzu: JQUERY ga kirish. Asosiy tushunchalar.

Bajardi: Web009-guruh talabasi

Muzakbarov Doniyor

Tekshirdi: Talipova O.

Toshkent 2020

JQUERY ga kirish. Asosiy tushunchalar.

jQuery tez, yengil ishlash va xususiyatlarga ko’p bo’lgan JavaScript kutubxonasidir. Shiori „Kam yoz va ko’p ish qil“. Bu kutubxona HTML-hujjatlar bilan ishlash va manipulyatsiya qilish, voqealarni qayta ishlash, animatsiya, shuningdek Ajax bilan ishlashni ko'plab brauzerlarda ishlatishga oson bo’lgan API bilan soddalashtiradi. Ko'p qirraliligi va kengaytiruvchanlik kombinatsiyasi bilan jQuery millionlab JavaScript dasturchilarining yozish uslubini o'zgartirdi.

Bu kutubxona John Resig tomonidan ishlab chiqillgan. jQuery kutubxona tomonidan taqdim etilganidan tashqari uning imkoniyatlarini kengaytiradigan plaginlarni yaratish uchun platforma bilan ta'minlaydi. JQuery va unga tegishli loyihalarni rivojlantirish jQuery fondi tomonidan muvofiqlashtiriladi .

Xususiyatlari

jQuery quyidagi funktsiyalarni o'z ichiga oladi:

DOM(Document Object Model) elementlarini tanlovi, jQuery loyihasining spin-versiyasi bo'lgan ko'p brauzerli ochiq manbali vositasi.

DOM aylanish va modifikatsiya qilish (CSS 1–3 ni qo'llab-quvvatlash bilan birga)

Selektorlarni yaratish uchun mezon sifatida tugun elementlari nomlari va atributlaridan (masalan ID va Class) foydalanadigan CSS selektorlariga asoslangan DOM manipulyatsiyasi

Hodisalar

Effektlar va animatsiyalar

AJAX

JSON parsing (eski brauzerlar uchun)

Plaginlar orqali imkoniyatlarini kengaytirish

Foydalanuvchi agenti ma'lumotlari, xususiyatlarni aniqlash kabi yordamchi dasturlar

Multi-brauzerni qo'llab-quvvatlash (kross-brauzer bilan adashtirmaslik kerak)

Brauzerni qo'llab-quvvatlash

jQuery hozirgi Chrome, Edge, Firefox,Opera va Safarining hozirgi barqaror versiyasini qo'llab-quvvatlaydi.

Bundan tashqari, jQuery 1.x Internet Explorer 6 yoki undan yuqori versiyasini qo'llab-quvvatlaydi. Ammo IE 6-8- ni qo'llab-quvvatlash faqat IE 9 yoki undan yuqori versiyalarni qo'llab-quvvatlaydigan jQuery 2.x va jQuery 3.x chiqqanidan keyin to'xtatildi .

Undan tashqari jQuery Android 4.0 va undan yuqori versiyadagi mobil brauzerni va iOS 7 va undan yuqori versiyalarda Safarini qo'llab-quvvatlaydi.

Internetdagi eng yirik kompaniyalar jQuery-dan foydalanadilar, masalan:

• 
  Google
  
• 
  Microsoft
  
• 
  IBM
  
• 
  Netflix
  

JQuery-ni veb-sahifalarga qo'shish

Veb-sayt dasturida jQuerydan foydalanishni uchun quyidagilardan birini amalga oshirish talab qilinadi.

• 
  JQuery.com kutubxonasidan yuklab olish
  
• 
  Google kabi CDN-dan jQuery-ni qo'shish
  

JQuery kutubxonasi bitta JavaScript fayldan iborat va uni HTML 

jQuery CDN

Agar sizga jQueryni yuklab olmasdan ishlatish uchun esa CDN(Content Delivery Network) orqali foydalanish mumkin.

*Content Delivery Network = Kontentni yetkazish tarmog’i.

Masalan: Google CDN

jQuery sintaksisi

JQuery sintaksisi HTML elementlarini tanlash va element (lar) ustida ba'zi harakatlarni bajarish uchun mo'ljallangan .

Asosiy sintaksis bu: $ (selector ). action ()

• 
  JQuery-ni aniqlash / kirish uchun $ belgisi
  
• 
  HTML elementlariga ("so'rov (yoki topish)") ( selector )
  
• 
  element (lar) ustida bajarilishi kerak bo’lgan JQuery  action()
  

Misollar:

$(this).hide() - joriy elementni yashiradi.

$("p").hide() - barcha
elementlarni yashiradi.

$(".test").hide() - class = "test" bo’lgan barcha elementlarni yashiradi.

$("#test").hide() - elementni id = "test" bo’lganlarini yashiradi.

Eslatma! jQuery elementlarni tanlash uchun CSS sintaksisidan foydalanadi.

Hujjat tayyor bo’lgandagi holat

$(document).ready(function(){
  // jQuery funksiyalari shu yerda yoziladi
});

Bu funksiya bizga hujjatni yuklash tugamasdan turib biron bir jQuery kodi ishlamab ketmasligini oldini olishga yordam beradi.

Hujjatning to'liq yuklanishini kutish va u oldin tayyor bo'ldan keyin biror amalni bajarish yaxshi usul hisoblanadi. Shuningdek bu yondashuv bizga JavaScript kodini hujjatning body qismidan oldin, bosh qismida taqdim etish imkonini beradi.

Hujjat to'liq yuklanmasdan oldin funksiyalar bajarilsa, muvaffaqiyatsiz bo'lishi mumkin bo'lgan ba'zi harakatlar:

• 
  Hali yaratilmagan elementni yashirishga harakat qilish
  
• 
  Hali yuklanmagan rasm hajmini olishga harakat qilish
  

Yuqoridagi kodni yana ham qisqartirish mumkin:

$(function(){

   //jQuery funksiyalari shu yerda yoziladi
});

jQuery selectorlari

jQuery selectorlari jQuery kutubxonasining eng muhim qismlaridan biridir.

jQuery selektorlari HTML elementlarni tanlash va ularni boshqarishga imkon beradi.

jQuery selektorlari HTML elementlarini ularning nomi, identifikatori, sinflari, turlari, atributlari, atributlarning qiymatlari va boshqalarga asoslangan holda "topish" (yoki tanlash) uchun ishlatiladi. U mavjud CSS Selectorlariga asoslanadi va bunga qo'shimcha ravishda o'z shaxsiy selektorlariga ham ega.

JQuery-dagi barcha tanlovchilar dollar belgisi va qavslar bilan boshlanadi: $ ().

Element Selector

JQuery elementlar selektori element nomiga qarab elementlarni tanlaydi.

Quyidagi kod orqali 

sahifadagi barcha elementlarni tanlash mumkin:

$("p")

Misol

Foydalanuvchi tugmani bosganda, barcha 

elementlar yashiriladi:

$(document).ready(function(){

   $("button").click(function(){
    $("p").hide();
   });
});

#Id selector

JQuery selektori aniq elementni topish uchun HTML yorlig'ining id atributidan foydalanadi.#id

ID sahifada yagona bo'lishi kerak, shuning uchun siz yagona, elementni topmoqchi bo'lganimizda #id selektoridan foydalanishimiz kerak.

Muayyan identifikatorli elementni topish uchun, HTML elementining identifikatori bilan xesh(panjara) belgi yoziladi:

$("#test")

Misol

Foydalanuvchi tugmachani bosganda, id = "test" elementi yashirin bo'ladi:

$(document).ready(function(){
  $("button").click(function(){
   $("#test").hide();
 });
});

Class selektori

JQuery .class selektori ma'lum bir sinfga ega bo'lgan elementlarni topadi.

Muayyan sinfga ega elementlarni topish uchun .(nuqta) va keyin sinf nomini yoziladi:

$(".test")

Misol

Foydalanuvchi tugmachani bosganida, class = "test" elementlari yashiriladi:

$(document).ready(function(){
 $("button").click(function(){
   $(".test").hide();
  });
});

Alohida fayldagi vazifalar

Agar veb-saytda juda ko'p sahifalar bo'lsa va jQuery funktsiyalarni oson saqlashni xohlasak, jQuery funktsiyalarini alohida .js fayliga qo'yish mumkin.

Misol

jQuery event(voqea) metodlari

Eventlar nima?

Veb-sahifa javob berishi mumkin bo'lgan barcha tashrif buyuruvchilarning harakatlariga eventlar deyiladi.

Hodisa biror narsa sodir bo'ladigan aniq lahzani anglatadi.

Misollar:

• 
  element ustida sichqonchani harakatlantirish
  
• 
  radiobuttonni tanlash
  
• 
  elementni bosish
  

Event metodlari uchun jQuery sintaksisi

JQuery-da, DOM(Document Object Model) hodisalarining aksariyati mos keladigan jQuery metodiga ega.

Sahifadagi barcha paragraflarga klik hodisasini tayinlash uchun siz buni qilishingiz mumkin:

$("p").click();

Keyingi qadam, voqea sodir bo'lganda nima bo'lishi kerakligini aniqlashdir. Hodisaga funktsiyani topshirishingiz kerak:

$("p").click(function(){
  // kod shu yerda yoziladi
});

Tez-tez ishlatiladigan jQuery event metodlari

$(document).ready()

$(document).ready() Metodi hujjat to'liq yuklangan bo'lsa, bizga bir vazifani bajarishi uchun imkon beradi.

click()

Foydalanuvchi HTML elementini bosganda funktsiya bajariladi.

elementga o'tganda bir marta bosilganda, joriy 

elementni yashirish:

Misol:

$("p").click(function(){
  $(this).hide();
});

dblclick ()

Foydalanuvchi HTML elementini ikki marta bosganda funktsiya bajariladi:

Misol

$("p").dblclick(function(){
 $(this).hide();
});

mouseenter()

Sichqoncha ko'rsatgichi HTML elementiga kirganda funktsiya bajariladi:

Misol

$("#p1").mouseenter(function(){
 alert("You entered p1!");
});

mouseleave()

Sichqoncha ko'rsatgichi HTML elementini tark etganida funktsiya bajariladi:

Misol

$("#p1").mouseleave(function(){
 alert("Bye! You now leave p1!");
});

mousedown()

Sichqoncha HTML elementi ustida ishlayotganda sichqonchaning chap, o'rta yoki o'ng tugmasi bosilganda, funktsiya bajariladi:

Misol

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});

hover ()

hover() metodi, ikkita funksiya oladi va mouseenter() va mouseleave() metodlari birikmasi hisoblanadi.

Birinchi funktsiya sichqoncha HTML elementiga kirganda, ikkinchisi esa sichqoncha HTML elementini tark etganida bajariladi:

Misol

$("#p1").hover(function(){
  alert("You entered p1!");
},
function(){
  alert("Bye! You now leave p1!");
});

focus()

Forma maydoni fokus olganda funktsiya bajariladi:

Misol

$("input").focus(function(){
  $(this).css("background-color", "#cccccc");
});

blur()

Forma maydoni fokusni yo'qotganda funktsiya bajariladi:

Misol

$("input").blur(function(){

  $(this).css("background-color", "#ffffff");
});

On() metodi

on() metodi tanlangan elementlar uchun bitta yoki bir nechta eventlarni birlashtirish uchun ishlatiladi.

 
element boslish eventini biriktirish:

Misol

$("p").on("click", function(){
 $(this).hide();
});

elementga bir necha eventni biriktirish: 

Misol

$("p").on({
 mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
 mouseleave: function(){
   $(this).css("background-color", "lightblue");
  },
  click: function(){
   $(this).css("background-color", "yellow");
  }
});