Mustaqil ish Mavzu: jquery ga kirish. Asosiy tushunchalar

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");
  }
});